half way there

services/icon.ts

@@ -0,0 +1,69 @@
+import { browser } from 'wxt/browser';
+
+const ICON_CACHE = new Map<string, Record<string, ImageData>>();
+
+export const IconService = {
+  async update(tabId: number, countryCode: string | null, isLocal: boolean) {
+    try {
+      if (isLocal) {
+        const path = '/icon/128.png' as string;
+        await browser.action.setIcon({ tabId, path });
+        return;
+      }
+
+      const code = countryCode ? countryCode.toLowerCase() : 'unknown';
+      const imageData = await this.getIconData(code);
+
+      await browser.action.setIcon({ tabId, imageData });
+    } catch (e) {
+      console.warn('Failed to update icon', e);
+    }
+  },
+
+  async getIconData(code: string): Promise<Record<string, ImageData>> {
+    if (ICON_CACHE.has(code)) return ICON_CACHE.get(code)!;
+
+    const path = `/${code}.webp`;
+    const url = browser.runtime.getURL(path as any);
+
+    try {
+      const resp = await fetch(url);
+      if (!resp.ok) throw new Error('Icon not found');
+
+      const blob = await resp.blob();
+      const bitmap = await createImageBitmap(blob);
+      const data = await this.processBitmap(bitmap);
+
+      ICON_CACHE.set(code, data);
+      return data;
+    } catch {
+      // Fallback to unknown if specific flag fails
+      if (code !== 'unknown') return this.getIconData('unknown');
+      throw new Error('Failed to load fallback icon');
+    }
+  },
+
+  async processBitmap(bitmap: ImageBitmap): Promise<Record<string, ImageData>> {
+    const canvas = new OffscreenCanvas(128, 128);
+    const ctx = canvas.getContext('2d', { willReadFrequently: true })!;
+
+    // Center and contain
+    const ratio = Math.min(canvas.width / bitmap.width, canvas.height / bitmap.height);
+    const offsetX = (canvas.width - bitmap.width * ratio) / 2;
+    const offsetY = (canvas.height - bitmap.height * ratio) / 2;
+
+    ctx.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height, offsetX, offsetY, bitmap.width * ratio, bitmap.height * ratio);
+
+    const sizes = [16, 32, 48, 128];
+    const result: Record<string, ImageData> = {};
+
+    for (const size of sizes) {
+      const sCanvas = new OffscreenCanvas(size, size);
+      const sCtx = sCanvas.getContext('2d')!;
+      sCtx.drawImage(canvas, 0, 0, size, size);
+      result[size] = sCtx.getImageData(0, 0, size, size);
+    }
+
+    return result;
+  }
+};