feat(extension): branded toolbar/store icons (16/48/128 from bag mark)

Author: mayur-tolexo

extension/icon.svg

@@ -3,7 +3,12 @@
   "name": "shoplit — add to cart",
   "version": "0.1.0",
   "description": "Add any product to your shoplit cart from Amazon, Myntra, Nykaa, Flipkart, AJIO.",
-  "action": { "default_popup": "popup.html", "default_title": "Add to shoplit" },
+  "icons": { "16": "icons/16.png", "48": "icons/48.png", "128": "icons/128.png" },
+  "action": {
+    "default_popup": "popup.html",
+    "default_title": "Add to shoplit",
+    "default_icon": { "16": "icons/16.png", "48": "icons/48.png", "128": "icons/128.png" }
+  },
   "background": { "service_worker": "service-worker.js", "type": "module" },
   "permissions": ["activeTab", "scripting", "storage"],
   "host_permissions": [

extension/icons/128.png

@@ -5,9 +5,11 @@
   "type": "module",
   "scripts": {
     "build": "node build.mjs",
+    "icons": "node scripts/gen-icons.mjs",
     "test": "vitest run"
   },
   "devDependencies": {
+    "@resvg/resvg-js": "^2.6.2",
     "@types/chrome": "^0.0.268",
     "@types/jsdom": "^28.0.3",
     "@types/node": "^25.9.1",

extension/icons/16.png

@@ -0,0 +1,12 @@
+// Render icon.svg → PNG icons (16/48/128) for the extension. Run: npm run icons
+import { Resvg } from "@resvg/resvg-js";
+import { readFileSync, mkdirSync, writeFileSync } from "node:fs";
+
+const svg = readFileSync(new URL("../icon.svg", import.meta.url), "utf8");
+mkdirSync(new URL("../icons", import.meta.url), { recursive: true });
+
+for (const size of [16, 48, 128]) {
+  const png = new Resvg(svg, { fitTo: { mode: "width", value: size } }).render().asPng();
+  writeFileSync(new URL(`../icons/${size}.png`, import.meta.url), png);
+  console.log(`icons/${size}.png`);
+}