Manifest V3 breaks support for Firefox and Manifest V2 is no longer supported in Chrome

[joshsmith]

trafficstars

My original comment can be found in #46.

While the new manifest.json in #46 was tested in Chrome, the Manifest V3 will not work in Firefox:

... we expect to launch MV3 support for all users by the end of 2022.

This breaks cross-browser compatibility for this starter for at least Firefox. Brave apparently plans to continue Manifest V2 support past sunset.

This is complicated further by the fact that new Manifest V2 extensions are already not supported by Chrome.

I think we need a new approach to handle how manifest.json is generated for the dist, perhaps on a per-browser basis?

[joshsmith]

This is also complicated by the story around Service Workers and Firefox's Event Pages:

In Firefox, we have decided to support Event Pages in MV3, and our developer preview will not include Service Workers (we’re continuing to work on supporting these for a future release). This will help developers to more easily migrate existing persistent background pages to support MV3 while retaining access to all of the DOM related features available in MV2. We will also support Event Pages in MV2 in an upcoming release, which will additionally aid migration by allowing extensions to transition existing MV2 extensions over a series of releases.

[joshsmith]

Here's an approach we could take with this:

• Create different manifest versions in src
  • src/manifest.v3.json and src/manifest.v2.json
  • OR src/manifest.BROWSER.json – src/manifest.chrome.json, src/manifest.firefox.json, etc
• Add a step in the webpack config to move and rename the src/manifest.json to dist/manifest.json

The bigger problem is ensuring backwards compatibility in the background script to accommodate the various browser API support.

This Hacker News comment has a nice idea to use DefinePlugin to add or remove code based on the build target. This could even obviate the idea I suggested above and be extensible outside of the manifest as a result.

[joshsmith]

• https://github.com/abhijithvijayan/wext-manifest-loader

Generate browser tailored manifest.json for Web Extensions that you specify properties to appear only in specific browsers.

[joshsmith]

Another approach would be to use CopyWebpackPlugin or similar to copy the files individually depending upon the browser target.

[joshsmith]

A /src/manifest.json using wext-manifest-loader would look something like this:

{
  "manifest_version": 2,
  "__chrome__manifest_version": 3,
  "name": "Chrome Extension Starter",
  "description": "A Chrome Extension starter kit",
  "version": "1.0.0",
  "browser_action": {
    "default_icon": {
      "16": "icon-16.png",
      "48": "icon-48.png",
      "128": "icon-128.png"
    },
    "default_popup": "popup.html"
  },
  "__chrome__browser_action": {},
  "__chrome__action": {
    "default_icon": {
      "16": "icon-16.png",
      "48": "icon-48.png",
      "128": "icon-128.png"
    },
    "default_popup": "popup.html"
  },
  "background": {
    "scripts": ["js/backgroundPage.js"]
  },
  "__chrome__background": {
    "service_worker": "js/backgroundPage.js"
  },
  "icons": {
    "16": "icon-16.png",
    "48": "icon-48.png",
    "128": "icon-128.png"
  },
  "__chrome__host_permissions": ["https://*/*"],
  "permissions": [
    "tabs",
    "activeTab",
    "notifications",
    "scripting",
    "https://*/*"
  ],
  "__chrome__permissions": ["notifications", "scripting", "storage", "tabs"]
}

[aeksco]

@joshsmith Thanks for opening this issue and leaving all the notes - agreed, we should address this.

I'm going to take a few days to review some options and identify what I think best path will be moving forward for both the short-term and long-term - I'll post an update here when I've had a chance to get more traction on the problem :+1:

[joshsmith]

Here's another interesting approach: https://github.com/quolpr/react-vite-webext/blob/main/src/manifest.ts

Obviously this is using Vite, but still worth learning from.

[de1mat]

Any progress on this? Interested in using this starter kit but hitting this issue out of the box...

[nemanjam]

So as is I cant use it in Firefox? Also content_scripts is missing?