Add compatibility mode for Firefox

[laptou]

I wanted to be able to use this extension to create MV3 extensions for both Chrome and Firefox. They each implement MV3 a little differently; in particular:

• Firefox does not allow use_dynamic_url in web_accessible_resources because it the resource URLs in Firefox are always dynamic
• Firefox continues to use background pages instead of service workers

So I added a new config option called browser that can be either "firefox" or "chrome", and if it is "firefox", then the emitted manifest.json will respect these differences so the extension can be loaded in Firefox.

There are some parts that don't work very well yet -- in particular, hot module reloading does not work in Firefox because the service worker generated by this extension does not work as a background page.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 09b394f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated
vite-plugin-docs	⬜️ Ignored (Inspect)			Feb 2, 2023 at 0:41AM (UTC)

[jacksteamdev]

This looks great! FF support is something people have asked for.

CI doesn't pass yet, I'll be happy to merge this once it does 👍

[thilinaaligent]

for the time being I am using a vite plugin to manually modify the manifest.json. Apart from removing using_dynamic_url I also had to add https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings#description since All Manifest V3 extensions need an add-on ID in their manifest.json when submitted to AMO.

[jhholm]

I took a quick look at this, as I've been trying to work on porting an extension from Chrome to Firefox. I don't think the linting issues are a big problem, but the bigger issue is that a dev build doesn't work on Firefox. A background page cannot import from localhost because of CSP, and CSP doesn't allow localhost in MV3. @laptou already left a comment about this in the code.

I worked around the dev issue with vite build --watch --sourcemap instead of vite and added a separate script dev:firefox in my example extension. Not particularly beautiful.

I should be able to provide my view on the small changes to the linting issues if needed.

[iPaulPro]

for the time being I am using a vite plugin to manually modify the manifest.json. Apart from removing using_dynamic_url I also had to add https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings#description since All Manifest V3 extensions need an add-on ID in their manifest.json when submitted to AMO.

@thilinaaligent Could you possibly share the details of the vite plugin and configuration you're using?

[laptou]

CI doesn't pass yet, I'll be happy to merge this once it does +1

As mentioned by @jhholm, this PR isn't fully complete because I haven't figured out how to make hot reloading work in Firefox. Background pages have different APIs and capabilities from service workers, so it will require some more work to get this fully baked. I'm not sure when I will get around to writing a background page though, so if anyone else wants to take it on, that would be much appreciated.

[krisalcordo]

@laptou wanting to take this on. Can I get some guidance on your idea?

[laptou]

@kjaonline What kind of guidance are you looking for? The main thing that is needed to make this PR complete in my opinion is an implementation of hot reloading that is compatible with Firefox's background pages. This requires looking at how the HMR service worker is implemented for Chrome and addressing the differences between the technologies (which are largely differences in the restrictions on how scripts can be loaded)

[IamFive]

Great job. Is anyone still working on this pull request to move it forward?

[laptou]

@IamFive I've been occupied with other stuff for a while; if you would like to fix the CI stuff it's all yours

[winstxnhdw]

@laptou I just created a PR to this fork that fixes the CI. I didn't attempt to fix the HMR issue because that isn't really important to me. Let's just get this PR merged first.

[jacksteamdev]

Closing in favor of #776 which build on this PR. Thanks for putting it together!

[jacksteamdev]

Firefox support has landed on NPM https://www.npmjs.com/package/@crxjs/vite-plugin/v/2.0.0-beta.19