package.json

@@ -5,42 +5,34 @@
   "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 && pnpm build:chromium && pnpm build:firefox && pnpm zip-source",
+    "build": "pnpm clean && vite build && web-ext build --source-dir build && 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": {
-    "htm": "^3.1.1",
+    "@fontsource/inter": "^4.5.4",
+    "htm": "^3.1.0",
     "modern-normalize": "^1.1.0",
-    "preact": "^10.10.6",
+    "preact": "^10.6.6",
-    "webextension-polyfill": "^0.10.0"
+    "webextension-polyfill": "^0.8.0"
   },
   "devDependencies": {
-    "@preact/preset-vite": "^2.3.1",
+    "@preact/preset-vite": "^2.1.7",
-    "@types/babel__core": "^7.1.19",
+    "@types/webextension-polyfill": "^0.8.2",
-    "@types/webextension-polyfill": "^0.9.0",
+    "postcss": "^8.4.7",
-    "postcss": "^8.4.16",
+    "sass": "^1.49.9",
-    "sass": "^1.54.8",
+    "stylelint": "^14.5.3",
-    "stylelint": "^14.11.0",
+    "stylelint-config-standard-scss": "^3.0.0",
-    "stylelint-config-standard-scss": "^5.0.0",
     "trash-cli": "^5.0.0",
-    "typescript": "^4.8.2",
+    "typescript": "^4.5.5",
-    "vite": "^3.1.0",
+    "vite": "^2.8.4",
-    "vite-plugin-web-extension": "^1.4.4",
+    "vite-plugin-web-extension": "^1.1.3",
-    "web-ext": "^7.2.0",
+    "web-ext": "^6.7.0",
-    "xo": "^0.52.3"
+    "xo": "^0.48.0"
   },
   "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,14 +1,8 @@
 import browser from 'webextension-polyfill';
 
-async function browserActionClicked() {
+browser.browserAction.onClicked.addListener(async () => {
   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,3 +1,5 @@
+import './content-styles.scss';
+
 async function initializeScripts() {
   console.debug('Initializing content scripts!');
 }

source/manifest.json

@@ -0,0 +1,47 @@
+{
+  "$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

@@ -1,55 +0,0 @@
-/* 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,6 +15,7 @@ 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,3 +1,5 @@
+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,7 +13,6 @@ 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,6 +1,5 @@
 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,37 +8,17 @@ import {defineConfig} from 'vite';
 import preactPreset from '@preact/preset-vite';
 import webExtension from 'vite-plugin-web-extension';
 
-import createManifest from './source/manifest.js';
-
-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 buildDir = path.join(currentDir, 'build');
 const sourceDir = path.join(currentDir, 'source');
 
-// Create the browser profile if it doesn't already exist.
+// Create the Firefox profile if it doesn't already exist.
-fs.mkdirSync(path.join(currentDir, targetBrowser), {recursive: true});
+fs.mkdirSync(path.join(currentDir, 'firefox'), {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: [
@@ -48,9 +27,15 @@ export default defineConfig({
     // https://github.com/aklinker1/vite-plugin-web-extension
     webExtension({
       assets: 'assets',
-      browser: targetBrowser,
+      browser: 'firefox',
-      manifest: () => createManifest(targetBrowser),
+      manifest: path.join(sourceDir, 'manifest.json'),
-      webExtConfig,
+      webExtConfig: {
+        browserConsole: true,
+        firefoxProfile: 'firefox/',
+        keepProfileChanges: true,
+        startUrl: 'about:debugging#/runtime/this-firefox',
+        target: 'firefox-desktop',
+      },
     }),
   ],
   root: sourceDir,