Build a Chrome Extension with Claude Code
Create a useful Chrome extension from scratch — popup UI, content scripts, and Chrome APIs. Publish it to the Chrome Web Store.
Chrome extension architecture in 5 minutes
A Chrome extension has three parts: a manifest.json file that declares permissions and entry points, a popup (the small window that appears when you click the extension icon), and optional content scripts (JavaScript that runs on web pages). The manifest tells Chrome what your extension can do — access tabs, modify pages, store data, make network requests. The popup is a small HTML page with its own CSS and JavaScript. Content scripts inject into other websites and can read or modify the page. Claude Code handles all of this. You describe the feature and Claude Code creates the manifest, popup, and content scripts. Start Claude Code and say: "Create a Chrome extension that [your idea]. Use Manifest V3. Set up the project with a popup and content script."
Project: AI-powered page summariser
Let us build something useful. Ask Claude Code: "Create a Chrome extension that summarises the current web page. When the user clicks the extension icon, it should extract the main content from the page, send it to an API endpoint, and display a summary in the popup. Use the Anthropic API directly. Include a settings page where the user can enter their API key." Claude Code will create the manifest, content script for extracting text, popup UI for displaying the summary, background service worker for API calls, and options page for settings. This is a real, useful extension that you will actually use.
Handling permissions, storage, and messaging
Chrome extensions communicate between parts via message passing. The content script reads the page and sends data to the background worker. The background worker processes it and sends results to the popup. Ask Claude Code: "Explain how the message passing works in this extension and add error handling for cases where the content script cannot access the page (like Chrome internal pages). Also add Chrome storage to cache summaries so we do not re-summarise pages we have already seen." Claude Code adds the caching layer and error handling, making the extension production-quality.
Testing and debugging extensions
Load your extension locally: go to chrome://extensions, enable Developer Mode, click "Load unpacked", and select your extension folder. Click the extension icon to test the popup. Visit a web page to test the content script. Check the console for errors — the popup has its own DevTools (right-click the popup and select Inspect). Ask Claude Code: "Add console logging at each stage of the extension — content script extraction, message passing, API call, and popup rendering — so I can debug the flow." Debugging extensions is different from web apps, and these logs will save you time.
Publishing to the Chrome Web Store
Ask Claude Code: "Prepare this extension for Chrome Web Store submission. Create promotional images (describe the dimensions), write the store listing description, create a privacy policy page, and ensure the manifest has all required fields for store submission." Claude Code will prepare everything. You need a Chrome Web Store developer account (one-time five dollar fee). Upload the zip, fill in the listing with the generated copy, and submit for review. Your extension will be live in the Chrome Web Store within a few days.
Browser Automation
This guide is hands-on and practical. The full curriculum covers the conceptual foundations in depth with structured lessons and quizzes.
Go to lesson