How to configure ParcelJS for Chrome DevTools extension project

Question

I maintain a Chrome DevTools extension for which I utilise Gulp to bundle my code. Since Gulp is not maintained anymore, I am looking to migrate to another bundler. I started a test project to try out Parcel as it has web extension support.

• .parcelrc file placed in the root directory tells Parcel this is a web extension project.

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

• Application entry point can be found at src/manifest.json.

{
  "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"
}

• Parcel seems to be able to reference devtools/devtools.html. This file loads devtools/devtools.js which executes the following:

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

• Everything seems to work except Parcel is unable to resolve panel/index.html. Is there a clean way of achieving this?
• Second problem I have is for some reason I am unable to get Parcel to watch for changes and rebuild the app. I tried the following commands:

parcel watch src/manifest.json --host localhost --config @parcel/config-webextension

parcel serve src/manifest.json

Answer 1

update using CRXJS instead: it was complaining about the relative path - removing ./ at line 26 made it work

---

Original Answer

Why this is happening: The parcel bundler isn't seeing ./panel/index.html because nothing is linking or referencing it. So it is ignored and never bundled to your /dist folder.

To fix problem 1: update manifest.json with reference it as a web resource

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

then update the path in devtool.js to be the same as the manifest web resource.

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

This should bundle panel/index.html along with anything it might call. Your devtool should load correctly in your popup inspect.

Regarding problem 2: you didn't post the error you are getting (if any) but I'm guessing it's this one?

Server running at http://localhost:1234
🚨 Build failed.

@parcel/transformer-webextension: Cannot read properties of undefined (reading 'flatMap')

If so the fix was adding "content_scripts": [] to your manifest.json (this is a bug in @parcel/config-webextension that breaks with Mv3 when this field is missing 🤷🏽‍♂️

After that parcel serve src/manifest.json should work