I want AI to make me a Chrome extension

json

{
  "manifest_version": 3,
  "name": "Ruth's Word Counter",
  "version": "1.2",
  "description": "Highlight some text, click the button, and see how many words you highlighted. Only looks at the page when you click.",
  "permissions": ["activeTab", "scripting"],
  "action": {
    "default_title": "Count my highlighted words",
    "default_popup": "popup.html"
  },
  "commands": {
    "_execute_action": {
      "suggested_key": { "default": "Alt+Shift+W" },
      "description": "Count my highlighted words"
    }
  }
}

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ruth's Word Counter</title>
  <style>
    body {
      width: 380px;
      margin: 0;
      padding: 24px;
      background: #FFF8E7;
      color: #1A1A1A;
      font-family: Verdana, Arial, sans-serif;
      text-align: center;
    }
    #number {
      font-size: 64px;
      font-weight: bold;
      line-height: 1.1;
    }
    #number.smaller { font-size: 44px; }
    #label {
      font-size: 28px;
      margin-top: 8px;
    }
    #chars {
      font-size: 28px;
      margin-top: 20px;
      padding-top: 16px;
      border-top: 2px solid #1A1A1A;
    }
    #message {
      font-size: 24px;
      line-height: 1.4;
    }
    .hidden { display: none; }
  </style>
</head>
<body>
  <!-- role="status" makes a screen reader read out whatever appears here. -->
  <main role="status" aria-live="polite" aria-atomic="true">
    <div id="result" class="hidden">
      <div id="number"></div>
      <div id="label"></div>
      <div id="chars"></div>
    </div>
    <div id="message">Counting…</div>
  </main>
  <script src="popup.js"></script>
</body>
</html>

js

// Runs only when Ruth clicks the toolbar button (or uses the keyboard shortcut).
// Reads the highlighted text on the current page, counts the words, shows the number.
// Nothing is saved and nothing is sent anywhere.

const resultBox = document.getElementById("result");
const numberEl = document.getElementById("number");
const labelEl = document.getElementById("label");
const charsEl = document.getElementById("chars");
const messageEl = document.getElementById("message");

function showMessage(text) {
  resultBox.classList.add("hidden");
  messageEl.classList.remove("hidden");
  messageEl.textContent = text;
}

function showCount(count, charCount) {
  messageEl.classList.add("hidden");
  resultBox.classList.remove("hidden");
  const text = count.toLocaleString();
  numberEl.textContent = text;
  // Very long numbers (over a million) get slightly smaller type so they still fit.
  numberEl.classList.toggle("smaller", text.length > 7);
  labelEl.textContent = count === 1 ? "word" : "words";
  charsEl.textContent = charCount.toLocaleString() + (charCount === 1 ? " character" : " characters") + " (including spaces)";
}

// This small function is run inside the page to fetch the highlighted text.
function getHighlightedText() {
  const active = document.activeElement;
  if (active && (active.tagName === "TEXTAREA" || active.tagName === "INPUT")) {
    try {
      const part = active.value.substring(active.selectionStart, active.selectionEnd);
      if (part) return part;
    } catch (e) { /* some input types don't allow this */ }
  }
  return window.getSelection().toString();
}

// Counts words the way Word does: anything separated by spaces, tabs or line breaks.
// "well-known" is one word, "10,000" is one word.
function countWords(text) {
  // Remove invisible characters that some websites hide inside text,
  // so they are never mistaken for words.
  const cleaned = text.replace(/[­​-‍⁠]/g, "").trim();
  return cleaned === "" ? 0 : cleaned.split(/\s+/).length;
}

// Counts every visible character, including spaces and punctuation.
// Spaces at the very start or end of the highlight are ignored.
function countCharacters(text) {
  const cleaned = text.replace(/[­​-‍⁠]/g, "").trim();
  return Array.from(cleaned).length;
}

async function main() {
  try {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

    let results;
    try {
      // First try every part of the page, including embedded frames.
      results = await chrome.scripting.executeScript({
        target: { tabId: tab.id, allFrames: true },
        func: getHighlightedText
      });
    } catch (e) {
      // If an embedded part is off-limits, fall back to the main page only.
      results = await chrome.scripting.executeScript({
        target: { tabId: tab.id },
        func: getHighlightedText
      });
    }

    // Use the first part of the page that has some highlighted text.
    const found = results.map(r => r.result || "").find(t => t.trim() !== "");

    if (!found) {
      showMessage("No words are highlighted. Highlight some text on the page, then click this button again. (This can also happen inside a PDF, which Chrome doesn't let me read.)");
      return;
    }
    showCount(countWords(found), countCharacters(found));
  } catch (error) {
    showMessage("Sorry, Chrome doesn't let me read this page. Try a normal web page, not a Chrome settings page, the Chrome Web Store, or a PDF.");
  }
}

main();