quiccsite

Using AI Coding Agents to Build a Chrome Extension from Scratch

2026-04-01

Chrome extensions are a sweet spot for AI coding agents — much like building a mobile app, the project scope is small, the file structure is well-defined, and the APIs are thoroughly documented. This tutorial walks through building a page summarizer extension from first prompt to Chrome Web Store submission, using an AI coding agent like Claude Code.

Start with a clear first prompt

The quality of your initial prompt determines how much back-and-forth you will need. Be specific about what the extension should do, but let the agent handle implementation details.

A good starting prompt:

Build a Chrome extension called "Quick Summary" that adds a button to the browser toolbar. When clicked, it extracts the main text content from the current tab, sends it to an API endpoint for summarization, and displays the result in a popup. Use Manifest V3. The popup should have a clean, minimal design with a loading state.

This gives the agent enough to scaffold the entire project in one pass. You will get back a manifest.json, a popup HTML file with its associated CSS and JavaScript, and a content script for extracting page text.

What the agent generates

A typical scaffold from this prompt includes four or five files:

The manifest is where most of the important decisions happen. The agent will declare permissions like activeTab and scripting, set up the default popup, and register the content script. Review this file carefully even if you trust the agent with everything else.

Iterating on the UI

The first version of the popup will work but probably look generic. This is the essence of vibe coding and where conversational iteration shines. You can say things like:

Make the popup 400px wide. Add a dark mode that follows the system preference. Show the summary in a scrollable container with a max height of 300px. Add a copy-to-clipboard button below the summary.

The agent will update popup.html, styles.css, and popup.js in a single pass. Each round of feedback gets you closer to a polished result without manually editing CSS.

You can also paste a screenshot of a design you like and ask the agent to match that style. This tends to produce better results than describing colors and spacing in words.

Adding permissions correctly

Chrome extensions require explicit permission declarations, and this is an area where AI agents occasionally get it wrong. Common mistakes include requesting broader permissions than necessary or forgetting to declare a permission that the code actually uses.

If your content script needs to run on all pages, the agent might add <all_urls> to the host permissions. For a summarizer that only runs when the user clicks the toolbar button, activeTab is sufficient and will not trigger a scary permission warning during installation.

Ask the agent to explain why each permission is needed. If it cannot justify one, remove it.

Testing locally

Loading an unpacked extension is straightforward but the agent cannot do it for you. Here is the manual part:

  1. Open chrome://extensions in your browser
  2. Enable "Developer mode" in the top right
  3. Click "Load unpacked" and select your extension directory
  4. Click the extension icon in the toolbar to test

When something breaks, copy the error from the Chrome DevTools console and paste it back to the agent. Include the full stack trace. The agent is good at diagnosing these errors because Chrome extension error messages are usually specific enough to pinpoint the problem.

Common issues AI agents hit with Chrome extension APIs

Manifest V3 service workers vs background pages. Manifest V3 replaced persistent background pages with service workers. Agents trained on older documentation sometimes generate "background": { "page": "background.html" } instead of "background": { "service_worker": "background.js" }. If you see your background script not running, check the manifest format first.

Service worker lifecycle. Service workers in Manifest V3 are not persistent. They spin down after about 30 seconds of inactivity. Agents sometimes write code that stores state in global variables inside the service worker, which gets lost when the worker restarts. The fix is to use chrome.storage.local for any state that needs to persist.

Content Security Policy. Manifest V3 does not allow inline scripts in extension pages. If the agent generates a popup with <script> tags inline in the HTML, Chrome will silently block them. The fix is straightforward: move all JavaScript to external files and reference them with src attributes. Most agents get this right on the first try, but it is worth checking.

Message passing between contexts. Extensions run code in multiple isolated contexts: the popup, the content script, and the service worker. They communicate through chrome.runtime.sendMessage and chrome.tabs.sendMessage. Agents occasionally confuse which API to use in which context, or forget to set up the listener on the receiving end. If the summarizer popup is not receiving text from the content script, check that both sides of the message channel are wired up.

The scripting permission. To programmatically inject a content script using chrome.scripting.executeScript, you need the scripting permission in the manifest. Agents sometimes declare the content script in the content_scripts array but then also try to inject it programmatically without adding this permission.

Publishing to the Chrome Web Store

Once the extension works locally, publishing requires a few extra steps the agent can help with:

  1. Ask the agent to generate a ZIP file of the extension directory, excluding any development files
  2. Create promotional images -- you need at least a 128x128 icon and a 1280x800 screenshot
  3. Write a store listing description (the agent is good at this)
  4. Create a Chrome Web Store developer account (one-time $5 fee)
  5. Upload the ZIP, fill in the listing details, and submit for review

Review typically takes one to three business days. Extensions requesting minimal permissions tend to get approved faster.

Tips for working with the agent

For complex extensions, use plan mode to design the architecture before generating code. Keep your extension directory as the working context so the agent can see all files at once. When reporting bugs, include the exact error message and which context it appeared in (popup console, background service worker, or content script). Ask the agent to add console.log statements at key points if you need to trace message flow between contexts.

Chrome extensions are one of the most satisfying things to build with an AI coding agent. The project is small enough to hold in a single conversation, the feedback loop is fast, and you end up with something you actually use every day.