update extension

Author: jogibear9988

.gitignore

@@ -1,5 +1,6 @@
 node_modules/
 dist/
+dist-firefox/
 *.zip
 .env
 .DS_Store

README.md

@@ -1,6 +1,6 @@
-# Web2Vector — Chrome Extension
+# Web2Vector — Chrome and Firefox Extension
 
-A Chrome extension that exports any web page's rendered DOM to **10 output formats** using the [@node-projects/layout2vector](https://github.com/node-projects/layout2vector) library.
+A browser extension that exports any web page's rendered DOM to **10 output formats** using the [@node-projects/layout2vector](https://github.com/node-projects/layout2vector) library.
 
 <p align="center">
   <img src="src/icons/icon.svg" width="128" alt="Web2Vector icon" />
@@ -23,7 +23,7 @@ A Chrome extension that exports any web page's rendered DOM to **10 output forma
 
 ## Usage
 
-1. Click the **Web2Vector** icon in the Chrome toolbar.
+1. Click the **Web2Vector** icon in the browser toolbar.
 2. Pick an export format from the popup menu.
 3. A **Save As** dialog appears — choose where to save the file.
 
@@ -71,6 +71,12 @@ npm run build:all
 2. Enable **Developer mode** (top right)
 3. Click **Load unpacked** → select the `dist/` folder
 
+### Load in Firefox
+
+1. Navigate to `about:debugging#/runtime/this-firefox`
+2. Click **Load Temporary Add-on**
+3. Select the `manifest.json` file inside `dist-firefox/`
+
 ### Test
 
 ```bash
@@ -80,7 +86,9 @@ npm test
 ### Package for Distribution
 
 ```bash
-npm run package     # creates web2vector-<version>.zip
+npm run package              # creates web2vector-chrome-<version>.zip
+npm run package:firefox      # creates web2vector-firefox-<version>.zip
+npm run package:all-browsers # creates both ZIPs
 ```
 
 ## Publishing to Chrome Web Store
@@ -106,7 +114,7 @@ Then create a GitHub Release to trigger the publish workflow, or use the manual
 ## Project Structure
 
 ```
-├── manifest.json               Chrome extension manifest (v3)
+├── manifest.json               Chrome source manifest (v3)
 ├── esbuild.config.mjs          Build configuration
 ├── src/
 │   ├── shared/formats.js       Format definitions (shared by popup + background)
@@ -125,6 +133,7 @@ Then create a GitHub Release to trigger the publish workflow, or use the manual
 │       └── icon.svg            Source icon
 ├── scripts/
 │   ├── build-icons.mjs         SVG → PNG conversion
+│   ├── manifest-utils.mjs      Browser-specific manifest helpers
 │   ├── package-extension.mjs   ZIP packaging
 │   └── upload-to-store.mjs     Chrome Web Store upload
 ├── tests/

esbuild.config.mjs

@@ -1,19 +1,23 @@
 import * as esbuild from 'esbuild';
 import fs from 'node:fs';
 import path from 'node:path';
+import { createFirefoxManifest, readChromeManifest } from './scripts/manifest-utils.mjs';
 
-const DIST = 'dist';
+const CHROME_DIST = 'dist';
+const FIREFOX_DIST = 'dist-firefox';
 
-// Ensure clean dist/
-fs.rmSync(DIST, { recursive: true, force: true });
-fs.mkdirSync(DIST, { recursive: true });
-fs.mkdirSync(path.join(DIST, 'icons'), { recursive: true });
+// Ensure clean build outputs
+for (const outDir of [CHROME_DIST, FIREFOX_DIST]) {
+  fs.rmSync(outDir, { recursive: true, force: true });
+  fs.mkdirSync(outDir, { recursive: true });
+  fs.mkdirSync(path.join(outDir, 'icons'), { recursive: true });
+}
 
 const commonOptions = {
   bundle: true,
   format: 'iife',
   platform: 'browser',
-  target: 'chrome120',
+  target: ['chrome120', 'firefox128'],
   treeShaking: true,
   minify: false,        // keep readable for Chrome Web Store review
   sourcemap: false,
@@ -32,7 +36,7 @@ for (const entry of contentEntries) {
   await esbuild.build({
     ...commonOptions,
     entryPoints: [entry],
-    outfile: path.join(DIST, outName),
+    outfile: path.join(CHROME_DIST, outName),
   });
   console.log(`  ✔ ${outName}`);
 }
@@ -41,15 +45,15 @@ for (const entry of contentEntries) {
 await esbuild.build({
   ...commonOptions,
   entryPoints: ['src/popup/popup.js'],
-  outfile: path.join(DIST, 'popup.js'),
+  outfile: path.join(CHROME_DIST, 'popup.js'),
 });
 console.log('  ✔ popup.js');
 
 // ── Service worker ──
 await esbuild.build({
   ...commonOptions,
   entryPoints: ['src/background/service-worker.js'],
-  outfile: path.join(DIST, 'service-worker.js'),
+  outfile: path.join(CHROME_DIST, 'service-worker.js'),
 });
 console.log('  ✔ service-worker.js');
 
@@ -61,12 +65,12 @@ const statics = [
 ];
 
 for (const [src, dest] of statics) {
-  fs.copyFileSync(src, path.join(DIST, dest));
+  fs.copyFileSync(src, path.join(CHROME_DIST, dest));
   console.log(`  ✔ ${dest} (copy)`);
 }
 
 // Copy icons if they exist (generated by build:icons)
-const iconsDir = path.join(DIST, 'icons');
+const iconsDir = path.join(CHROME_DIST, 'icons');
 for (const size of [16, 32, 48, 128]) {
   const name = `icon${size}.png`;
   const src = path.join('src', 'icons', name);
@@ -76,4 +80,14 @@ for (const size of [16, 32, 48, 128]) {
   }
 }
 
-console.log('\nBuild complete → dist/');
+fs.cpSync(CHROME_DIST, FIREFOX_DIST, { recursive: true });
+
+const chromeManifest = readChromeManifest();
+const firefoxManifest = createFirefoxManifest(chromeManifest);
+fs.writeFileSync(
+  path.join(FIREFOX_DIST, 'manifest.json'),
+  `${JSON.stringify(firefoxManifest, null, 2)}\n`,
+);
+console.log('  ✔ dist-firefox/manifest.json (generated)');
+
+console.log(`\nBuild complete → ${CHROME_DIST}/ and ${FIREFOX_DIST}/`);

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "web2vector-extension",
   "version": "1.0.0",
-  "description": "Chrome extension to export web pages to SVG, DXF, DWG, EMF, PDF, HTML, PNG, JPEG, and WebP using layout2vector",
+  "description": "Browser extension to export web pages to SVG, DXF, DWG, EMF, PDF, HTML, PNG, JPEG, and WebP using layout2vector",
   "private": true,
   "type": "module",
   "scripts": {
@@ -10,11 +10,13 @@
     "build:all": "npm run build:icons && npm run build",
     "test": "vitest run",
     "test:watch": "vitest",
-    "package": "npm run build:all && node scripts/package-extension.mjs",
+    "package": "npm run build:all && node scripts/package-extension.mjs chrome",
+    "package:firefox": "npm run build:all && node scripts/package-extension.mjs firefox",
+    "package:all-browsers": "npm run build:all && node scripts/package-extension.mjs chrome && node scripts/package-extension.mjs firefox",
     "upload": "node scripts/upload-to-store.mjs"
   },
   "dependencies": {
-    "@node-projects/layout2vector": "^5.3.0",
+    "@node-projects/layout2vector": "^5.4.0",
     "get-box-quads-polyfill": "^4.29.0"
   },
   "devDependencies": {

package.json

@@ -0,0 +1,14 @@
+import fs from 'node:fs';
+
+export function readChromeManifest(filePath = 'manifest.json') {
+  return JSON.parse(fs.readFileSync(filePath, 'utf8'));
+}
+
+export function createFirefoxManifest(chromeManifest) {
+  const firefoxManifest = structuredClone(chromeManifest);
+  firefoxManifest.background = {
+    scripts: [chromeManifest.background.service_worker],
+  };
+
+  return firefoxManifest;
+}

scripts/manifest-utils.mjs

@@ -1,13 +1,33 @@
 /**
- * Package the built extension into a ZIP for Chrome Web Store upload.
- * Produces  web2vector-<version>.zip  in the project root.
+ * Package the built extension into a ZIP for browser store upload.
  */
 import archiver from 'archiver';
 import fs from 'node:fs';
-import path from 'node:path';
 
 const pkg = JSON.parse(fs.readFileSync('package.json', 'utf8'));
-const zipName = `web2vector-${pkg.version}.zip`;
+const browser = process.argv[2] ?? 'chrome';
+const targets = {
+  chrome: {
+    sourceDir: 'dist',
+    zipName: `web2vector-chrome-${pkg.version}.zip`,
+  },
+  firefox: {
+    sourceDir: 'dist-firefox',
+    zipName: `web2vector-firefox-${pkg.version}.zip`,
+  },
+};
+
+const target = targets[browser];
+
+if (!target) {
+  throw new Error(`Unknown package target: ${browser}`);
+}
+
+if (!fs.existsSync(target.sourceDir)) {
+  throw new Error(`Build output not found: ${target.sourceDir}`);
+}
+
+const zipName = target.zipName;
 const output = fs.createWriteStream(zipName);
 
 const archive = archiver('zip', { zlib: { level: 9 } });
@@ -19,5 +39,5 @@ archive.on('end', () => {
 });
 
 archive.pipe(output);
-archive.directory('dist/', false);
+archive.directory(`${target.sourceDir}/`, false);
 await archive.finalize();