Parcel supports bundling webextensions: https://v2.parceljs.org/recipes/web-extension/
The command to set up a build server and watch for changes is: parcel src/manifest.json --host localhost --target webext-dev
. This will bundle a webextension into the dist/
folder.
I'd like to run this extension with web-ext run
. This is a tool from Mozilla which automatically loads a webextension into Firefox and reloads on changes. Running this in the dist/
folder should make for a great pair with parcel.
But in practice the bundled webextension is not executing my content scripts.
This is because parcel is serving them from localhost. It needs the flag --host localhost
for hot module replacement.
But the webextension then complains "page's settings blocked loading of a resource at ws://localhost:1234/ (“connect-src”)."
The parcel docs also demonstrate a build command: parcel build src/manifest.json --target webext-prod
. And if I execute web-ext run from dist/webext-prod
it works like a charm. A new run of the parcel build command automatically triggers a reload of the webextension. But this is not productive for development, since the parcel builds take too long. I'd like to use its development setup.
How can I correctly configure the content security policy of my webextension to allow content scripts that are loaded from localhost?
So far the entry in my manifest.json
looks like this:
"content_security_policy": "connect-src 'self' 'localhost:';",