Firefox build for Backpack

[beeman]

I would love to see a Firefox build for Backpack. Happy to contribute to make this happen

[armaniferrante]

Would love some help with this @beeman!

[beeman]

I've tried to get it running in Firefox and it looks there are a few issues.

1: Firefox doesn't support Manifest v3 yet, but there is a developer preview and it will be a matter of time for that to land.

2: The next blocker is the lack of background service workers in Firefox. To install the extension anyway, you can change this in the manifest.json:

   "background": {
-    "service_worker": "background.js",
-    "type": "module"
+    "scripts": ["background.js"]
   },

3. Once its installed, opening the extension leads to this message, coming from <LedgerIframe /> who is trying to access navigator.serviceWorker:

The fix for this seems simple enough, conditionally loading that LedgerIframe when the service worker is enabled.

const LedgerIframe = () => {
  if (typeof serviceWorker in navigator) {
    return <LoadLedgerIframe />;
  }
  return null;
};

With that in place, the extension loads and seems to work as expected! 🥳

In terms of next steps, I'm happy to submit a PR that conditionally loads the LedgerIframe if the service worker is found.

With regards to the other change, it should be simple enough to patch the manifest.json just before creating the Firefox build, so I think that could be done in a build script.

[armaniferrante]

Build script sounds great!

Unfortunately, that conditional iframe load will break ledgers, and so we need to also add back in the ledger injection somehow.

One solution is to mirror that conditional step, but in the background script, and inject there (which is what we used to do when we were using manifest v2). The PR that migrated from v2 -> v3 can be found here. Feel free to use this for inspiration (or if you have a better solution, even better!).

[wentokay]

Resurfacing this issue and taking a quick look at it while some other stuff is building

This are the errors that would need addressing after running npx web-ext lint --source-dir ./build right now

TODO

• reduce options.js add another lazy import in options.js to reduce bundle size #3665
• reduce or remove solana tokenlist json
• add extension id to manifest add firefox support #3666
• update background script to be compatible add firefox support #3666

---

After that all references to chrome. would need to use the browser. API

I'll update this thread as any progress is made