How I built a Chrome extension with Claude Code in one weekend

/

I wanted a tool that summarizes Hacker News comments into a TL[DR. Saturday morning I described it to Claude Code. Sunday evening I had a working Chrome extension in the store. Here is the exact process, the mistakes, and the prompt template that made it work.

How does Claude Code handle a Chrome extension project?

Claude Code generated the manifest.json, content script, service worker, and popup HTML in one session. I gave it a single prompt: “Build a Chrome extension that reads the current page, sends the text content to an LLM API, and shows a summary in a popup.” It produced 4 files working on first try. The extension loaded in Chrome and summarized my test page in under 2 minutes. Read about the tooling in my Claude Code review.

What part of a Chrome extension does AI handle poorly?

The service worker lifecycle. Claude Code created a service worker that worked in development but failed after 30 seconds of inactivity – Chrome terminates idle service workers and the AI did not handle the wake-up event. I fixed it by adding chrome.runtime.onStartup and chrome.storage.session for state persistence. This type of production-hardening detail is where AI consistently falls short. I cover this in my production readiness article.

🔧 Chrome Extension — Item Split
manifest.json AI Perfect v3 compliance
Content script AI Handled DOM extraction
Service worker AI + manual fix Missed wake-up event
Popup UI AI Functional, needed styling
Web Store Manual Screenshots + listing

How do you debug a Chrome extension the AI built?

Chrome DevTools is your only option. Open chrome://extensions, find your extension, click service worker link. The console there shows all errors. I found 3 issues this way: a missing API key check, an unhandled promise rejection, and a CSP violation. All three were fixed by pasting the error back to Claude Code. I explain the full approach in my debugging guide.

🔥Controversial take

Chrome extension development is the perfect AI use case. It has a well-defined API, small file count, and clear entry points. If you are learning AI coding, build an extension first, not a SaaS.

Copy-paste: Chrome extension starter prompt
Build a Chrome extension (Manifest V3) that:
1. Shows a browser icon
2. When clicked, opens a popup
3. Reads the current page content
4. Sends content to API endpoint at [URL]
5. Displays the response in the popup
Files needed: manifest.json, popup.html, popup.js, content.js, service-worker.js Permissions: activeTab, scripting, storageUse fetch() for API calls. Style with plain CSS.
💡 Coach channel: Add the API endpoint URL right in the prompt. If you leave it generic, the AI will use a placeholder and you have to fix it manually.

References

  1. Claude Code Review – Vibe Coding Channel
  2. How to Debug AI Code – Vibe Coding Channel
  3. Vibe Coding in Production – Vibe Coding Channel
  4. Chrome Extension Documentation

Leave a Reply

Your email address will not be published. Required fields are marked *