Abstract out Chrome extension manifest writing into a webpack plugin (#472)

The code is somewhat repetitive, so it's nice to share it across extension packages. Making it a `webpack` plugin also allows us to tap into `webpack`'s watch mode!

Author: miorel

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",