CultivaSEO Scout

// Runs on every page — analyzes on-page SEO in real time
export default defineContentScript({
  matches: ["<all_urls>"],

  main() {
    // Listen for analysis requests from popup
    browser.runtime.onMessage.addListener((msg) => {
      if (msg.type === "ANALYZE_PAGE") {
        return Promise.resolve(analyzePage());
      }
    });
  },
});

function analyzePage(): SEOReport {
  const title   = document.title;
  const metaDesc = document
    .querySelector('meta[name="description"]')
    ?.getAttribute("content") ?? "";
  const h1s = [...document.querySelectorAll("h1")]
    .map(h => h.textContent?.trim() ?? "");
  const h2s = document.querySelectorAll("h2").length;
  const h3s = document.querySelectorAll("h3").length;
  const imgs = [...document.querySelectorAll("img")];
  const imgsNoAlt = imgs.filter(i => !i.alt).length;
  const canonical = document
    .querySelector('link[rel="canonical"]')
    ?.getAttribute("href") ?? "";
  const bodyText = document.body.innerText ?? "";
  const wordCount = bodyText.split(/\s+/).filter(Boolean).length;
  const keywords  = extractTopKeywords(bodyText, 8);
  const score     = calcScore({ title, metaDesc, h1s, imgsNoAlt, wordCount });

  return {
    title, metaDesc, h1s, h2s, h3s,
    imgTotal: imgs.length, imgsNoAlt,
    wordCount, canonical, keywords, score,
    url: location.href,
  };
}

export default defineBackground(() => {
  // Relay messages from popup → active tab content script
  browser.runtime.onMessage.addListener(
    async (msg, _sender, sendResponse) => {
      if (msg.type === "GET_SEO_REPORT") {
        const [tab] = await browser.tabs.query({
          active: true, currentWindow: true
        });
        if (!tab.id) return;

        const report = await browser.tabs.sendMessage(
          tab.id, { type: "ANALYZE_PAGE" }
        );

        // Update badge with SEO score
        browser.action.setBadgeText({
          text: String(report.score),
          tabId: tab.id,
        });
        browser.action.setBadgeBackgroundColor({
          color: report.score >= 70 ? "#4ade80"
               : report.score >= 40 ? "#fb923c"
               : "#f87171",
          tabId: tab.id,
        });

        sendResponse(report);
      }
    }
  );
});

export default function App() {
  const [report, setReport] = useState<SEOReport | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(async () => {
    const data = await browser.runtime.sendMessage({
      type: "GET_SEO_REPORT",
    });
    setReport(data);
    setLoading(false);
  }, []);

  const copyReport = () => {
    if (!report) return;
    navigator.clipboard.writeText(
      formatMarkdownReport(report)
    );
  };

  if (loading) return <Spinner />;

  return (
    <div className="popup">
      <ScoreRing score={report!.score} />
      <CheckList report={report!} />
      <KeywordCloud keywords={report!.keywords} />
      <button onClick={copyReport}>
        Copiar informe
      </button>
    </div>
  );
}