Add build support for Chromium with Manifest V3.

package.json

@@ -10,8 +10,11 @@
   "private": true,
   "scripts": {
     "start": "vite build -m development --watch",
+    "start:chromium": "VITE_BROWSER=chromium pnpm start",
     "clean": "trash build web-ext-artifacts",
-    "build": "pnpm clean && vite build && web-ext build --source-dir build && pnpm zip-source",
+    "build": "pnpm clean && pnpm build:chromium && pnpm build:firefox && pnpm zip-source",
+    "build:chromium": "VITE_BROWSER=chromium vite build && web-ext build -n queue-chromium-{version}.zip -s build/chromium",
+    "build:firefox": "VITE_BROWSER=firefox vite build && web-ext build -n queue-firefox-{version}.zip -s build/firefox",
     "zip-source": "git archive --format zip --output web-ext-artifacts/queue-source.zip HEAD",
     "test": "xo && stylelint 'source/**/*.scss' && tsc && c8 ava"
   },

source/chromium-manifest.json

@@ -0,0 +1,27 @@
+{
+  "manifest_version": 3,
+  "name": "Queue",
+  "description": "A WebExtension for queueing links.",
+  "version": "0.2.2",
+  "permissions": [
+    "contextMenus",
+    "storage",
+    "tabs"
+  ],
+  "icons": {
+    "128": "assets/queue.png"
+  },
+  "action": {
+    "default_icon": {
+      "128": "assets/queue.png"
+    }
+  },
+  "options_ui": {
+    "page": "options/index.html",
+    "open_in_tab": true
+  },
+  "background": {
+    "service_worker": "background-scripts/initialize.ts",
+    "type": "module"
+  }
+}

source/types.d.ts

@@ -13,6 +13,7 @@ declare global {
     readonly DEV: boolean;
     readonly MODE: string;
     readonly PROD: boolean;
+    readonly VITE_BROWSER: 'chromium' | 'firefox';
   }
 
   type HtmComponent = ReturnType<typeof html>;

vite.config.ts

@@ -1,5 +1,6 @@
 import fs from 'node:fs';
 import path from 'node:path';
+import process from 'node:process';
 import url from 'node:url';
 
 import {defineConfig} from 'vite';
@@ -9,12 +10,34 @@ import preactPreset from '@preact/preset-vite';
 import webExtension from 'vite-plugin-web-extension';
 
 const currentDir = path.dirname(url.fileURLToPath(import.meta.url));
-
-const buildDir = path.join(currentDir, 'build');
 const sourceDir = path.join(currentDir, 'source');
 
-// Create the Firefox profile if it doesn't already exist.
+const targetBrowser = process.env.VITE_BROWSER ?? 'firefox';
-fs.mkdirSync(path.join(currentDir, 'firefox'), {recursive: true});
+process.env.VITE_BROWSER = targetBrowser;
+
+let webExtConfig;
+
+if (targetBrowser === 'chromium') {
+  fs.mkdirSync(path.join(currentDir, 'chromium'), {recursive: true});
+  webExtConfig = {
+    browserConsole: true,
+    chromiumProfile: 'chromium/',
+    keepProfileChanges: true,
+    startUrl: 'chrome://extensions/',
+    target: 'chromium',
+  };
+} else {
+  fs.mkdirSync(path.join(currentDir, 'firefox'), {recursive: true});
+  webExtConfig = {
+    browserConsole: true,
+    firefoxProfile: 'firefox/',
+    keepProfileChanges: true,
+    startUrl: 'about:debugging#/runtime/this-firefox',
+    target: 'firefox-desktop',
+  };
+}
+
+const buildDir = path.join(currentDir, 'build', targetBrowser);
 
 export default defineConfig({
   build: {
@@ -28,15 +51,9 @@ export default defineConfig({
     // https://github.com/aklinker1/vite-plugin-web-extension
     webExtension({
       assets: 'assets',
-      browser: 'firefox',
+      browser: targetBrowser,
-      manifest: path.join(sourceDir, 'manifest.json'),
+      manifest: path.join(sourceDir, `${targetBrowser}-manifest.json`),
-      webExtConfig: {
+      webExtConfig,
-        browserConsole: true,
-        firefoxProfile: 'firefox/',
-        keepProfileChanges: true,
-        startUrl: 'about:debugging#/runtime/this-firefox',
-        target: 'firefox-desktop',
-      },
     }),
   ],
   root: sourceDir,