Build a Chrome Extension with AI in Under an Hour

Manifest V3 Basics: Configuration That Works

Manifest V3 is Chrome's latest extension platform. It's more secure and performant than V2, but has important differences that AI sometimes gets wrong. Here's what you need to know.

The manifest.json explained:

```json { "manifest_version": 3, "name": "AI Page Summarizer", "version": "1.0.0", "description": "Summarize any webpage with AI", "permissions": ["activeTab", "storage"], "action": { "default_popup": "popup.html", "default_icon": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon128.png" } }, "background": { "service_worker": "background.js" }, "content_scripts": [{ "matches": ["<all_urls>"], "js": ["content.js"] }] } ```

Key Manifest V3 concepts:

1. Service Workers replace Background Pages In V2, background scripts ran persistently. In V3, the background is a service worker that starts on events and shuts down when idle. This means: - No persistent state — use `chrome.storage` instead of variables - No DOM access in the background script - Must register event listeners synchronously at the top level

2. Permissions are more granular - `activeTab` gives access to the current tab only when the user clicks your extension (best for most cases) - `host_permissions` replace the old broad `<all_urls>` permission for background access - `storage` for saving settings and data locally

3. Content Security Policy is strict - No inline scripts in HTML files — all JS must be in separate .js files - No `eval()` or dynamic code generation - External resources must be explicitly declared

Common AI mistakes to watch for: - Using `background.page` instead of `service_worker` - Using `browser_action` (V2) instead of `action` (V3) - Including `eval()` or inline scripts that CSP blocks - Requesting unnecessary permissions

Building the Popup UI with AI

The popup is what users see when they click your extension icon. Let's build a clean, functional popup using AI.

Prompt for Cursor or Claude Code: "Create a Chrome extension popup UI for an AI page summarizer. The popup should be 350px wide with: 1. A header with the extension name and icon 2. A 'Summarize This Page' button 3. A loading state with a spinner 4. A summary display area with scrolling for long summaries 5. A copy-to-clipboard button for the summary 6. An error state with a retry button 7. Clean, modern styling with a dark theme Use vanilla HTML/CSS/JS — no frameworks."

The popup.html structure: AI generates a clean HTML file with: - A container div with sections for each state (idle, loading, result, error) - Only one section visible at a time using CSS classes - Proper loading spinner using CSS animation - Scroll container for long summaries

The popup.js logic: ```javascript document.getElementById('summarize-btn').addEventListener('click', async () => { showLoading(); try { const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); const response = await chrome.tabs.sendMessage(tab.id, { action: 'getContent' }); const summary = await chrome.runtime.sendMessage({ action: 'summarize', content: response.content }); showSummary(summary.text); } catch (error) { showError(error.message); } }); ```

The flow: Button click -> get page content from content script -> send to background for AI processing -> display the summary.

Styling tips for extensions: - Keep the popup width between 300-400px (wider feels awkward) - Use system fonts for fast rendering - Add a subtle shadow and border-radius for a modern look - Make the copy button prominent — it's the primary action after reading the summary

Testing the popup: Go to `chrome://extensions`, enable Developer Mode, click "Load unpacked," select your project folder. Click the extension icon to see your popup.

Content Scripts with AI: Extracting Page Data

Content scripts run inside web pages and can read the DOM. Our content script extracts the page's text content for summarization.

The content.js script:

```javascript chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { if (request.action === 'getContent') { const content = extractPageContent(); sendResponse({ content }); } return true; // Required for async sendResponse }); ```

The extractPageContent function is where AI really helps. Extracting useful text from a webpage is surprisingly complex:

```javascript function extractPageContent() { // Remove script, style, nav, footer, and ad elements const clone = document.body.cloneNode(true); const removeSelectors = 'script, style, nav, footer, header, aside, .ad, .sidebar, .menu, .navigation'; clone.querySelectorAll(removeSelectors).forEach(el => el.remove()); // Get text content and clean it let text = clone.innerText; text = text.replace(/\s+/g, ' ').trim(); // Truncate to reasonable length (LLMs have context limits) if (text.length > 15000) { text = text.substring(0, 15000) + '\n[Content truncated for summarization]'; } return text; } ```

The background.js service worker handles the AI API call:

```javascript chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { if (request.action === 'summarize') { summarizeWithAI(request.content) .then(summary => sendResponse({ text: summary })) .catch(error => sendResponse({ error: error.message })); return true; } }); ```

API key management: Store the API key in `chrome.storage.sync` so it persists across sessions. Add a settings page where users can enter their own API key. Never hardcode API keys in extension code — anyone can read your extension's source.

Content script gotchas that AI often misses: - The `return true` in the message listener is required for async responses - Content scripts run in an isolated world — they can't access the page's JavaScript variables - Some pages block content scripts (Chrome Web Store, chrome:// pages) - Dynamic pages (SPAs) may need MutationObserver to detect content changes

Publishing to the Chrome Web Store

Publishing your extension makes it available to millions of Chrome users. The process is straightforward but has specific requirements AI can help you prepare for.

Step 1: Prepare Store Assets

Prompt AI: "Generate the following descriptions for my AI Page Summarizer Chrome extension: 1. Short description (132 characters max) 2. Detailed description (16,000 characters max) with features, benefits, and how-to 3. Privacy policy explaining what data the extension collects and how it's used"

Required assets: - Extension icons: 16x16, 48x48, 128x128 PNG - Store icon: 128x128 PNG - Screenshots: 1280x800 or 640x400 (minimum 1, recommended 5) - Promotional tile: 440x280 PNG (optional but recommended)

Step 2: Create a Developer Account - Go to the Chrome Web Store Developer Dashboard - Pay the one-time $5 registration fee - Verify your email address

Step 3: Package and Upload - Zip your extension folder (exclude any `.git` or `node_modules` directories) - Upload the zip to the Developer Dashboard - Fill in the store listing details (use your AI-generated descriptions) - Select the category (Productivity, for our summarizer) - Upload screenshots and icons

Step 4: Privacy and Permissions Justification - Google requires you to justify every permission your extension requests - Explain why you need `activeTab` (to read the current page for summarization) - Explain why you need `storage` (to save user API key and preferences) - Submit a privacy policy URL (you can host this on GitHub Pages for free)

Step 5: Submit for Review Google reviews all extensions before publishing. Review takes 1-3 business days. Common rejection reasons: - Requesting unnecessary permissions - Missing privacy policy - Misleading descriptions - Extension doesn't work as described

After publishing: Monitor reviews and ratings. Use AI to draft responses to user feedback. Update regularly — extensions that stop getting updates eventually lose visibility in the store.

CodeLeap bootcamp students build and publish a real Chrome extension as part of the curriculum — it's a portfolio piece that demonstrates practical AI development skills to employers.