feat(ext): generate extension icons from a single SVG source

.gitignore

@@ -8,3 +8,5 @@ coverage/
 .turbo/
 test-results/
 playwright-report/
+.sid/
+.claude/

assets/README.md

@@ -0,0 +1,15 @@
+# assets
+
+Source artwork for the project. Not shipped as-is — processed into per-shell
+icon PNGs by `scripts/gen-icons.mjs`.
+
+- `gitmarks.svg` — the master extension icon. A square viewBox (e.g.
+  `0 0 512 512`) renders cleanest. `scripts/gen-icons.mjs` rasterizes it to
+  16/32/48/128 px PNGs and writes them into each extension shell's `icons/`
+  directory (which is git-ignored and regenerated on build).
+
+Regenerate manually with:
+
+```bash
+node scripts/gen-icons.mjs
+```

package.json

@@ -10,6 +10,7 @@
     "clean": "pnpm -r exec rm -rf dist"
   },
   "devDependencies": {
+    "@resvg/resvg-js": "^2.6.2",
     "typescript": "^5.4.0"
   },
   "engines": {

packages/extension-chrome/.gitignore

@@ -1,2 +1,3 @@
 src/popup.html
 src/options.html
+icons/

packages/extension-chrome/README.md

@@ -20,8 +20,17 @@ Then in Chrome:
 3. Click **Load unpacked**.
 4. Select `packages/extension-chrome/dist/`.
 
-The extension's toolbar icon appears as a default puzzle piece (icons
-are deferred). Pin it for easy access.
+Pin the toolbar icon for easy access.
+
+**Other Chromium browsers (Brave, Edge, Opera, Vivaldi):** this same
+`dist/` loads unchanged — no separate build. Use the equivalent
+extensions page (`brave://extensions`, `edge://extensions`, …), enable
+Developer mode, and **Load unpacked** the same folder. Brave Shields
+don't affect the extension's own requests to `api.github.com` (those are
+extension-origin, not page content).
+
+The toolbar/extensions-page icon is generated from `assets/gitmarks.svg`
+at build time (see "Icons" below).
 
 ## First-run setup
 
@@ -243,5 +252,13 @@ user action. Filed and closed as #2.
 - Tracking-param URL stripping (`utm_*`) — tracked as #6
 - Folder-rename batching for thousands of bookmarks — closed as #7 (blocked on onMoved push handling)
 - Tags UI (tags live in the JSON but no UI here yet — web UI scope, #24/#25)
-- Icons (Chrome shows the default puzzle piece)
 - Conflict resolution beyond core's automatic 409/422 retry
+
+## Icons
+
+The toolbar button and extensions-page tile use icons generated from a
+single source: `assets/gitmarks.svg` at the repo root. The `prebuild`
+hook runs `scripts/gen-icons.mjs`, which rasterizes that SVG to
+16/32/48/128 px PNGs into `icons/` (git-ignored) and `@crxjs/vite-plugin`
+emits them into `dist/icons/`. To change the icon, edit (or replace)
+`assets/gitmarks.svg` and rebuild — no manifest changes needed.

packages/extension-chrome/manifest.config.ts

@@ -7,9 +7,21 @@ export default defineManifest({
   description: "Save bookmarks to your own GitHub repo.",
   permissions: ["storage", "activeTab", "bookmarks", "alarms"],
   host_permissions: ["https://api.github.com/*"],
+  icons: {
+    16: "icons/icon-16.png",
+    32: "icons/icon-32.png",
+    48: "icons/icon-48.png",
+    128: "icons/icon-128.png",
+  },
   action: {
     default_popup: "src/popup.html",
     default_title: "gitmarks",
+    default_icon: {
+      16: "icons/icon-16.png",
+      32: "icons/icon-32.png",
+      48: "icons/icon-48.png",
+      128: "icons/icon-128.png",
+    },
   },
   options_page: "src/options.html",
   background: {

packages/extension-chrome/package.json

@@ -4,15 +4,15 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "predev": "node ./scripts/copy-html.mjs",
+    "predev": "node ../../scripts/gen-icons.mjs && node ./scripts/copy-html.mjs",
     "dev": "vite build --watch --mode development",
-    "prebuild": "node ./scripts/copy-html.mjs",
+    "prebuild": "node ../../scripts/gen-icons.mjs && node ./scripts/copy-html.mjs",
     "build": "vite build",
     "pretypecheck": "node ./scripts/copy-html.mjs",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "pree2e": "node ./scripts/copy-html.mjs && vite build",
+    "pree2e": "node ../../scripts/gen-icons.mjs && node ./scripts/copy-html.mjs && vite build",
     "e2e": "playwright test",
-    "pree2e:headed": "node ./scripts/copy-html.mjs && vite build",
+    "pree2e:headed": "node ../../scripts/gen-icons.mjs && node ./scripts/copy-html.mjs && vite build",
     "e2e:headed": "playwright test --headed"
   },
   "dependencies": {

packages/extension-firefox/.gitignore

@@ -1,2 +1,3 @@
 src/popup.html
 src/options.html
+icons/

packages/extension-firefox/README.md

@@ -47,8 +47,9 @@ version Chrome uses) need a manual check:
 **Load + popup:**
 
 - [ ] Build, load via `about:debugging` → "Load Temporary Add-on", select
-      `dist/manifest.json`. The gitmarks toolbar icon appears as a default
-      puzzle piece (pin it for easy access).
+      `dist/manifest.json`. The gitmarks toolbar icon (generated from
+      `assets/gitmarks.svg` at build time) appears; pin it for easy
+      access.
 - [ ] Click the icon before configuring → popup shows "Set up gitmarks".
 
 **Setup flow:**

packages/extension-firefox/manifest.json

@@ -5,9 +5,21 @@
   "description": "Save bookmarks to your own GitHub repo.",
   "permissions": ["storage", "activeTab", "bookmarks", "alarms"],
   "host_permissions": ["https://api.github.com/*"],
+  "icons": {
+    "16": "icons/icon-16.png",
+    "32": "icons/icon-32.png",
+    "48": "icons/icon-48.png",
+    "128": "icons/icon-128.png"
+  },
   "action": {
     "default_popup": "popup.html",
-    "default_title": "gitmarks"
+    "default_title": "gitmarks",
+    "default_icon": {
+      "16": "icons/icon-16.png",
+      "32": "icons/icon-32.png",
+      "48": "icons/icon-48.png",
+      "128": "icons/icon-128.png"
+    }
   },
   "options_ui": {
     "page": "options.html",

packages/extension-firefox/package.json

@@ -4,9 +4,9 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "predev": "node ./scripts/copy-html.mjs",
+    "predev": "node ../../scripts/gen-icons.mjs && node ./scripts/copy-html.mjs",
     "dev": "vite",
-    "prebuild": "node ./scripts/copy-html.mjs",
+    "prebuild": "node ../../scripts/gen-icons.mjs && node ./scripts/copy-html.mjs",
     "build": "vite build && node ./scripts/copy-manifest.mjs",
     "pretypecheck": "node ./scripts/copy-html.mjs",
     "typecheck": "tsc -p tsconfig.json --noEmit"

packages/extension-firefox/scripts/copy-manifest.mjs

@@ -1,4 +1,4 @@
-import { copyFileSync, mkdirSync } from "node:fs";
+import { copyFileSync, mkdirSync, existsSync } from "node:fs";
 import { resolve, dirname } from "node:path";
 import { fileURLToPath } from "node:url";
 
@@ -10,3 +10,21 @@ copyFileSync(
   resolve(root, "dist/manifest.json"),
 );
 console.log("[firefox] copied manifest.json to dist/");
+
+// Plain Vite (root: "src") doesn't see the generated icons/ dir, so copy the
+// PNGs referenced by manifest.json into dist/icons/ ourselves.
+const iconsSrc = resolve(root, "icons");
+const iconsDest = resolve(root, "dist/icons");
+if (!existsSync(iconsSrc)) {
+  throw new Error(
+    `icons not found: ${iconsSrc} — run scripts/gen-icons.mjs first (prebuild does this)`,
+  );
+}
+mkdirSync(iconsDest, { recursive: true });
+for (const size of [16, 32, 48, 128]) {
+  copyFileSync(
+    resolve(iconsSrc, `icon-${size}.png`),
+    resolve(iconsDest, `icon-${size}.png`),
+  );
+}
+console.log("[firefox] copied icons/ to dist/");