background.js

// background.js

const LLM_RULE_PROMPTS = {
  "glassmorphism": "Is there excessive glassmorphism (frosted-glass blur on cards/panels)?",
  "extreme-border-radius": "Do cards/buttons use extremely rounded, pill-shaped corners that look generic/AI-made?",
  "amateurish-hand-drawn-svg": "Is there a cheap, amateurish hand-drawn-style SVG illustration or mascot?",
  "hero-metric-layout": "Does the hero show 3 big stat numbers side by side in a generic 'metric row' layout?",
  "identical-card-grids": "Are there 3+ cards in a grid that look visually identical with no differentiation?",
  "aphoristic-cadence-copy": "Does the visible copy read with a repetitive 'short punchy sentence. Then another.' AI cadence?",
};

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type !== "RUN_LLM_CHECKS") return false;

  runAllChecks(message.screenshot, message.apiKey)
    .then((findings) => sendResponse({ ok: true, findings }))
    .catch((err) => sendResponse({ ok: false, error: err.message }));

  return true; 
});

async function askClaude(base64Image, question, apiKey) {
  const response = await fetch("https://api.anthropic.com/v1/messages", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "x-api-key": apiKey,
      "anthropic-version": "2023-06-01",
      "anthropic-dangerous-direct-browser-access": "true",
    },
    body: JSON.stringify({
      model: "claude-sonnet-4-6",
      max_tokens: 200,
      messages: [
        {
          role: "user",
          content: [
            { type: "image", source: { type: "base64", media_type: "image/png", data: base64Image } },
            { type: "text", text: `${question}\n\nRespond ONLY with JSON, no markdown: {"flagged": true|false, "reason": "one short sentence"}` },
          ],
        },
      ],
    }),
  });

  if (!response.ok) {
    const errText = await response.text();
    throw new Error(`API error ${response.status}: ${errText.slice(0, 150)}`);
  }

  const data = await response.json();
  const textBlock = data.content?.find((c) => c.type === "text");
  if (!textBlock) return { flagged: false, reason: "no response" };
  try {
    return JSON.parse(textBlock.text.replace(/```json|```/g, "").trim());
  } catch {
    return { flagged: false, reason: "unparseable response" };
  }
}

async function runAllChecks(screenshotDataUrl, apiKey) {
  const base64 = screenshotDataUrl.split(",")[1];
  const findings = [];
  for (const [ruleId, question] of Object.entries(LLM_RULE_PROMPTS)) {
    const result = await askClaude(base64, question, apiKey);
    if (result.flagged) {
      findings.push({ ruleId, message: result.reason, type: "llm" });
    }
  }
  return findings;
}