5

I found a convenient way of turning my Chrome extension into modules (a lot easier to maintain etc.). I made it like this https://stackoverflow.com/a/53033388/9182284 (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?).

Mark Rotteveel
  • 100,966
  • 191
  • 140
  • 197
Gregor Kaljulaid
  • 51
  • 1
  • 3

1 Answers1

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
Jack Steam
  • 4,500
  • 1
  • 24
  • 39
  • Related: You can use [Parcel 2’s native transformer](https://v2.parceljs.org/recipes/web-extension/) 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@nightly` – fregante Feb 12 '21 at 19:51