Use browser-specific manifests

package.json

@@ -24,8 +24,8 @@
 	},
 	"dependencies": {
 		"webextension-polyfill": "^0.10.0"
-		},
-		"webExt": {
+	},
+	"webExt": {
 		"sourceDir": "dist/",
 		"run": {
 			"firefoxProfile": ".firefox-profile/",

scripts/build.mjs

@@ -1,5 +1,7 @@
 import * as esbuild from "esbuild";
-import { defaultBuildOptions } from "./shared.mjs";
+import { defaultBuildOptions, writeManifest } from "./shared.mjs";
+
+writeManifest();
 
 await esbuild.build({
 	...defaultBuildOptions,

scripts/manifest.mjs

@@ -0,0 +1,56 @@
+/* eslint-disable */
+const manifest = {
+	manifest_version: 3,
+	name: "ProToots",
+	version: "1.1.2",
+
+	icons: {
+		48: "icons/icon small_size/icon small_size.png",
+		96: "icons/icon small_size/icon small_size.png",
+	},
+
+	description: "puts pronouns next to usernames on mastodon",
+	homepage_url: "https://github.com/ItsVipra/ProToots",
+	permissions: ["storage", "activeTab"],
+
+	action: {
+		default_icon: "icons/icon small_size/icon small_size.png",
+		default_title: "Enable ProToots on this page",
+	},
+	content_scripts: [
+		{
+			matches: ["*://*/*"],
+			js: ["content_scripts/protoots.js"],
+			css: ["styles/proplate.css"],
+			run_at: "document_start",
+		},
+	],
+
+	options_ui: {
+		page: "options/options.html",
+		browser_style: false,
+	},
+
+	browser_specific_settings: {
+		gecko: {
+			id: "[email protected]",
+		},
+	},
+};
+
+const firefoxManifest = {
+	...manifest,
+	background: {
+		scripts: ["background/worker.js"],
+	},
+};
+
+const chromeManifest = {
+	...manifest,
+	background: {
+		service_worker: "background/worker.js",
+		type: "module",
+	},
+};
+
+export { firefoxManifest, chromeManifest };

scripts/shared.mjs

@@ -1,6 +1,8 @@
 import copyPluginPkg from "@sprout2000/esbuild-copy-plugin";
 import path from "path";
 const { copyPlugin } = copyPluginPkg; // js and your fucking mess of imports, sigh.
+import { firefoxManifest, chromeManifest } from "./manifest.mjs";
+import fs from "fs";
 
 /**
  * This array contains all files that we want to handle with esbuild.
@@ -47,3 +49,21 @@ export const defaultBuildOptions = {
 		}),
 	],
 };
+
+/** Writes the manifest for the current browser to the dist folder. */
+export const writeManifest = () => {
+	const allowedBrowsers = ["firefox", "chrome"];
+	const browser = process.env.TARGET ?? "firefox";
+
+	if (!allowedBrowsers.includes(browser)) {
+		throw new Error(
+			"The browser set via the TARGET environment is not valid. Only 'firefox' or 'chrome' are allowed.",
+		);
+	}
+
+	const { outdir } = defaultBuildOptions;
+	if (!fs.existsSync(outdir)) fs.mkdirSync(outdir);
+
+	const manifest = JSON.stringify(browser === "firefox" ? firefoxManifest : chromeManifest);
+	fs.writeFileSync(path.join(outdir, "manifest.json"), manifest, { flag: "w" });
+};

scripts/watch.mjs

@@ -1,4 +1,7 @@
 import * as esbuild from "esbuild";
-import { defaultBuildOptions } from "./shared.mjs";
+import { defaultBuildOptions, writeManifest } from "./shared.mjs";
+
+writeManifest();
+
 let ctx = await esbuild.context(defaultBuildOptions);
 await ctx.watch();