hostinfo/utils/icon.ts
2025-03-15 19:41:30 +01:00

65 lines
2 KiB
TypeScript

export async function updateIcon(countryCode: string | null) {
const validCode =
countryCode?.match(/^[A-Z]{2}$/i)?.[0]?.toLowerCase() || 'unknown'
const loadImageBitmap = async (code: string): Promise<ImageBitmap> => {
const url = browser.runtime.getURL("/")
try {
const response = await fetch(url + `${code}.webp`)
if (!response.ok) throw new Error('Flag not found')
const blob = await response.blob()
return await createImageBitmap(blob)
} catch (error) {
throw new Error(
`Failed to load flag: ${code} - ${
error instanceof Error ? error.message : String(error)
}`
)
}
}
const processImage = async (bitmap: ImageBitmap) => {
const canvas = new OffscreenCanvas(128, 128)
const ctx = canvas.getContext('2d')!
const ratio = Math.min(
canvas.width / bitmap.width,
canvas.height / bitmap.height
)
ctx.clearRect(0, 0, canvas.width, canvas.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]
return Object.fromEntries(
sizes.map(size => {
const resizedCanvas = new OffscreenCanvas(size, size)
const ctx = resizedCanvas.getContext('2d')!
ctx.drawImage(canvas, 0, 0, size, size)
return [size, ctx.getImageData(0, 0, size, size)]
})
)
}
try {
const bitmap = await loadImageBitmap(validCode)
chrome.action.setIcon({ imageData: await processImage(bitmap) })
} catch (error) {
console.error('Primary flag failed, trying unknown:', error)
try {
const unknownBitmap = await loadImageBitmap('unknown')
chrome.action.setIcon({ imageData: await processImage(unknownBitmap) })
} catch (fallbackError) {
console.error('Both flag assets failed:', fallbackError)
}
}
}