export async function updateIcon(countryCode: string | null) { const validCode = countryCode?.match(/^[A-Z]{2}$/i)?.[0]?.toLowerCase() || 'unknown'; try { // Existing flag image handling const flagUrl = `https://flagcdn.com/w160/${validCode}.png`; const response = await fetch(flagUrl); if (!response.ok) throw new Error('Invalid flag'); const blob = await response.blob(); const bitmap = await createImageBitmap(blob); const canvas = new OffscreenCanvas(128, 128); const ctx = canvas.getContext('2d')!; const ratio = Math.min( canvas.width / bitmap.width, canvas.height / bitmap.height ); ctx.drawImage( bitmap, 0, 0, bitmap.width, bitmap.height, (canvas.width - bitmap.width * ratio) / 2, (canvas.height - bitmap.height * ratio) / 2, bitmap.width * ratio, bitmap.height * ratio ); const sizes = [16, 32, 48, 128]; const imageData = Object.fromEntries( sizes.map(size => { const resizedCanvas = new OffscreenCanvas(size, size); const resizedCtx = resizedCanvas.getContext('2d')!; resizedCtx.drawImage(canvas, 0, 0, size, size); return [size, resizedCtx.getImageData(0, 0, size, size)]; }) ); chrome.action.setIcon({ imageData }); } catch (error) { console.error('Error updating extension icon:', error); // Fixed fallback SVG const fallbackSVG = ` ? `; // Properly encode SVG const encodedSVG = encodeURIComponent(fallbackSVG) .replace(/'/g, '%27') .replace(/"/g, '%22'); const fallbackUrl = `data:image/svg+xml;charset=utf-8,${encodedSVG}`; // Set icon using path with size-specific URLs chrome.action.setIcon({ path: { "16": fallbackUrl, "32": fallbackUrl, "48": fallbackUrl, "128": fallbackUrl } }); } }