Support Chromium-based browsers

.gitignore

@@ -1,4 +1,5 @@
 /node_modules
-web-ext-artifacts
-/dist
-/dist-dev
+/web-ext-artifacts-firefox
+/web-ext-artifacts-chrome
+/dist-firefox
+/dist-chrome

Makefile

@@ -1,6 +1,6 @@
 .PHONY: clean
 clean:
-	rm -rf dist web-ext-artifacts
+	rm -rf dist-firefox dist-chrome web-ext-artifacts-firefox web-ext-artifacts-chrome
 
 .PHONY: dev-prepare
 dev-prepare:
@@ -12,9 +12,26 @@ dev-build:
 
 .PHONY: dev-run
 dev-run:
-	npx web-ext run --source-dir dist
+	npx web-ext run --source-dir dist-firefox
 
-.PHONY: build
-build:
+
+dist-firefox:
 	npm run build
-	npx web-ext build --source-dir dist
+
+.PHONY: build-firefox
+build-firefox: dist-firefox
+	npx web-ext build --source-dir dist-firefox --artifacts-dir web-ext-artifacts-firefox --overwrite-dest
+
+
+dist-chrome: dist-firefox
+	cp -r dist-firefox dist-chrome
+	jq '.background = {"service_worker": .background.scripts[1]}' < dist-chrome/manifest.json > dist-chrome/manifest-tmp.json
+	mv dist-chrome/manifest-tmp.json dist-chrome/manifest.json
+
+.PHONY: build-chrome
+build-chrome: dist-chrome
+	npx web-ext build --source-dir dist-chrome --artifacts-dir web-ext-artifacts-chrome --overwrite-dest
+
+
+.PHONY: build
+build: build-firefox build-chrome

manifest.json → manifest-firefox.json

@@ -4,8 +4,11 @@
     "version": "0.1.0",
     "description": "A bring-your-own-key extension for summarizing Hacker News articles with LLMs.",
     "icons": {
-        "48": "icon.svg",
-        "96": "icon.svg"
+        "16": "icon16.png",
+        "32": "icon32.png",
+        "48": "icon48.png",
+        "96": "icon96.png",
+        "128": "icon128.png"
     },
     "browser_specific_settings": {
         "gecko": {

src/background.js

@@ -1,3 +1,15 @@
+try {
+    // Load `browser-polyfill.js` for Chrome.
+    importScripts("browser-polyfill.js");
+} catch (e) {
+    if (e instanceof ReferenceError) {
+        // It's probably Firefox, where `browser-polyfill.js` is provided through `background.scripts`.
+        // Do nothing.
+    } else {
+        throw e;
+    }
+}
+
 async function onInstalled() {
     const settings = await browser.storage.sync.get('internal.intro_shown');
     if (!settings['internal.intro_shown']) {

webpack.config.js

@@ -7,7 +7,7 @@ module.exports = (env, argv) => {
         },
         output: {
             // filename: '[name].bundle.js',
-            path: path.resolve(__dirname, 'dist')
+            path: path.resolve(__dirname, 'dist-firefox')
         },
         devtool: argv.mode === 'production' ? "source-map" : "inline-cheap-source-map",
         optimization: {
@@ -25,8 +25,8 @@ module.exports = (env, argv) => {
                     { from: 'src/content.js', to: 'content.js' },
                     { from: 'src/options.html', to: 'options.html' },
                     { from: 'src/options.js', to: 'options.js' },
-                    { from: 'manifest.json', to: 'manifest.json' },
-                    { from: 'icon.svg', to: 'icon.svg' }
+                    { from: 'manifest-firefox.json', to: 'manifest.json' },
+                    { from: 'icons/*.png', to: '[name][ext]' }
                 ]
             })
         ]