Abstract out Chrome extension manifest writing into a plugin package

Author: miorel

.github/workflows/run-tests.yml

@@ -15,7 +15,8 @@ jobs:
           # This is the version used by LeetCode.
           - 20.10.0
           - lts
-          - latest
+          # TODO: replace with latest, it was causing some Yarn checksum issues recently though
+          - 22.6.0
 
     runs-on: ubuntu-latest
 

.github/workflows/set-up-everything/action.yml

@@ -3,7 +3,8 @@ name: Set Up Everything
 inputs:
   node-version:
     required: true
-    default: latest
+    # TODO: replace with latest, it was causing some Yarn checksum issues recently though
+    default: 22.6.0
 
 runs:
   using: composite

workspaces/leetcode-prettier-extension/package.json

@@ -14,9 +14,9 @@
     "url": "https://github.com/miorel"
   },
   "type": "module",
-  "exports": "./src/extension/main.ts",
+  "exports": "./src/main.ts",
   "scripts": {
-    "build": "tsx src/scripts/writeManifest.ts && cross-env NODE_OPTIONS=\"--import tsx\" webpack",
+    "build": "cross-env NODE_OPTIONS=\"--import tsx\" webpack",
     "format": "prettier --color --write .",
     "lint": "eslint --color --max-warnings=0 .",
     "typecheck": "tsc --pretty --project ."
@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@code-chronicles/eslint-config": "workspace:*",
-    "@code-chronicles/util": "workspace:*",
+    "@code-chronicles/webpack-chrome-extension-manifest-plugin": "workspace:*",
     "@types/node": "22.7.6",
     "cross-env": "7.0.3",
     "eslint": "9.12.0",

workspaces/leetcode-prettier-extension/src/extension/main.ts renamed to workspaces/leetcode-prettier-extension/src/main.ts

@@ -1,15 +1,18 @@
 import path from "node:path";
 
-import type { Configuration } from "webpack";
 import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
+import type { Configuration } from "webpack";
+import { WebpackChromeExtensionManifestPlugin } from "@code-chronicles/webpack-chrome-extension-manifest-plugin";
 
 import packageJson from "./package.json" with { type: "json" };
 
+const SCRIPT_FILENAME = "main.js";
+
 const config: Configuration = {
   target: "web",
   entry: path.resolve(__dirname, packageJson.exports),
   output: {
-    filename: "main.js",
+    filename: SCRIPT_FILENAME,
     path: path.resolve(__dirname, "dist"),
   },
 
@@ -34,7 +37,28 @@ const config: Configuration = {
     conditionNames: ["import"],
   },
 
-  plugins: [new ForkTsCheckerWebpackPlugin()],
+  plugins: [
+    new ForkTsCheckerWebpackPlugin(),
+
+    new WebpackChromeExtensionManifestPlugin({
+      name: "LeetCode Prettier Formatting",
+      description: packageJson.description,
+      version: packageJson.version,
+
+      // eslint-disable-next-line camelcase
+      manifest_version: 3,
+      // eslint-disable-next-line camelcase
+      content_scripts: [
+        {
+          matches: ["https://*.leetcode.com/*"],
+          js: [SCRIPT_FILENAME],
+          // eslint-disable-next-line camelcase
+          run_at: "document_start",
+          world: "MAIN",
+        },
+      ],
+    }),
+  ],
 };
 
 export default config;

workspaces/leetcode-prettier-extension/src/scripts/constants.ts

@@ -14,9 +14,9 @@
     "url": "https://github.com/miorel"
   },
   "type": "module",
-  "exports": "./src/extension/main.ts",
+  "exports": "./src/main.ts",
   "scripts": {
-    "build": "tsx src/scripts/writeManifest.ts && cross-env NODE_OPTIONS=\"--import tsx\" webpack",
+    "build": "cross-env NODE_OPTIONS=\"--import tsx\" webpack",
     "format": "prettier --color --write .",
     "lint": "eslint --color --max-warnings=0 .",
     "typecheck": "tsc --pretty --project ."
@@ -27,6 +27,7 @@
   },
   "devDependencies": {
     "@code-chronicles/eslint-config": "workspace:*",
+    "@code-chronicles/webpack-chrome-extension-manifest-plugin": "workspace:*",
     "@types/node": "22.7.6",
     "cross-env": "7.0.3",
     "eslint": "9.12.0",