Replacing `background.service_worker` with `background.scripts` when building for Firefox

[wottpal]

Unfortunately, Firefox does still not fully support Manifest v3 at this point.

One thing that needs to be changed after building for Firefox via extension build -b firefox when using background scripts is this (rename & put in array):

---  "background": {
---    "service_worker": "background/service_worker.js"
---  },

+++ "background": {
+++ "scripts": ["background/service_worker.js"]
+++ },

(Automated) Workaround with jq:

"scripts": {
    "build:firefox": "extension build -b firefox && (cd dist/firefox && jq '.background.scripts = [.background.service_worker] | del(.background.service_worker)' manifest.json > tmp.json && mv tmp.json manifest.json)",
  // …

[cezaraugusto]

you can use the browser prefix for the field you want to target.

{
  "background": {
    "chromium:service_worker": "background/service_worker.js",
    "firefox:scripts": ["background/service_worker.js"]
  }  
}

does it work for your case?

[cezaraugusto]

ping @wottpal

[wottpal]

Nice, I didn't know about those browser-specific selectors. I gave it a try but there is still an issue with this solution.

manifest.json

  "background": {
    "chromium:service_worker": "src/action/background.ts",
    "firefox:scripts": ["src/action/background.ts"]
  },

dist/firefox/manifest.json (generated)

  "background": {
    "scripts": [
      "background/scripts.js"
    ]
  },

… Buuut background/scripts.js does not exist in the firefox bundle, the file is still named (as it should probably): service_worker.js.

[cezaraugusto]

fixed today. please try the latest version and let me know how it goes!

[cezaraugusto]

@OSpoon could you pls confirm fix works as well?

[wottpal]

Yes, seems to be fixed on my end. Though, since updating to beta.1 environment variables stopped working for me in this very service worker. Might this be related and/or should i open a new issue?

[cezaraugusto]

@wottpal I updated the content-env template to include a variable in the background and it seems to work ok. could you give it a go?

pnpx extension@latest create my-extension-env --template=content-env
my-extension-env
pnpm dev

[wottpal]

After an extensive debugging session comparing the template with my project, it turned out to be the EXTENSION_PUBLIC_ prefix which needs to be prepended to the variable. 🙈 Now working.

When is this necessary and when not? I'm using the variable in my background script only. Might make sense to add this to the docs (or at least I've overseen it).

[cezaraugusto]

@wottpal tThe PUBLIC_ prefix is a guard to ensure users really want to expose the env var to the browser. sometimes people use Extension.js along with Next.js for example, which runs variables that should not be exposed outside the server, so the prefix is a way to support only what you want to be publicly visible

[wottpal]

Makes sense! Still would suggest adding it to the docs here :)

Closing this one as it is resolved.