feat: Chrome Web Store release preparation

Add privacy policy, changelog, manifest improvements (side_panel declaration,
short_name, minimum_chrome_version, remove redundant activeTab permission),
deduplicate page extraction logic into shared module, lower highlighter z-index,
fix TS build error, fix README model reference, and capture store screenshots.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: Paul Mulligan

app/CHANGELOG.md

@@ -0,0 +1,28 @@
+# Changelog
+
+All notable changes to AI SEO Copilot will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.0] - 2026-04-01
+
+### Added
+
+- SEO analysis with 25 checks across 5 categories: Content, Technical, Meta Tags, Headings, and Images
+- Weighted scoring system (0-100) with per-category subscores
+- AI-powered recommendations using OpenAI GPT-4o-mini:
+  - Title tag suggestions
+  - Meta description rewrites
+  - H2 keyword optimization
+  - Image alt text generation
+  - JSON-LD structured data templates
+- Side panel UI with dark theme
+- Per-tab analysis scoping (each tab keeps its own results)
+- Editable recommendations with copy-to-clipboard
+- Multi-language support (9 languages)
+- Onboarding overlay for first-time users
+- Score celebration animation (confetti at 80+)
+- Options page for API key management
+- JavaScript-rendered site detection with user warnings
+- Keyboard-accessible UI

app/PRIVACY_POLICY.md

@@ -0,0 +1,74 @@
+# Privacy Policy — AI SEO Copilot
+
+**Last updated:** April 1, 2026
+
+AI SEO Copilot is a Chrome browser extension that analyzes web pages for SEO issues and provides recommendations. This privacy policy explains what data the extension accesses, how it is used, and how it is stored.
+
+## Data the Extension Accesses
+
+When you click "Analyze" on a page, the extension reads the following from the current tab:
+
+- Page title, meta tags, and heading structure
+- Image elements and their alt text attributes
+- Link counts (internal vs. external)
+- Open Graph and Twitter Card meta tags
+- Structured data (JSON-LD schema markup)
+- Word count and paragraph content
+- The page URL
+
+This data is used **only** to generate the SEO score and recommendations shown in the extension's side panel. It is never sent to our servers or any third party other than OpenAI (see below).
+
+## OpenAI API Key and AI Features
+
+The extension's AI-powered recommendations (title suggestions, meta description rewrites, alt text generation, etc.) require an OpenAI API key that **you** provide.
+
+- Your API key is stored locally in your browser's `chrome.storage.local`. It never leaves your device except when making direct API calls from your browser to OpenAI's servers (`api.openai.com`).
+- When you request an AI recommendation, a small amount of page context (e.g., the current title, keyword, or image src) is sent to OpenAI's API to generate the suggestion. Only the minimum context needed for the specific recommendation is sent.
+- We do not proxy, log, or store any data sent to or received from OpenAI. Your browser communicates directly with OpenAI's API.
+- You can delete your stored API key at any time from the extension's Settings page.
+
+For OpenAI's own data handling practices, see [OpenAI's Privacy Policy](https://openai.com/policies/privacy-policy) and [API Data Usage Policy](https://openai.com/policies/api-data-usage-policies).
+
+## Data Storage
+
+All extension data is stored locally on your device using Chrome's built-in storage APIs:
+
+| Data | Storage Location | Purpose |
+|------|-----------------|---------|
+| OpenAI API key | `chrome.storage.local` | Authenticating AI recommendation requests |
+| Language preference | `chrome.storage.local` | Generating recommendations in your preferred language |
+| Per-tab analysis results | `chrome.storage.session` | Preserving results while navigating between tabs |
+
+No data is stored on external servers. No cookies are set. No analytics or tracking scripts are used.
+
+## Permissions Explained
+
+| Permission | Why It's Needed |
+|------------|----------------|
+| `tabs` | To identify the active tab and its URL for analysis |
+| `sidePanel` | To display the extension's UI in Chrome's side panel |
+| `storage` | To save your API key and preferences locally |
+| `scripting` | To read page content (DOM) for SEO analysis |
+| Host permission (`<all_urls>`) | To analyze any website you choose to scan |
+
+## Data Sharing
+
+AI SEO Copilot does **not**:
+
+- Collect or transmit personal information
+- Use analytics, telemetry, or tracking of any kind
+- Share data with third parties (other than direct OpenAI API calls initiated by you)
+- Store any data on external servers
+- Access browsing history beyond the currently analyzed tab
+
+## Children's Privacy
+
+This extension is not directed at children under 13 and does not knowingly collect information from children.
+
+## Changes to This Policy
+
+If this policy is updated, the new version will be published with the extension update and the "Last updated" date above will change.
+
+## Contact
+
+If you have questions about this privacy policy, please open an issue on the project's GitHub repository.

app/README.md

@@ -195,7 +195,7 @@ For AI-powered suggestions, you need an OpenAI API key:
 4. Create a new secret key
 5. Copy the key and paste it in the extension's Settings
 
-**Note:** OpenAI API usage has associated costs. The extension uses GPT-3.5-turbo which is inexpensive (typically fractions of a cent per request).
+**Note:** OpenAI API usage has associated costs. The extension uses GPT-4o-mini which is inexpensive (typically fractions of a cent per request).
 
 ---
 

app/manifest.json

@@ -1,15 +1,17 @@
 {
   "manifest_version": 3,
   "name": "AI SEO Copilot",
+  "short_name": "SEO Copilot",
   "description": "Analyze page SEO and get AI-powered recommendations",
   "version": "0.1.0",
+  "minimum_chrome_version": "116",
   "icons": {
     "16": "icons/icon-16.png",
     "32": "icons/icon-32.png",
     "48": "icons/icon-48.png",
     "128": "icons/icon-128.png"
   },
-  "permissions": ["activeTab", "tabs", "sidePanel", "storage", "scripting"],
+  "permissions": ["tabs", "sidePanel", "storage", "scripting"],
   "host_permissions": ["<all_urls>"],
   "background": {
     "service_worker": "src/background/service-worker.ts",
@@ -21,6 +23,9 @@
       "js": ["src/content/index.ts"]
     }
   ],
+  "side_panel": {
+    "default_path": "src/sidepanel/index.html"
+  },
   "options_ui": {
     "page": "src/options/index.html",
     "open_in_tab": false

app/src/background/service-worker.ts

@@ -1,3 +1,5 @@
+import { extractPageDataInline } from "@/lib/extract-page-data-inline";
+
 console.log("[AI SEO Copilot] Service worker initializing...");
 
 // Disable automatic panel opening - we'll handle it manually for per-tab scoping
@@ -47,19 +49,6 @@ async function persistPanelTabs(): Promise<void> {
 async function addPanelTab(tabId: number): Promise<void> {
   panelTabs.add(tabId);
   await persistPanelTabs();
-
-  // Immediately disable the panel on ALL other tabs
-  // This ensures the panel only shows on the tab where it was opened
-  try {
-    const allTabs = await chrome.tabs.query({});
-    for (const tab of allTabs) {
-      if (tab.id && tab.id !== tabId) {
-        chrome.sidePanel.setOptions({ tabId: tab.id, enabled: false });
-      }
-    }
-  } catch {
-    // Ignore errors
-  }
 }
 
 async function removePanelTab(tabId: number): Promise<void> {
@@ -165,59 +154,7 @@ chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
         console.log("[AI SEO Copilot] Executing analyzer script...");
         const results = await chrome.scripting.executeScript({
           target: { tabId },
-          func: () => {
-            const getMetaContent = (name: string): string => {
-              const el =
-                document.querySelector<HTMLMetaElement>(`meta[name="${name}"]`) ||
-                document.querySelector<HTMLMetaElement>(`meta[property="${name}"]`);
-              return el?.content ?? "";
-            };
-            const getHeadings = (tag: string): string[] =>
-              Array.from(document.querySelectorAll(tag)).map(
-                (el) => el.textContent?.trim() ?? "",
-              );
-            const images = Array.from(document.querySelectorAll<HTMLImageElement>("img")).map((img) => ({
-              src: img.src, alt: img.alt ?? "", width: img.naturalWidth || null, height: img.naturalHeight || null,
-            }));
-            const links = Array.from(document.querySelectorAll<HTMLAnchorElement>("a[href]"));
-            const host = window.location.hostname;
-            let internal = 0, external = 0;
-            for (const link of links) {
-              try { new URL(link.href).hostname === host ? internal++ : external++; }
-              catch { internal++; }
-            }
-            const bodyText = document.body?.innerText ?? "";
-            const ogTags: Record<string, string> = {};
-            document.querySelectorAll<HTMLMetaElement>('meta[property^="og:"]').forEach((el) => {
-              ogTags[el.getAttribute("property")!] = el.content;
-            });
-            const twitterTags: Record<string, string> = {};
-            document.querySelectorAll<HTMLMetaElement>('meta[name^="twitter:"]').forEach((el) => {
-              twitterTags[el.getAttribute("name")!] = el.content;
-            });
-            const paragraphs = Array.from(document.querySelectorAll("p"))
-              .map((el) => el.textContent?.trim() ?? "").filter(Boolean);
-            const jsRes = Array.from(document.querySelectorAll<HTMLScriptElement>("script[src]"))
-              .map((el) => el.src).filter(Boolean);
-            const cssRes = Array.from(document.querySelectorAll<HTMLLinkElement>('link[rel="stylesheet"]'))
-              .map((el) => el.href).filter(Boolean);
-            const schemas = Array.from(document.querySelectorAll<HTMLScriptElement>('script[type="application/ld+json"]'));
-            const schemaTypes: string[] = [];
-            for (const s of schemas) { try { const d = JSON.parse(s.textContent ?? ""); if (d["@type"]) schemaTypes.push(d["@type"]); } catch {} }
-            return {
-              url: window.location.href, title: document.title ?? "",
-              metaDescription: getMetaContent("description"), metaKeywords: getMetaContent("keywords"),
-              canonical: document.querySelector<HTMLLinkElement>('link[rel="canonical"]')?.href ?? "",
-              h1: getHeadings("h1"), h2: getHeadings("h2"), h3: getHeadings("h3"),
-              h4: getHeadings("h4"), h5: getHeadings("h5"), h6: getHeadings("h6"),
-              images, ogTags, twitterTags, wordCount: bodyText.split(/\s+/).filter(Boolean).length,
-              internalLinks: internal, externalLinks: external,
-              lang: document.documentElement.lang ?? "", paragraphs,
-              resources: { js: jsRes, css: cssRes },
-              schemaMarkup: { types: schemaTypes, count: schemas.length },
-              ogImage: getMetaContent("og:image"), imageFileSizes: [],
-            };
-          },
+          func: extractPageDataInline,
         });
         console.log("[AI SEO Copilot] executeScript completed, results:", results?.length ?? 0);
         const data = results?.[0]?.result;

app/src/components/EditableRecommendation.test.tsx

@@ -75,4 +75,30 @@ describe("EditableRecommendation", () => {
     await user.click(screen.getByTitle("Regenerate"));
     expect(defaultProps.onToast).toHaveBeenCalledWith("Failed to regenerate");
   });
+
+  describe("when apiKeyMissing is true", () => {
+    it("disables the regenerate button", () => {
+      render(<EditableRecommendation {...defaultProps} apiKeyMissing />);
+      const btn = screen.getByTitle("Set up API key in options");
+      expect(btn).toBeDisabled();
+    });
+
+    it("shows a message about setting up the API key", () => {
+      render(<EditableRecommendation {...defaultProps} apiKeyMissing />);
+      expect(
+        screen.getByText("Set up your OpenAI API key in options to use AI suggestions."),
+      ).toBeInTheDocument();
+    });
+
+    it("does not call onRegenerate when button is clicked", async () => {
+      const onRegenerate = vi.fn();
+      const user = userEvent.setup();
+      render(
+        <EditableRecommendation {...defaultProps} onRegenerate={onRegenerate} apiKeyMissing />,
+      );
+      const btn = screen.getByTitle("Set up API key in options");
+      await user.click(btn);
+      expect(onRegenerate).not.toHaveBeenCalled();
+    });
+  });
 });

app/src/components/EditableRecommendation.tsx

@@ -7,6 +7,7 @@ interface EditableRecommendationProps {
   initialValue: string;
   onRegenerate: () => Promise<string>;
   onToast: (message: string) => void;
+  apiKeyMissing?: boolean;
   className?: string;
 }
 
@@ -15,6 +16,7 @@ export function EditableRecommendation({
   initialValue,
   onRegenerate,
   onToast,
+  apiKeyMissing = false,
   className,
 }: EditableRecommendationProps) {
   const [text, setText] = useState(initialValue);
@@ -85,9 +87,9 @@ export function EditableRecommendation({
           </button>
           <button
             onClick={handleRegenerate}
-            disabled={loading}
-            className="rounded-full p-1.5 text-text-secondary hover:bg-bg-300 hover:text-white transition-colors disabled:opacity-50"
-            title="Regenerate"
+            disabled={loading || apiKeyMissing}
+            className="rounded-full p-1.5 text-text-secondary hover:bg-bg-300 hover:text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-text-secondary"
+            title={apiKeyMissing ? "Set up API key in options" : "Regenerate"}
           >
             <RefreshCw
               className={cn("h-3.5 w-3.5", loading && "animate-spin")}
@@ -105,6 +107,11 @@ export function EditableRecommendation({
         rows={1}
         className="w-full rounded-input bg-bg-700 px-3 py-2 text-body-16 text-text-primary placeholder:text-bg-300 outline-none focus:ring-1 focus:ring-accent-blue transition-shadow resize-none overflow-hidden"
       />
+      {apiKeyMissing && (
+        <p className="mt-2 text-body-12 text-text-secondary opacity-70">
+          Set up your OpenAI API key in options to use AI suggestions.
+        </p>
+      )}
     </div>
   );
 }

app/src/components/H2SelectionList.test.tsx

@@ -94,4 +94,42 @@ describe("H2SelectionList", () => {
     await user.click(regenerateButtons[0]);
     expect(defaultProps.onToast).toHaveBeenCalledWith("Failed to regenerate");
   });
+
+  describe("when apiKeyMissing is true", () => {
+    it("disables the Generate All button", () => {
+      render(<H2SelectionList {...defaultProps} apiKeyMissing />);
+      const generateAllBtn = screen.getByText("Generate All").closest("button")!;
+      expect(generateAllBtn).toBeDisabled();
+    });
+
+    it("disables all per-item regenerate buttons", () => {
+      render(<H2SelectionList {...defaultProps} apiKeyMissing />);
+      const regenerateButtons = screen.getAllByTitle("Set up API key in options");
+      for (const btn of regenerateButtons) {
+        expect(btn).toBeDisabled();
+      }
+    });
+
+    it("shows a message about setting up the API key", () => {
+      render(<H2SelectionList {...defaultProps} apiKeyMissing />);
+      expect(
+        screen.getByText("Set up your OpenAI API key in options to use AI suggestions."),
+      ).toBeInTheDocument();
+    });
+
+    it("does not call onRegenerateAll when Generate All is clicked", async () => {
+      const onRegenerateAll = vi.fn();
+      const user = userEvent.setup();
+      render(
+        <H2SelectionList
+          {...defaultProps}
+          onRegenerateAll={onRegenerateAll}
+          apiKeyMissing
+        />,
+      );
+      const generateAllBtn = screen.getByText("Generate All").closest("button")!;
+      await user.click(generateAllBtn);
+      expect(onRegenerateAll).not.toHaveBeenCalled();
+    });
+  });
 });

app/src/components/H2SelectionList.tsx

@@ -14,6 +14,7 @@ interface H2SelectionListProps {
   onRegenerateOne: (index: number, h2Text: string) => Promise<string>;
   onRegenerateAll: () => Promise<string[]>;
   onToast: (message: string) => void;
+  apiKeyMissing?: boolean;
   className?: string;
 }
 
@@ -22,6 +23,7 @@ export function H2SelectionList({
   onRegenerateOne,
   onRegenerateAll,
   onToast,
+  apiKeyMissing = false,
   className,
 }: H2SelectionListProps) {
   const [suggestions, setSuggestions] = useState<Record<number, string>>(() => {
@@ -133,12 +135,20 @@ export function H2SelectionList({
           variant="secondary"
           onClick={handleRegenerateAll}
           loading={loadingAll}
+          disabled={apiKeyMissing}
+          title={apiKeyMissing ? "Set up API key in options" : undefined}
         >
           <Sparkles className="h-3 w-3" />
           Generate All
         </Button>
       </div>
 
+      {apiKeyMissing && (
+        <p className="text-body-12 text-text-secondary opacity-70">
+          Set up your OpenAI API key in options to use AI suggestions.
+        </p>
+      )}
+
       {items.map((item) => {
         const suggestion = suggestions[item.index] ?? "";
         const isLoading = loadingItems.has(item.index);
@@ -184,9 +194,9 @@ export function H2SelectionList({
                 </button>
                 <button
                   onClick={() => handleRegenerateOne(item.index, item.text)}
-                  disabled={isLoading}
-                  className="rounded-full p-1.5 text-text-secondary hover:bg-bg-300 hover:text-white transition-colors disabled:opacity-50"
-                  title="Regenerate"
+                  disabled={isLoading || apiKeyMissing}
+                  className="rounded-full p-1.5 text-text-secondary hover:bg-bg-300 hover:text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-text-secondary"
+                  title={apiKeyMissing ? "Set up API key in options" : "Regenerate"}
                 >
                   <RefreshCw
                     className={cn("h-3.5 w-3.5", isLoading && "animate-spin")}