feat: Support browser-specific manifest generation for Chrome and Firefox

.github/workflows/ci.yml

@@ -16,6 +16,6 @@ jobs:
       - run: yarn install --frozen-lockfile
       - name: yarn build and test
         run: |
-          yarn build
+          yarn build:all
           yarn test
           yarn lint:check

.gitignore

@@ -8,6 +8,7 @@
 
 # production
 /dist
+/dist-*
 
 # misc
 .DS_Store

manifest.json → manifest.template.json

@@ -6,7 +6,8 @@
   "permissions": ["alarms", "notifications", "storage"],
   "optional_permissions": ["tabs"],
   "background": {
-    "service_worker": "background.js",
+    "__chrome__service_worker": "background.js",
+    "__firefox__scripts": ["background.js"],
     "type": "module"
   },
   "action": {

package.json

@@ -55,7 +55,12 @@
   "scripts": {
     "start": "webpack serve",
     "watch": "tsc --noEmit --watch",
-    "build": "rm -rf dist; webpack --mode production",
+    "build:chrome-mv3": "rm -rf dist-chrome-mv3; BROWSER=chrome webpack --mode production",
+    "build:firefox-mv3": "rm -rf dist-firefox-mv3; BROWSER=firefox webpack --mode production",
+    "build:all": "npm run build:chrome-mv3 && npm run build:firefox-mv3",
+    "zip:chrome-mv3": "cd dist-chrome-mv3 && zip -r ../dist-chrome-mv3.zip .",
+    "zip:firefox-mv3": "cd dist-firefox-mv3 && zip -r ../dist-firefox-mv3.zip .",
+    "zip:all": "npm run zip:chrome-mv3 && npm run zip:firefox-mv3",
     "test": "jest",
     "lint:check": "eslint \"src/**/*.ts\" \"src/**/*.tsx\"",
     "lint:fix": "eslint --fix \"src/**/*.ts\" \"src/**/*.tsx\""

scripts/transform-manifest.js

@@ -0,0 +1,64 @@
+/**
+ * Transforms the manifest.json file for the given browser.
+ * @param {string} browser - The browser to transform the manifest.json for.
+ * @returns {function} - A function that transforms the manifest.json file.
+ */
+function transform(browser) {
+    /**
+     * Transforms the manifest.json file for the given browser.
+     * @param {Buffer} buffer - The buffer to transform.
+     * @returns {string} - The transformed manifest.json file.
+     */
+    return (buffer) => {
+        const manifest = JSON.parse(buffer.toString());
+
+        transformObject(manifest, browser);
+
+        return JSON.stringify(manifest, null, 2);
+    };
+}
+
+const browserKeyPattern = /^__(.+?)__(.+)$/;
+
+/**
+ * Recursively traverses the object and transforms the browser-specific keys.
+ * @param {object} obj - The object to transform.
+ * @param {string} browser - The browser to transform the object for.
+ */
+function transformObject(obj, browser) {
+    if (typeof obj !== 'object' || obj === null || Array.isArray(obj)) {
+        return;
+    }
+
+    const keysToProcess = Object.keys(obj);
+    const keysToAdd = {};
+    const keysToDelete = [];
+
+    for (const key of keysToProcess) {
+        const match = key.match(browserKeyPattern);
+        if (match) {
+            const [, keyBrowser, actualKey] = match;
+
+            if (keyBrowser === browser) {
+                keysToAdd[actualKey] = obj[key];
+                keysToDelete.push(key);
+            } else {
+                keysToDelete.push(key);
+            }
+        } else {
+            transformObject(obj[key], browser);
+        }
+    }
+
+    for (const [newKey, value] of Object.entries(keysToAdd)) {
+        obj[newKey] = value;
+    }
+
+    for (const keyToDelete of keysToDelete) {
+        delete obj[keyToDelete];
+    }
+}
+
+module.exports = {
+    transform,
+};

webpack.config.js

@@ -4,6 +4,10 @@ const BundleAnalyzerPlugin =
   require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
 const CopyPlugin = require("copy-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { transform } = require("./scripts/transform-manifest");
+
+const browser = process.env.BROWSER || "chrome";
+const outputDir = `dist-${browser}-mv3`;
 
 module.exports = {
   module: {
@@ -41,6 +45,7 @@ module.exports = {
   output: {
     filename: "[name].js",
     publicPath: "/",
+    path: path.resolve(__dirname, outputDir),
   },
   mode: "development",
   devServer: {
@@ -64,7 +69,11 @@ module.exports = {
     }),
     new CopyPlugin({
       patterns: [
-        { from: "manifest.json", to: "." },
+        {
+          from: "manifest.template.json",
+          to: "manifest.json",
+          transform: transform(browser),
+        },
         { from: "images", to: "images" },
       ],
     }),