offscreen.js

// offscreen.js - Draws dynamic icons with custom badge

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'drawIcon') {
    drawIcons(message.isLogging, message.count).then(sendResponse);
    return true;
  }
});

async function drawIcons(isLogging, count) {
  const results = {};

  // Draw for both 16x16 and 32x32
  for (const size of [16, 32]) {
    results[size] = drawIcon(size, isLogging, count);
  }

  return results;
}

function drawIcon(size, isLogging, count) {
  const canvas = document.createElement('canvas');
  canvas.width = size;
  canvas.height = size;
  const ctx = canvas.getContext('2d');

  // Scale factor
  const scale = size / 32;

  // Clear canvas
  ctx.clearRect(0, 0, size, size);

  // Draw base icon - dark rounded square with "K"
  const centerX = size / 2;
  const centerY = size / 2;
  const cornerRadius = Math.round(4 * scale);

  // Background rounded rectangle (fills entire canvas)
  ctx.fillStyle = '#1a1a2e';
  ctx.beginPath();
  ctx.roundRect(0, 0, size, size, cornerRadius);
  ctx.fill();

  // Border
  ctx.strokeStyle = '#3b3b5c';
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.roundRect(0.5, 0.5, size - 1, size - 1, cornerRadius);
  ctx.stroke();

  // Letter "K" (large, fills the icon)
  ctx.fillStyle = '#ffffff';
  ctx.font = `bold ${Math.round(22 * scale)}px Arial`;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText('K', centerX, centerY + 1 * scale);

  // Draw green dot (top-right) if logging
  if (isLogging) {
    const dotRadius = Math.max(2, Math.round(3 * scale));
    const dotX = size - dotRadius - 1;
    const dotY = dotRadius + 1;

    // White border
    ctx.fillStyle = '#ffffff';
    ctx.beginPath();
    ctx.arc(dotX, dotY, dotRadius + 1, 0, Math.PI * 2);
    ctx.fill();

    // Green dot
    ctx.fillStyle = '#22c55e';
    ctx.beginPath();
    ctx.arc(dotX, dotY, dotRadius, 0, Math.PI * 2);
    ctx.fill();
  }

  // Draw count badge (bottom-right, right-aligned) if count > 0
  if (count > 0) {
    const displayText = count > 99 ? '99' : count.toString();

    // Badge sizing - smaller than default
    const badgeHeight = Math.max(8, Math.round(10 * scale));
    const fontSize = Math.max(6, Math.round(7 * scale));
    const padding = Math.round(2 * scale);

    // Calculate text width for dynamic badge width
    ctx.font = `bold ${fontSize}px Arial`;
    const textWidth = ctx.measureText(displayText).width;
    const badgeWidth = Math.max(badgeHeight, textWidth + padding * 2);
    const badgeRadius = badgeHeight / 2;

    // Position at bottom-right corner, right-aligned (badge expands left)
    const badgeRight = size - 1;
    const badgeBottom = size - 1;
    const badgeX = badgeRight - badgeWidth / 2;  // Center X of badge
    const badgeY = badgeBottom - badgeHeight / 2; // Center Y of badge

    // White border (rounded rect)
    ctx.fillStyle = '#ffffff';
    ctx.beginPath();
    ctx.roundRect(badgeRight - badgeWidth - 1, badgeBottom - badgeHeight - 1, badgeWidth + 2, badgeHeight + 2, badgeRadius + 1);
    ctx.fill();

    // Red badge background (rounded rect)
    ctx.fillStyle = '#ef4444';
    ctx.beginPath();
    ctx.roundRect(badgeRight - badgeWidth, badgeBottom - badgeHeight, badgeWidth, badgeHeight, badgeRadius);
    ctx.fill();

    // Badge text (right-aligned within badge)
    ctx.fillStyle = '#ffffff';
    ctx.font = `bold ${fontSize}px Arial`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(displayText, badgeX, badgeY + 0.5);
  }

  // Get image data and convert to array
  const imageData = ctx.getImageData(0, 0, size, size);
  return Array.from(imageData.data);
}