Modules and dynamic importing in Mozilla addon
Asked Answered
N

1

6

I found a convenient way of turning my Chrome extension into modules (a lot easier to maintain etc.). I made it like this https://mcmap.net/q/158579/-how-to-import-es6-modules-in-content-script-for-chrome-extension (turning background.js into a module and then using dynamic import to get modules).

The simplified version of importing:

(async () => {
  const src = chrome.extension.getURL("your/content_main.js");
  const contentMain = await import(src);
  contentMain.main();
})();

My question is: how could I implement it in Mozilla Firefox? As I am developing for both browsers (first for Chrome and then later copy stuff over to Firefox files and change what's needed). Earlier I just went the easy way and included all the functions in the files they are needed for Firefox version but as I have like 20 files at least then it gets dull do edit all of them etc.

When I try to use dynamic import in Firefox addon then it just doesn't load the script at all (no error log or anything in console) so I don't exactly know the problem (does Firefox just not support it at all?).

Nellienellir answered 30/1, 2019 at 17:30 Comment(2)
This is the bug report over on Bugzilla.Heterosexuality
As the bug report suggests, this is still not supported by Firefox. Maybe by 2026…Wellknit
H
0

If you don't mind using a build tool, I found that parcel works pretty well for this. Use the web extension plugin.

Install via NPM

$ npm install parcel parcel-plugin-web-extension --save-dev

Build from the terminal

$ parcel build --out-dir dist-firefox dist/manifest.json
Heterosexuality answered 8/8, 2019 at 22:48 Comment(1)
Related: You can use Parcel 2’s native transformer for this now. Currently you'll have to install 3 modules in their "nightly" version: npm install parcel@nightly @parcel/config-webextension@nightly @parcel/transformer-webextension@nightlyWellknit

© 2022 - 2024 — McMap. All rights reserved.