feat(build): add packaging scripts for Chrome and Firefox extensions

Author: sajjadmrx

.gitignore

@@ -24,3 +24,4 @@ dist-ssr
 *.sw?
 .env
 dev-dist
+packages

bun.lock

@@ -6,9 +6,14 @@
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
-		"lint": "eslint .",
+		"build:chrome": "vite build --mode chrome",
+		"build:firefox": "vite build --mode firefox",
 		"preview": "vite preview",
-		"test": "npx tailwindcss init"
+		"start:chrome": "npm run build:chrome && web-ext run --source-dir=dist --target=chromium",
+		"start:firefox": "npm run build:firefox && web-ext run --source-dir=dist --target=firefox-desktop",
+		"package": "node scripts/package-extension.js",
+		"package:chrome": "node scripts/package-extension.js chrome",
+		"package:firefox": "node scripts/package-extension.js firefox"
 	},
 	"dependencies": {
 		"@tanstack/react-query": "5.66.0",
@@ -54,6 +59,7 @@
 		"tailwindcss": "4.0.0",
 		"typescript": "~5.6.3",
 		"typescript-eslint": "8.18.2",
-		"vite": "6.0.5"
+		"vite": "6.0.5",
+		"web-ext": "^8.4.0"
 	}
 }

package.json

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+import { execSync } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+
+
+const browser = process.argv[2] || 'chrome';
+
+
+const packageJson = JSON.parse(fs.readFileSync('./src/manifest.json', 'utf8'));
+const version = packageJson.version;
+
+
+const zipFilename = `widgetify-${version}-${browser}.zip`;
+
+
+if (!fs.existsSync('./packages')) {
+    fs.mkdirSync('./packages', { recursive: true });
+}
+
+
+console.log(`Building ${browser} extension...`);
+execSync(`npm run build:${browser}`, { stdio: 'inherit' });
+
+
+console.log(`Packaging ${browser} extension as ${zipFilename}...`);
+execSync(
+    `web-ext build --source-dir=dist --artifacts-dir=packages --filename=${zipFilename} --overwrite-dest`,
+    { stdio: 'inherit' }
+);
+
+console.log(`Successfully packaged ${zipFilename}`);

scripts/package-extension.js

@@ -21,15 +21,23 @@
 		"https://api.github.com/*",
 		"https://api.widgetify.ir/*",
 		"https://www.google.com/search*",
-		"https://www.google-analytics.com/collect*"
+		"https://www.google-analytics.com/collect*",
+		"https://storage.c2.liara.space/*"
 	],
 	"options_ui": {
 		"page": "src/index.html",
 		"open_in_tab": true
 	},
-	"background": {
-		"{{chrome}}.service_worker": "src/background.ts",
-		"{{firefox}}.scripts": ["src/background.ts"]
+	"{{chrome}}.background": {
+		"service_worker": "src/background.ts"
+	},
+	"{{firefox}}.background": {
+		"scripts": ["src/background.ts"]
+	},
+	"{{firefox}}.browser_specific_settings": {
+		"gecko": {
+			"id": "widgetify@widgetify-app.github.io"
+		}
 	},
 	"content_security_policy": {
 		"extension_pages": "script-src 'self'; object-src 'self'; style-src 'self' 'unsafe-inline';"

src/manifest.json

@@ -3,25 +3,65 @@ import react from '@vitejs/plugin-react'
 import { defineConfig } from 'vite'
 import webExtension, { readJsonFile } from 'vite-plugin-web-extension'
 
-function generateManifest() {
+function generateManifest(browser: any) {
 	const manifest = readJsonFile('src/manifest.json')
 	const pkg = readJsonFile('package.json')
+
+	const processedManifest = JSON.parse(
+		JSON.stringify(manifest).replace(new RegExp(`{{${browser}}}\\.`, 'g'), ''),
+	)
+
+	const otherBrowser = browser === 'firefox' ? 'chrome' : 'firefox'
+	for (const key of Object.keys(processedManifest)) {
+		if (key.startsWith(`{{${otherBrowser}}}.`)) {
+			delete processedManifest[key]
+		}
+	}
+
+	const processNestedObjects = (obj: any) => {
+		for (const key of Object.keys(obj)) {
+			if (typeof obj[key] === 'object' && obj[key] !== null) {
+				for (const nestedKey of Object.keys(obj[key])) {
+					if (nestedKey.startsWith(`{{${otherBrowser}}}.`)) {
+						delete obj[key][nestedKey]
+					}
+					if (nestedKey.startsWith(`{{${browser}}}.`)) {
+						const newKey = nestedKey.replace(`{{${browser}}}.`, '')
+						obj[key][newKey] = obj[key][nestedKey]
+						delete obj[key][nestedKey]
+					}
+				}
+
+				processNestedObjects(obj[key])
+			}
+		}
+	}
+
+	processNestedObjects(processedManifest)
+
 	return {
 		name: pkg.name,
 		description: pkg.description,
 		version: pkg.version,
-		...manifest,
+		...processedManifest,
 	}
 }
 
-// https://vite.dev/config/
-export default defineConfig({
-	plugins: [
-		react(),
-		tailwindcss(),
-		webExtension({
-			manifest: generateManifest,
-			browser: 'chrome',
-		}),
-	],
+export default defineConfig(({ mode }) => {
+	const browser = mode === 'firefox' ? 'firefox' : 'chrome'
+
+	return {
+		plugins: [
+			react(),
+			tailwindcss(),
+			webExtension({
+				manifest: () => generateManifest(browser),
+				browser,
+			}),
+		],
+		build: {
+			outDir: 'dist',
+			emptyOutDir: true,
+		},
+	}
 })