Search code examples
google-chrome-extensiongoogle-chrome-devtoolspanelparceljsparcel

How to configure ParcelJS for Chrome DevTools extension project


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

Solution

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

    enter image description here

    I also tried




    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.

    result bundle

    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