How to set up Parcel with @parcel/config-webextension for a Chrome DevTools extension

[temelm]

• Started a test project repository.
• Configured the .parcelrc file as follows:

{
  "extends": "@parcel/config-webextension"
}

• Set up the extension manifest.json file as follows:

{
  "action": {
    "default_popup": "popup/popup.html"
  },
  "description": "Training Parcel Web Extension",
  "devtools_page": "devtools/devtools.html",
  "icons": {
    "128": "images/logo.png"
  },
  "manifest_version": 3,
  "name": "Training Parcel Web Extension",
  "version": "1.0.0"
}

• devtools_page is currently pointing at devtools/devtools.html
• devtools.html loads devtools.js which executes the following referencing panel/index.html:

chrome.devtools.panels.create(
  'Training Parcel Web Extension',
  '../images/logo.png',
  './panel/index.html'
)

• Not sure why but Parcel seems to be unable to resolve panel/index.html. DevTools panel is created but the panel HTML is missing (it's not in the dist directory).

[temelm]

For anyone interested, this can be solved in 2 steps.
Step 1: Update manifest.json to include panel/index.html in the web_accessible_resources as follows:

"web_accessible_resources": [
    {
      "resources": ["./devtools/panel/index.html"],
      "matches": ["<all_urls>"]
    }
  ]

Step 2: Update the panel/index.html reference within devtools.js as follows:

chrome.devtools.panels.create(
  'Training Parcel Web Extension',
  null,
  './devtools/panel/index.html'
)