Claude Code is Anthropic's official AI coding agent, used by developers at companies from startups to Fortune 500. Learn more →

How to Create a Chrome Extension with Claude Code

Build browser extensions without writing code. Describe what you want in plain English, and Claude Code generates the manifest, popup, scripts, and everything else you need.

You can create a fully working Chrome extension with Claude Code by describing what you want in plain English — no JavaScript or Chrome API knowledge required. Claude Code generates the manifest, popup, scripts, and permissions automatically. You load the result into Chrome and start using it right away.

This guide walks you through building your first extension, from a simple popup to content scripts and background workers. Claude Code is powered by Claude Opus 4.6 and understands the full Chrome Extensions API, including Manifest V3, service workers, and the permissions system — so you focus on what the extension should do, not how browsers work under the hood.

What You Can Build

Chrome extensions come in several flavors. Here's what you can create with Claude Code:

• Popup extensions — Click the icon, see a small interface. Great for quick tools, notes, timers, or utilities.
• Content scripts — Modify any webpage. Change colors, hide elements, add features to sites you visit.
• Background workers — Run tasks in the background. Track time, monitor tabs, send notifications.
• Storage extensions — Save data locally. Bookmarks, notes, settings that persist.
• Tab managers — Control browser tabs. Group them, search them, save sessions.

You can also combine these. A productivity extension might have a popup for quick access, content scripts to modify pages, and background workers to track your time.

What You'll Need

• Claude Code installed — See installation guide if you haven't set it up
• Google Chrome browser — Or any Chromium-based browser (Edge, Brave, Arc)
• A folder for your project — Just an empty folder on your computer

No JavaScript knowledge required. No understanding of Chrome's extension APIs. Claude handles all of it.

Step-by-Step: Building Your First Extension

Let's build a productivity extension that helps you save and organize quick notes while browsing.

mkdir quick-notes-extension
cd quick-notes-extension

claude

Create a Chrome extension called "Quick Notes" that:
- Has a popup when you click the extension icon
- Lets me type a quick note and save it
- Shows a list of my saved notes
- Each note shows the page URL where I created it
- I can delete notes I don't need anymore
- Notes are saved locally so they persist
- Clean, minimal design with a light theme

> Make the popup wider, about 350px
> Add a timestamp to each note showing when it was created
> The save button should be disabled when the input is empty
> Add keyboard shortcut - Enter key should save the note
> Change the delete button to a small X icon
> Add a search box to filter notes

Understanding Extension Structure

While Claude handles the details, it helps to know what each file does:

manifest.json

This is the extension's configuration file. It tells Chrome:

• The extension name and description
• What permissions it needs
• What files to use for the popup, icons, and scripts
• Which websites content scripts should run on

{
  "manifest_version": 3,
  "name": "Quick Notes",
  "version": "1.0",
  "description": "Save quick notes while browsing",
  "permissions": ["storage", "activeTab"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icons/icon48.png"
  }
}

Popup Files

The popup is what users see when clicking your extension icon. It's just HTML, CSS, and JavaScript, like a tiny webpage.

I walk through the complete build process — including project setup and prompting patterns — in my free guide.

Content Scripts

These run on web pages and can modify them. Useful for extensions that change how websites look or work.

Background Workers

These run in the background, handling events like tab changes, alarms, or messages between parts of your extension.

More Extension Examples

Page Modifier (Content Script)

Create a Chrome extension that:
- Removes all ads and sponsored content from Twitter/X
- Hides the "Who to follow" sidebar
- Makes the timeline wider
- Adds a toggle button to turn the modifications on/off
- Remember the toggle state between sessions

Tab Manager

Create a Chrome extension that:
- Shows all open tabs in a searchable list
- I can type to filter tabs by title or URL
- Clicking a tab in the list switches to it
- I can close tabs from the list
- Shows tab count in the extension badge
- Groups tabs by domain

Reading Mode

Create a Chrome extension that:
- Adds a "Reading Mode" button to the toolbar
- When clicked, it simplifies the current page
- Remove navigation, ads, sidebars
- Just show the main article content
- Use a clean, readable font
- Add a button to exit reading mode

Color Picker

Create a Chrome extension that:
- Lets me pick any color from any webpage
- Click the extension icon, then click anywhere on the page
- Shows the color in HEX, RGB, and HSL formats
- Copy the color code with one click
- Save recent colors in a history list

Adding Advanced Features

Keyboard Shortcuts

Add a keyboard shortcut to open the extension popup.
Use Ctrl+Shift+N (or Cmd+Shift+N on Mac)

Context Menu Integration

Add a right-click context menu option.
When I right-click selected text, show "Save to Quick Notes"
Clicking it saves the selected text as a new note

Notifications

Add browser notifications.
Show a notification when a note is saved successfully.
Make it subtle - disappear after 3 seconds

Sync Across Devices

Use Chrome sync storage instead of local storage.
This way my notes sync across all my Chrome browsers
when I'm signed into my Google account

Test with Claude's Chrome Integration (Beta)

Claude Code now integrates with the Claude in Chrome browser extension, giving you browser automation capabilities directly from the CLI. Once connected, Claude can:

• Open your extension's popup and interact with it
• Read browser console output, including errors and network requests
• Navigate to test pages and verify content script behavior
• Take screenshots of your extension in action

This means you can build, test, and debug your extension without constantly switching between the terminal and browser. The Chrome integration is available in beta to all paid plan users (Pro, Max, Team, and Enterprise). Note that it currently works with Google Chrome only—not yet with Brave, Arc, or other Chromium browsers.

Testing Your Extension

Common Mistakes to Avoid

1. Forgetting to reload: After changes, you must reload the extension in chrome://extensions. Changes don't apply automatically.
2. Missing permissions: If features don't work, you might need additional permissions. Ask Claude: "This feature isn't working, do I need more permissions?"
3. Too many permissions: Only request permissions you actually need. Users are wary of extensions that ask for excessive access.
4. Not testing the popup size: Chrome has limits on popup dimensions. If your popup is too big, parts may be cut off.
5. Ignoring manifest version: Make sure Claude uses Manifest V3 (the current standard). Manifest V2 is no longer accepted by the Chrome Web Store and existing V2 extensions have been disabled. Always verify "manifest_version": 3 in your manifest.json.

Use a CLAUDE.md for Extension Projects

For complex extensions, create a CLAUDE.md file in your project folder so Claude follows consistent patterns. Claude reads this file at the start of every session.

# Chrome Extension Project

## Rules
- Always use Manifest V3
- Use chrome.storage.sync for user settings
- Use chrome.storage.local for large data
- Content scripts must not break existing page functionality
- All permissions must be justified in code comments
- Extension popup max width: 400px, max height: 600px

## Structure
- /src/popup/ - popup HTML, CSS, JS
- /src/content/ - content scripts
- /src/background/ - service worker
- /icons/ - extension icons in 16, 48, 128 sizes

Publishing to the Chrome Web Store

Ready to share your extension with the world?

Prepare Your Extension

Prepare this extension for Chrome Web Store publishing:
- Add proper icons in 16, 48, and 128 pixel sizes
- Add a detailed description for the store listing
- Make sure the manifest has all required fields
- Create promotional screenshots

Publishing Steps

1. Create a Chrome Developer account ($5 one-time fee)
2. Zip your extension folder
3. Upload to the Developer Dashboard
4. Fill in the store listing details
5. Submit for review (usually takes a few days)

FAQ

Can I create a Chrome extension with Claude Code without coding experience?

Yes. Claude Code generates all the code for your Chrome extension including the manifest.json, popup HTML, and JavaScript files. You describe what you want in plain English, and Claude creates everything needed.

What types of Chrome extensions can I build with Claude Code?

You can build popup extensions, content scripts that modify web pages, background workers, extensions with storage and settings, tab managers, and productivity tools. Claude Code handles all the complexity of the Chrome extension architecture.

How do I test a Chrome extension built with Claude Code?

Go to chrome://extensions in your browser, enable Developer mode, click "Load unpacked", and select your extension folder. Chrome loads your extension immediately. Click the refresh icon to reload after making changes.

Will my extension work in other browsers like Edge or Brave?

Yes. Most Chromium-based browsers (Edge, Brave, Arc, Opera) support Chrome extensions. The same files work across all of them with minimal or no changes.

How do I update my extension after publishing?

Make your changes with Claude Code, increment the version number in manifest.json, zip the folder, and upload the new version to the Chrome Developer Dashboard. Updates usually review faster than initial submissions.

Can Claude Code test my extension in the browser automatically?

Yes. Claude Code's Chrome integration (beta) lets Claude open tabs, interact with your extension popup, read console output, and verify behavior—all from the terminal. Install the Claude in Chrome extension and connect it to Claude Code to enable this workflow.

Which Claude model is best for building extensions?

Claude Code uses Claude Opus 4.6 by default, which handles the full Chrome Extensions API well. For quick iterations on styling or small popup changes, Claude may delegate read-only tasks to the faster Haiku 4.5 model via its built-in subagent system.

Related Guides

• How to Install Claude Code — get set up first
• Build a Website with Claude Code — web development basics
• Build an API with Claude Code — backend development
• Claude Code for Non-Coders — more project ideas