Update dependencies, disable false-positive XO rules.

package.json

@@ -5,34 +5,42 @@
   "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 web-ext-template-chromium-{version}.zip -s build/chromium",
+    "build:firefox": "VITE_BROWSER=firefox vite build && web-ext build -n web-ext-template-firefox-{version}.zip -s build/firefox",
     "zip-source": "git archive --format zip --output web-ext-artifacts/webextension_template-source.zip HEAD",
     "test": "xo && stylelint 'source/**/*.scss' && tsc"
   },
   "dependencies": {
-    "@fontsource/inter": "^4.5.4",
+    "htm": "^3.1.1",
-    "htm": "^3.1.0",
     "modern-normalize": "^1.1.0",
-    "preact": "^10.6.6",
+    "preact": "^10.10.6",
-    "webextension-polyfill": "^0.8.0"
+    "webextension-polyfill": "^0.10.0"
   },
   "devDependencies": {
-    "@preact/preset-vite": "^2.1.7",
+    "@preact/preset-vite": "^2.3.1",
-    "@types/webextension-polyfill": "^0.8.2",
+    "@types/babel__core": "^7.1.19",
-    "postcss": "^8.4.7",
+    "@types/webextension-polyfill": "^0.9.0",
-    "sass": "^1.49.9",
+    "postcss": "^8.4.16",
-    "stylelint": "^14.5.3",
+    "sass": "^1.54.8",
-    "stylelint-config-standard-scss": "^3.0.0",
+    "stylelint": "^14.11.0",
+    "stylelint-config-standard-scss": "^5.0.0",
     "trash-cli": "^5.0.0",
-    "typescript": "^4.5.5",
+    "typescript": "^4.8.2",
-    "vite": "^2.8.4",
+    "vite": "^3.1.0",
-    "vite-plugin-web-extension": "^1.1.3",
+    "vite-plugin-web-extension": "^1.4.4",
-    "web-ext": "^6.7.0",
+    "web-ext": "^7.2.0",
-    "xo": "^0.48.0"
+    "xo": "^0.52.3"
   },
   "xo": {
     "prettier": true,
+    "rules": {
+      "@typescript-eslint/consistent-type-definitions": "off",
+      "@typescript-eslint/consistent-type-imports": "off",
+      "n/file-extension-in-import": "off"
+    },
     "space": true
   }
 }

source/background-scripts/initialize.ts

@@ -1,8 +1,14 @@
 import browser from 'webextension-polyfill';
 
-browser.browserAction.onClicked.addListener(async () => {
+async function browserActionClicked() {
   await browser.runtime.openOptionsPage();
-});
+}
+
+if (import.meta.env.VITE_BROWSER === 'chromium') {
+  browser.action.onClicked.addListener(browserActionClicked);
+} else {
+  browser.browserAction.onClicked.addListener(browserActionClicked);
+}
 
 browser.runtime.onInstalled.addListener(async () => {
   console.debug('WebExtension Template has been installed!');

source/content-scripts/initialize.ts

@@ -1,5 +1,3 @@
-import './content-styles.scss';
-
 async function initializeScripts() {
   console.debug('Initializing content scripts!');
 }

source/manifest.json

@@ -1,47 +0,0 @@
-{
-  "$schema": "http://json.schemastore.org/webextension",
-  "manifest_version": 2,
-  "name": "WebExtension Template",
-  "description": "An opinionated WebExtension template.",
-  "version": "0.1.0",
-  "permissions": [
-    "downloads",
-    "storage",
-    "*://example.org/*"
-  ],
-  "content_security_policy": "script-src 'self'; object-src 'self'; style-src 'unsafe-inline'",
-  "web_accessible_resources": [
-    "assets/**"
-  ],
-  "icons": {
-    "128": "assets/web-ext-template-logo.png"
-  },
-  "browser_action": {
-    "default_icon": {
-      "128": "assets/web-ext-template-logo.png"
-    }
-  },
-  "options_ui": {
-    "page": "options/index.html",
-    "open_in_tab": true
-  },
-  "background": {
-    "scripts": [
-      "background-scripts/initialize.ts"
-    ]
-  },
-  "content_scripts": [
-    {
-      "matches": [
-        "*://example.org/*"
-      ],
-      "run_at": "document_end",
-      "css": [
-        "generated:content-scripts/style.css"
-      ],
-      "js": [
-        "content-scripts/initialize.ts"
-      ]
-    }
-  ]
-}

source/manifest.ts

@@ -0,0 +1,55 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
+export default function createManifest(
+  target: string,
+): Record<string, unknown> {
+  const manifest: Record<string, unknown> = {
+    name: 'WebExtension Template',
+    description: 'An opinionated WebExtension template.',
+    version: '0.1.0',
+    permissions: ['downloads', 'storage'],
+    options_ui: {
+      page: 'options/index.html',
+      open_in_tab: true,
+    },
+    content_scripts: [
+      {
+        matches: ['*://example.org/*'],
+        run_at: 'document_end',
+        css: ['content-scripts/content-styles.scss'],
+        js: ['content-scripts/initialize.ts'],
+      },
+    ],
+  };
+
+  const icons = {
+    128: 'assets/web-ext-template-logo.png',
+  };
+
+  manifest.icons = icons;
+
+  const browserAction = {
+    default_icon: icons,
+  };
+
+  const backgroundScript = 'background-scripts/initialize.ts';
+
+  if (target === 'chromium') {
+    manifest.manifest_version = 3;
+    manifest.action = browserAction;
+    manifest.background = {
+      service_worker: backgroundScript,
+      type: 'module',
+    };
+    manifest.host_permissions = ['*://example.org/*'];
+  } else {
+    manifest.manifest_version = 2;
+    manifest.browser_action = browserAction;
+    manifest.background = {
+      scripts: [backgroundScript],
+    };
+    (manifest.permissions as string[]).push('*://example.org/*');
+  }
+
+  return manifest;
+}

source/options/index.scss

@@ -15,7 +15,6 @@ body {
 
   background-color: var(--background-1);
   color: var(--foreground-1);
-  font-family: Inter, sans-serif;
   font-size: 2rem;
   padding: 1rem;
 }

source/options/index.ts

@@ -1,5 +1,3 @@
-import '@fontsource/inter/latin.css';
-
 import browser from 'webextension-polyfill';
 import {html} from 'htm/preact';
 import {Component, render} from 'preact';

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';
@@ -8,17 +9,37 @@ import {defineConfig} from 'vite';
 import preactPreset from '@preact/preset-vite';
 import webExtension from 'vite-plugin-web-extension';
 
-const currentDir = path.dirname(url.fileURLToPath(import.meta.url));
+import createManifest from './source/manifest.js';
 
-const buildDir = path.join(currentDir, 'build');
+const targetBrowser = process.env.VITE_BROWSER ?? 'firefox';
+process.env.VITE_BROWSER = targetBrowser;
+
+const currentDir = path.dirname(url.fileURLToPath(import.meta.url));
+const buildDir = path.join(currentDir, 'build', targetBrowser);
 const sourceDir = path.join(currentDir, 'source');
 
-// Create the Firefox profile if it doesn't already exist.
+// Create the browser profile if it doesn't already exist.
-fs.mkdirSync(path.join(currentDir, 'firefox'), {recursive: true});
+fs.mkdirSync(path.join(currentDir, targetBrowser), {recursive: true});
+
+const webExtConfig: Record<string, unknown> = {
+  browserConsole: true,
+  chromiumProfile: 'chromium/',
+  firefoxProfile: 'firefox/',
+  keepProfileChanges: true,
+};
+
+if (targetBrowser === 'chromium') {
+  webExtConfig.startUrl = 'chrome://extensions/';
+  webExtConfig.target = 'chromium';
+} else {
+  webExtConfig.startUrl = 'about:debugging#/runtime/this-firefox';
+  webExtConfig.target = 'firefox-desktop';
+}
 
 export default defineConfig({
   build: {
     outDir: buildDir,
+    minify: false,
     sourcemap: 'inline',
   },
   plugins: [
@@ -27,15 +48,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: () => createManifest(targetBrowser),
-      webExtConfig: {
+      webExtConfig,
-        browserConsole: true,
-        firefoxProfile: 'firefox/',
-        keepProfileChanges: true,
-        startUrl: 'about:debugging#/runtime/this-firefox',
-        target: 'firefox-desktop',
-      },
     }),
   ],
   root: sourceDir,