Migrate to manifest v3 (#68)

kfarnung · web-flow · commit 53dca29cb157 · 2024-10-06T21:42:17.000-07:00
* Migrate to manifest v3

The migration required splitting the extensions between Chrome and
Firefox. Firefox doesn't support service workers, but otherwise the
extensions are the same.

* Fix lint issues
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -14,7 +14,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x, 18.x, 19.x]
+        node-version: [18.x, 20.x, 22.x]
 
     steps:
       - uses: actions/checkout@v2
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -10,10 +10,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 18.x
+      - name: Use Node.js 20.x
         uses: actions/setup-node@v1
         with:
-          node-version: 18.x
+          node-version: 20.x
       - run: npm ci
       - run: npm run lint
       - run: npm run build
@@ -27,12 +27,21 @@ jobs:
           release_name: Advent of Code to Markdown ${{ github.ref }}
           draft: false
           prerelease: false
-      - name: Upload Release Asset
+      - name: Upload Release Asset - Chrome
         uses: actions/upload-release-asset@v1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           upload_url: ${{ steps.create_release.outputs.upload_url }}
-          asset_path: ./web-ext-artifacts/aoc-to-markdown-addon.zip
-          asset_name: aoc-to-markdown-addon-${{ github.ref }}.zip
+          asset_path: ./web-ext-artifacts/aoc-to-markdown-chrome.zip
+          asset_name: aoc-to-markdown-chrome-${{ github.ref }}.zip
+          asset_content_type: application/zip
+      - name: Upload Release Asset - Firefox
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
+          asset_path: ./web-ext-artifacts/aoc-to-markdown-firefox.zip
+          asset_name: aoc-to-markdown-firefox-${{ github.ref }}.zip
           asset_content_type: application/zip
diff --git a/.gitignore b/.gitignore
@@ -61,7 +61,6 @@ typings/
 .next
 
 # Build output
-/addon/**/*.js
-/addon/manifest.json
+addon/
 web-ext-artifacts/
 .web-extension-id
diff --git a/package.json b/package.json
@@ -4,15 +4,18 @@
   "description": "Converts a given Advent of Code page to a GitHub-compatible Markdown file.",
   "repository": "github:kfarnung/aoc-to-markdown",
   "scripts": {
-    "build": "npm run compile && web-ext build -n aoc-to-markdown-addon.zip -s addon --overwrite-dest",
-    "compile": "npm run genmanifest && webpack",
-    "genmanifest": "node ./tools/genmanifest.js ./src/manifest.json ./addon/manifest.json",
-    "lint": "eslint . && npm run compile && web-ext lint -s addon",
+    "build": "npm run compile && npm run build-chrome && npm run build-firefox",
+    "build-chrome": "web-ext build -n aoc-to-markdown-chrome.zip -s addon/chrome --overwrite-dest",
+    "build-firefox": "web-ext build -n aoc-to-markdown-firefox.zip -s addon/firefox --overwrite-dest",
+    "compile": "webpack && npm run genmanifest && npm run copyicons",
+    "copyicons": "node ./tools/copyicons.js",
+    "genmanifest": "node ./tools/genmanifest.js",
+    "lint": "eslint . && npm run compile && web-ext lint -s addon/firefox",
     "lint-fix": "eslint . --fix",
     "prepare": "npm run compile",
     "prestart": "npm run compile",
     "pretest": "npm run compile",
-    "start": "web-ext run -s addon",
+    "start": "web-ext run -s ./addon/firefox",
     "test": "echo \"Error: no test specified\" && exit 1",
     "version": "npm run genmanifest"
   },
diff --git a/src/background_scripts/background.js b/src/background_scripts/background.js
@@ -1,13 +1,13 @@
 import {
+  action,
   runtime,
-  pageAction,
   tabs as _tabs,
 } from "webextension-polyfill";
 
 runtime.onMessage.addListener((data, sender) => {
   switch (data.action) {
     case "showPageAction":
-      pageAction.show(sender.tab.id);
+      action.enable(sender.tab.id);
       break;
 
     default:
@@ -16,7 +16,11 @@ runtime.onMessage.addListener((data, sender) => {
   }
 });
 
-pageAction.onClicked.addListener(() => {
+runtime.onInstalled.addListener(() => {
+  action.disable();
+});
+
+action.onClicked.addListener(() => {
   _tabs
     .query({ active: true, currentWindow: true })
     .then((tabs) => {
diff --git a/src/icons/aoc-to-markdown-128.png b/src/icons/aoc-to-markdown-128.png
diff --git a/src/icons/aoc-to-markdown-16.png b/src/icons/aoc-to-markdown-16.png
diff --git a/src/icons/aoc-to-markdown-32.png b/src/icons/aoc-to-markdown-32.png
diff --git a/src/icons/aoc-to-markdown-48.png b/src/icons/aoc-to-markdown-48.png
diff --git a/src/manifest.json b/src/manifest.json
@@ -1,5 +1,5 @@
 {
-  "manifest_version": 2,
+  "manifest_version": 3,
   "name": "Advent of Code to Markdown",
   "version": null,
   "description": "Converts a given Advent of Code page to a GitHub-compatible Markdown file.",
@@ -10,21 +10,30 @@
     "128": "icons/aoc-to-markdown-128.png"
   },
   "background": {
-    "scripts": ["background_scripts/index.js"]
+    "service_worker": "background_scripts/index.js"
   },
   "content_scripts": [
     {
-      "js": ["/content_scripts/index.js"],
-      "matches": ["*://adventofcode.com/*/day/*"]
+      "js": [
+        "/content_scripts/index.js"
+      ],
+      "matches": [
+        "*://adventofcode.com/*/day/*"
+      ]
     }
   ],
-  "page_action": {
+  "action": {
     "default_icon": {
       "16": "icons/aoc-to-markdown-16.png",
       "32": "icons/aoc-to-markdown-32.png",
       "48": "icons/aoc-to-markdown-48.png",
       "128": "icons/aoc-to-markdown-128.png"
     },
     "default_title": "Advent of Code to Markdown"
+  },
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "{9255ec71-5fba-48c8-9d40-0ae6ef3d6fb3}"
+    }
   }
-}
+}
diff --git a/tools/copyicons.js b/tools/copyicons.js
@@ -0,0 +1,11 @@
+const fs = require("fs");
+
+fs.mkdirSync("addon/chrome/icons", { recursive: true });
+fs.mkdirSync("addon/firefox/icons", { recursive: true });
+
+fs.readdirSync("src/icons").forEach((file) => {
+  fs.copyFileSync(`src/icons/${file}`, `addon/chrome/icons/${file}`);
+  fs.copyFileSync(`src/icons/${file}`, `addon/firefox/icons/${file}`);
+});
+
+console.log("Copied icons");
diff --git a/tools/genmanifest.js b/tools/genmanifest.js
@@ -1,26 +1,29 @@
 const fs = require("fs");
 
-const version = process.env.npm_package_version;
-if (!version) {
-  throw new Error("No version was found");
-}
-
-const inputFile = process.argv[2];
-if (!inputFile) {
-  throw new Error("No input file provided");
-}
+function generateManifest(inputFile, outputFile, version, browser) {
+  const content = fs.readFileSync(inputFile, { encoding: "utf-8" });
+  const parsed = JSON.parse(content);
 
-const outputFile = process.argv[3];
-if (!outputFile) {
-  throw new Error("No output file provided");
-}
+  parsed["version"] = version;
 
-const content = fs.readFileSync(inputFile, { encoding: "utf-8" });
-const parsed = JSON.parse(content);
+  if (browser === "chrome") {
+    delete parsed["browser_specific_settings"];
+  } else if (browser === "firefox") {
+    const serviceWorker = parsed["background"]["service_worker"];
+    delete parsed["background"]["service_worker"];
+    parsed["background"]["scripts"] = [serviceWorker];
+  }
 
-parsed["version"] = version;
+  const output = JSON.stringify(parsed, undefined, 2);
+  fs.writeFileSync(outputFile, output, { encoding: "utf-8" });
+  console.log("Generated manifest: ", outputFile);
+}
 
-const output = JSON.stringify(parsed, undefined, 2);
-fs.writeFileSync(outputFile, output, { encoding: "utf-8" });
+const inputFile = './src/manifest.json';
+const version = process.env.npm_package_version;
+if (!version) {
+  throw new Error("No version was found");
+}
 
-console.log("Generated manifest: ", outputFile);
+generateManifest(inputFile, './addon/chrome/manifest.json', version, "chrome");
+generateManifest(inputFile, './addon/firefox/manifest.json', version, "firefox");
diff --git a/webpack.config.js b/webpack.config.js
@@ -3,8 +3,13 @@ const path = require("path");
 module.exports = {
   mode: "production",
   entry: {
-    background_scripts: ["./src/background_scripts/background.js"],
-    content_scripts: [
+    "chrome/background_scripts": ["./src/background_scripts/background.js"],
+    "chrome/content_scripts": [
+      "./src/content_scripts/on-loaded.js",
+      "./src/content_scripts/to-markdown.js",
+    ],
+    "firefox/background_scripts": ["./src/background_scripts/background.js"],
+    "firefox/content_scripts": [
       "./src/content_scripts/on-loaded.js",
       "./src/content_scripts/to-markdown.js",
     ],
