Build a Chrome Extension with Claude Code: From Zero to Published

Build a Chrome Extension with Claude Code: From Zero to Published

In this episode of our Build With AI series you'll learn how to design, build, test, and publish a Chrome extension using Claude Code as your co‑pilot. As we covered in our previous guides — building a blog in an hour and creating a SaaS landing page with Cursor — the goal here is practical: get from an idea to a live Chrome Web Store listing.

Photo by AS Photography on Pexels | Source

Why a Chrome extension, and why Claude Code?

Extensions are small, focused apps that run in the browser and can dramatically improve user workflows. With Manifest V3 (Chrome's current extension architecture) you get a secure, performant environment that uses service workers instead of persistent background pages. Claude Code (Anthropic's code-focused Claude model — part of the Claude family) is great for scaffolding files, writing manifest.json, generating content scripts, and iterating on prompts and tests.

Quick facts you should know before we start:

• Chrome requires Manifest V3 for new extensions (security and performance benefits).
• Developer registration to publish in the Chrome Web Store is a one-time fee of $5 USD (as of 2026).
• Recommended local tooling: Node.js LTS (20.x is a safe choice in 2026) and a code editor like VS Code.

Extension architecture: the pieces that matter

A modern Chrome extension (Manifest V3) typically contains:

• manifest.json — the single source of truth describing your extension and permissions.
• service worker (background worker) — event-driven JS that responds to runtime events.
• content scripts — JS injected into web pages to interact with DOM.
• popup UI / options page — HTML/CSS/JS for user interfaces.
• icons and assets — required sizes for the Web Store and in-extension UI.

Permissions are the most sensitive part: request only what you need. Excessive permissions slow review and erode trust.

Photo by Pixabay on Pexels | Source

Step 1 — Scaffold with Claude Code

Use Claude Code to bootstrap a folder structure and manifest. Prompt example (short):

• Ask Claude Code to create a minimal Manifest V3 manifest.json for an extension that shows a popup and injects a content script on example.com.
• Ask it to write a service worker that listens for messages and a popup HTML with a simple button.

What to expect in the scaffold:

• manifest.json with "manifest_version": 3, action (popup), background.service_worker, content_scripts, icons, and permissions.
• src/ with background.js, content.js, popup.html, popup.js, and icons/

Sample manifest keys (illustrative):

• "manifest_version": 3
• "name", "version", "description"
• "action": { "default_popup": "popup.html" }
• "background": { "service_worker": "background.js" }
• "content_scripts": [ { "matches": ["://.example.com/*"], "js": ["content.js"] } ]
• "permissions": ["storage", "scripting"]

Claude Code helps by generating these files and explaining permissions and messaging patterns.

Step 2 — Implement core features and APIs

Key Chrome APIs under Manifest V3:

• chrome.storage.sync / chrome.storage.local — store user settings.
• chrome.scripting — programmatically inject scripts and CSS at runtime.
• chrome.runtime & chrome.tabs — messaging and tab management.
• chrome.action — control the extension action (toolbar button).

Best practices:

1. Use chrome.scripting to inject or update content scripts at runtime instead of dynamic remote code.
2. Keep heavy work out of the UI; the service worker can coordinate but is event-driven and may stop when idle.
3. Avoid eval() or dynamic code loaded from remote hosts — the Web Store disallows remote code execution.

Use Claude Code to generate message handlers and example storage usage. For example, ask Claude Code to create a pattern that:

• Saves a user preference in chrome.storage.sync.
• Sends a message from popup.js to background.js to trigger a content-script update with chrome.scripting.executeScript.

Step 3 — Local testing & debugging

Testing locally is simple and essential:

1. Open chrome://extensions and enable Developer mode.
2. Click Load unpacked and select your extension folder.
3. Test the popup and actions. Use the Extensions page to inspect the service worker (click "background page" or "service worker" link) and check console logs.

Tips:

• Use console.log in popup.js, content scripts, and the service worker for quick debugging.
• When updating background/service_worker code, click the Reload button on chrome://extensions to ensure the worker is updated.

Claude Code can help generate unit tests or simple Cypress/Puppeteer scripts to automate basic UI flows.

Photo by Bernd 📷 Dittrich on Unsplash | Source

Step 4 — Prepare for publishing (policy, privacy, icons)

Before you publish, prepare:

• A clear privacy policy URL if you use user data or permissions like storage, cookies, or identity.
• High-resolution icons: recommended 128x128 for the store, plus 48x48 and 16x16 for the extension UI.
• A concise description and feature list.
• Screenshots or a short promo video (optional but helpful for installs).

Policy notes:

• Explain exactly what data you collect and how you use it.
• Be explicit about permissions and offer a way for users to opt out where possible.
• Avoid misleading claims — Google’s review will check function vs. description.

Step 5 — Package and submit to the Chrome Web Store

Submission steps (high-level):

1. Zip your extension folder (include manifest.json at root of the zip).
2. Go to the Chrome Web Store Developer Dashboard and pay the one-time $5 USD developer registration (if you haven’t already).
3. Create a new item, upload the zip, add icons/screenshots, fill in description and details, and set the category and languages.
4. Declare permissions in the listing and provide your privacy policy URL.
5. Submit for review.

Review times vary: expect anything from several hours to a few days depending on permissions and the review queue. If your extension requests sensitive permissions (like host-level access), prepare to justify the need.

Using Claude Code in review and iteration

Claude Code is useful for:

• Generating clear privacy policy text tailored to your extension’s data flows.
• Writing concise store descriptions and bullet lists of features.
• Proposing minimal permission sets and code changes to reduce requested permissions.

Remember: the Web Store wants behavior that matches your listing. Use Claude Code to create a checklist for reviewers and generate reproducible steps to demonstrate your extension.

Post-publish: updates, analytics, and support

After publication:

• Monitor user feedback and crash reports. Provide a timely response to privacy or security concerns.
• Publish updates by incrementing the version in manifest.json and uploading a new package.
• If you need monetization, integrate a third‑party payment processor; the Chrome Web Store’s internal payments have evolved — check current Google documentation for available options.

Security checklist (quick)

• No remote code execution; all executable JS must be packaged.
• Limit permissions; use host permissions only when necessary.
• Validate and sanitize any data coming from web pages before using it in privileged contexts.

Wrap-up and next steps

You’ve now got the blueprint: scaffold with Claude Code, implement Manifest V3 components, test locally, prepare assets and privacy text, then upload to the Chrome Web Store and iterate. As in Episodes 1 and 2, AI tools accelerate scaffolding and documentation — you still own the review, testing, and user trust overhead.

Want a template to start? Use Claude Code to generate a minimal MV3 scaffold, then adapt it to your feature set. If you enjoyed this guide, check Episode 1: Build a Blog with AI in 1 Hour and Episode 2: Build a SaaS Landing Page with Cursor to see how we applied AI across different product types.

Happy building — and remember to keep permissions minimal and your users’ data private.

References and resources

• Chrome Extension Manifest V3 documentation — search for "Manifest V3" on developer.chrome.com
• Chrome Web Store developer documentation and dashboard — developer.chrome.com/webstore
• Anthropic (Claude Code) documentation and API pricing — check anthropic.com for up-to-date details

Frequently Asked Questions

Do I have to use Manifest V3?

Yes — Chrome requires Manifest V3 for new extensions. Manifest V3 provides better security and performance through service workers and stricter policies.

How long does Web Store review take?

Review times vary; most straightforward extensions are reviewed in hours to a few days. Extensions requesting sensitive permissions may take longer due to additional checks.

Can Claude Code write my entire extension?

Claude Code can scaffold files, generate example code, and help with documentation, but you should review, test, and adapt all generated code to meet security and privacy requirements.

How much does it cost to publish?

Developer registration for the Chrome Web Store is a one-time $5 USD fee (as of 2026). Additional costs depend on hosting, analytics, or third-party services you choose.