How to use v3 in FireFox?

[linonetwo]

https://extensionworkshop.com/documentation/develop/manifest-v3-migration-guide/

Seems FireFox is also recommending V3. But I found it is impossible to pick dist folder from about:addons of Firefox, why? (After running pnpm dev)

[linonetwo]

Can pick manifest.json in about:debugging#/runtime/this-firefox 's "load temp"

But errors

Extension is invalid

Reading manifest: Error processing background: Value must either: contain the required "page" property, contain the required "scripts" property, or not contain an unexpected "type" property

[linonetwo]

After running firefox-mv2-build, and load the manifest.json, I get:

Is the service worker generated from code in src/background? Can Firefox still using it?

[linonetwo]

I can see in the generated manifect, service-worker-loader.js is not used anymore, so currently Firefox is not supported.

(But I can still use content script that runs when user triggers it. So maybe it is fine.)

---

I found in dist-firefox-v2/background.html there is <script type="module" src="./service-worker-loader.js"></script>, but it is not working, see screenshot above.

[linonetwo]

Wow, seems it works in production build

I can dev in the Chrome/Edge, and use it in production in Firefox

There is no need to set manifest.manifest_version = 2;

/* eslint-disable unicorn/no-null */
/* eslint-disable @typescript-eslint/no-unsafe-call */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
/* eslint-disable unicorn/prevent-abbreviations */
/* eslint-disable unicorn/import-style */
// @ts-check

import fs from 'fs-extra';
import * as path from 'path';

const BASE_OUT_DIR = 'dist';
const baseOutDir = path.resolve(BASE_OUT_DIR);

if (!fs.existsSync(baseOutDir)) {
  throw new Error(`${BASE_OUT_DIR} dir does not exist. Please run base build first.`);
}

const outDir = `${path.dirname(path.basename(baseOutDir))}/${BASE_OUT_DIR}-firefox-v2`;

fs.copySync(baseOutDir, outDir);

const manifestPath = path.resolve(outDir, 'manifest.json');
const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));

// manifest.manifest_version = 2;

fs.writeFileSync(
  `${outDir}/background.html`,
  '<script type="module" src="./service-worker-loader.js"></script>',
);
manifest.background = { page: 'background.html' };

// manifest.browser_action = manifest.action;
// delete manifest.action;

// for (const permission of manifest.host_permissions) {
//   manifest.permissions.push(permission === '<all_urls>' ? '*://*/*' : permission);
// }
// delete manifest.host_permissions;

// const temporaryResources = [];
// for (const object of manifest.web_accessible_resources) {
//   for (const resource of object.resources) {
//     temporaryResources.push(resource);
//   }
// }
// manifest.web_accessible_resources = temporaryResources;

fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2));

[sinanbekar]

Thank you for reaching out. Firefox Manifest v3 is slightly different from the Chromium Manifest v3. It does not support background.type which is added by @crxjs/vite-plugin in build manifest and background.service_worker. I will add unstable_firefoxMv3 script to the tools which will output dist-firefox-v3. Unfortunately, it will not support dev environment as you said.

[sinanbekar]

I see that Firefox MV3 support coming out to crxjs. It seems it's just for production build and has some issues for now.

see: crxjs/chrome-extension-tools#776
and crxjs/chrome-extension-tools#790

[linonetwo]

My firefox extionsion is on the store! https://addons.mozilla.org/firefox/addon/tiddlywiki-collector/

https://github.com/tiddly-gittly/Browser-Extension-Tiddlywiki-Collector

Not using background script, do everything in the content script and popup, so it works very good. Despite of some bug in the polyfill mozilla/webextension-polyfill#172 (comment)

[linonetwo]

Just debug in the firefox is slow, I need to do the full build (to run the to-firefox-script), then reload the extension...No HMR is a pain. And Firefox API is somehow different to the Edge. But overall it is a good experience to dev first on the Edge.