feat(chrome-plugin): set up build system for Firefox (#1408)

.github/workflows/build_chrome_plugin.yml

@@ -25,10 +25,17 @@ jobs:
         run: sudo apt-get update && sudo apt-get install pandoc -y
       - name: Install `wasm-pack`
         run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
-      - name: Build
+      - name: Build Chrome Plugin
         run: just build-chrome-plugin 
-      - name: Upload extension
+      - name: Build Firefox Plugin
+        run: just build-firefox-plugin 
+      - name: Upload Chrome extension
         uses: actions/upload-artifact@v4
         with:
           name: harper-chrome-plugin.zip
           path: "packages/chrome-plugin/package/harper-chrome-plugin.zip"
+      - name: Upload Firefox extension
+        uses: actions/upload-artifact@v4
+        with:
+          name: harper-firefox-plugin.zip
+          path: "packages/chrome-plugin/package/harper-firefox-plugin.zip"

.github/workflows/release_chrome_plugin.yml

@@ -23,15 +23,22 @@ jobs:
         run: sudo apt-get update && sudo apt-get install pandoc -y
       - name: Install `wasm-pack`
         run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
-      - name: Build
+      - name: Build Chrome Plugin
         run: just build-chrome-plugin 
-      - name: Upload extension
+      - name: Build Firefox Plugin
+        run: just build-firefox-plugin 
+      - name: Upload Chrome extension
         uses: actions/upload-artifact@v4
         with:
           name: harper-chrome-plugin.zip
           path: "packages/chrome-plugin/package/harper-chrome-plugin.zip"
+      - name: Upload Firefox extension
+        uses: actions/upload-artifact@v4
+        with:
+          name: harper-firefox-plugin.zip
+          path: "packages/chrome-plugin/package/harper-firefox-plugin.zip"
       - uses: ncipollo/release-action@v1
         with:
-          artifacts: "packages/chrome-plugin/package/harper-chrome-plugin.zip"
+          artifacts: "packages/chrome-plugin/package/*.zip"
           allowUpdates: true
           draft: true

justfile

@@ -102,7 +102,17 @@ build-chrome-plugin: build-harperjs
   cd "{{justfile_directory()}}/packages/chrome-plugin"
 
   pnpm install 
-  pnpm zip
+  pnpm zip-for-chrome
+
+# Build the Firefox extension.
+build-firefox-plugin: build-harperjs
+  #! /bin/bash
+  set -eo pipefail
+  
+  cd "{{justfile_directory()}}/packages/chrome-plugin"
+
+  pnpm install 
+  pnpm zip-for-firefox
 
 test-chrome-plugin: build-chrome-plugin
   #!/bin/bash
@@ -225,7 +235,7 @@ check: check-rust build-web
 setup: build-harperjs test-harperjs test-vscode build-web build-wp build-obsidian build-chrome-plugin
 
 # Perform full format and type checking, build all projects and run all tests. Run this before pushing your code.
-precommit: check test build-harperjs build-obsidian build-web build-wp build-chrome-plugin
+precommit: check test build-harperjs build-obsidian build-web build-wp build-firefox-plugin build-chrome-plugin 
   #! /bin/bash
   set -eo pipefail
 

packages/chrome-plugin/package.json

@@ -15,7 +15,8 @@
 		"build": "vite build",
 		"preview": "vite preview",
 		"fmt": "prettier --write '**/*.{svelte,ts,json,css,scss,md}'",
-		"zip": "npm run build && node src/zip.js",
+		"zip-for-chrome": "TARGET_BROWSER=chrome npm run build && node src/zip.js harper-chrome-plugin.zip",
+		"zip-for-firefox": "TARGET_BROWSER=firefox npm run build && node src/zip.js harper-firefox-plugin.zip",
 		"test": "playwright test"
 	},
 	"devDependencies": {

packages/chrome-plugin/src/manifest.ts

@@ -40,8 +40,15 @@ export default defineManifest({
 		default_popup: 'popup.html',
 	},
 	options_page: 'options.html',
+	browser_specific_settings: {
+		gecko: {
+			id: 'harper@writewithharper.com',
+			strict_min_version: '135.0',
+		},
+	},
 	background: {
 		service_worker: 'src/background/index.ts',
+		scripts: ['src/background/index.ts'],
 		type: 'module',
 	},
 	content_scripts: [

packages/chrome-plugin/src/zip.js

@@ -1,10 +1,14 @@
 import { createRequire } from 'module';
 import gulp from 'gulp';
 import zip from 'gulp-zip';
+
 const require = createRequire(import.meta.url);
 const manifest = require('../build/manifest.json');
 
-gulp
-	.src('build/**', { encoding: false })
-	.pipe(zip('harper-chrome-plugin.zip'))
-	.pipe(gulp.dest('package'));
+const [, , target] = process.argv;
+if (!target) {
+	process.stderr.write('Specify a target filename as the first argument.\n');
+	process.exit(1);
+}
+
+gulp.src('build/**', { encoding: false }).pipe(zip(target)).pipe(gulp.dest('package'));

packages/chrome-plugin/vite.config.ts

@@ -4,10 +4,20 @@ import { svelte } from '@sveltejs/vite-plugin-svelte';
 import tailwindcss from '@tailwindcss/vite';
 import copy from 'rollup-plugin-copy';
 import sveltePreprocess from 'svelte-preprocess';
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 import manifest from './src/manifest';
 
 export default defineConfig(({ mode }) => {
+	const env = loadEnv(mode, process.cwd(), '');
+
+	const browser = env.TARGET_BROWSER ?? 'chrome';
+
+	if (!['chrome', 'firefox'].includes(browser)) {
+		throw new Error('UNSUPPORTED BROWSER TYPE');
+	}
+
+	console.log(`Building for ${browser}`);
+
 	const production = mode === 'production';
 
 	return {
@@ -31,7 +41,7 @@ export default defineConfig(({ mode }) => {
 				],
 			}),
 			tailwindcss(),
-			crx({ manifest }),
+			crx({ manifest, browser }),
 			svelte({
 				compilerOptions: {
 					dev: !production,

packages/web/src/routes/docs/contributors/chrome-extension/+page.md

@@ -52,6 +52,11 @@ It:
     - Rules
     - Domain toggling
 
+## The Firefox Extension
+
+Despite the name of the package, the `chrome-plugin` also supports Firefox. 
+To build for Firefox, just use `pnpm zip-for-firefox` or otherwise compile with the environment variable `TARGET_BROWSER=firefox`.
+
 ## Other Reading
 
 - [Putting Harper in the Browser: Technical Details](https://elijahpotter.dev/articles/putting_harper_in_your_browser)