How to build a Chrome extension with Claude Code

Chrome extensions are one of the most overlooked products a builder can ship. They are small in scope, fast to build, and have instant access to over 3 billion Chrome users worldwide. The Chrome Web Store handles distribution. Publishing costs a one-time fee of roughly GBP4. And unlike a SaaS product that needs a landing page, onboarding flow, and payment infrastructure before anyone can use it, a Chrome extension can go from idea to installed in a single session.

If you have been looking for a first product to build with AI tools, this is it.

This guide walks through the entire process: picking an extension idea, building it with Claude Code, testing it locally, publishing to the Chrome Web Store, and making money from it. Real steps, not theory.

---

Why Chrome extensions are a great first product

Most first-time builders make the same mistake. They pick a project that is too big. A full SaaS app with auth, billing, dashboards, and an API. Three months later, they are still building and have zero users.

Chrome extensions flip that dynamic:

Small scope. A useful extension can be 200-500 lines of code. Claude Code can produce that in a single conversation. You are not building a platform — you are solving one specific problem inside the browser.

Instant distribution. The Chrome Web Store has over 200,000 extensions and millions of daily installs. Users search for solutions, find your extension, and install it in two clicks. No marketing funnel required (though marketing helps).

Low barrier to monetisation. Chrome supports in-extension payments, and you can integrate Stripe for subscriptions. Extensions with 5,000-10,000 users and a freemium model can realistically generate GBP500-2,000/month.

Portfolio piece. Even if your first extension does not make money, it proves you can ship a product. That matters when you build something bigger later.

Compounding returns. Extensions stay in the store indefinitely. An extension published today can still be generating installs in 2028 with minimal maintenance.

---

What to build: picking an extension idea

The best Chrome extensions solve a specific, recurring annoyance. Not a grand vision — a small, sharp pain point.

Good extension ideas:

• Tab manager — group, save, and restore tab sessions. Power users have 30+ tabs open and lose track.
• SEO meta checker — one-click audit of any page's meta title, description, headings, and Open Graph tags.
• Bookmark organiser — auto-tag and categorise bookmarks. Chrome's built-in bookmark manager has not changed meaningfully in years.
• Price tracker — monitor product prices on UK shopping sites and alert when prices drop.
• Reading time estimator — show estimated reading time on any article page. Simple but useful.
• Quick note taker — highlight text on any page and save it to a sidebar with the source URL.

How to validate before building:

1. Search the Chrome Web Store for your idea. Are existing extensions rated poorly (under 3.5 stars)? That is your opening — build a better version.
2. Check the review count. Extensions with fewer than 1,000 reviews in a popular category suggest room for competition.
3. Read the 1-star reviews on competing extensions. Users tell you exactly what is broken. Build the thing that fixes those complaints.

For this tutorial, we will build a SEO meta checker — an extension that shows you the meta title, meta description, heading structure, and Open Graph tags for any page in one click.

---

Setting up your project

You need two things installed:

• Node.js (download from nodejs.org, free)
• Claude Code (included with Claude Pro, roughly GBP18/month)

Install Claude Code if you have not already:

npm install -g @anthropic-ai/claude-code

Create your project directory:

mkdir seo-meta-checker && cd seo-meta-checker
claude

You are now in a Claude Code session, ready to build.

---

Step 1: Write the brief

The quality of your extension depends on the quality of your brief. Be specific about what the extension should do, how it should look, and what permissions it needs.

Here is the brief for our SEO meta checker:

Build a Chrome extension called "Meta Check" using Manifest V3.

What it does:
- When the user clicks the extension icon, a popup appears showing:
  1. Page meta title (with character count, flagged red if over 60 chars)
  2. Meta description (with character count, flagged red if over 160 chars)
  3. All heading tags (H1-H6) listed in order with their text
  4. Open Graph tags (og:title, og:description, og:image)
  5. Canonical URL
  6. Robots meta tag content

Design:
- Clean, minimal popup - 400px wide, scrollable
- Dark background (#1a1a2e), light text (#eaeaea)
- Each section in a card with subtle border
- Copy-to-clipboard button next to each value
- Colour-coded: green for good, amber for warning, red for issues

Technical:
- Manifest V3
- Content script to read page metadata
- Popup UI in HTML/CSS/JS (no framework needed)
- No external API calls - everything runs locally
- Permissions: activeTab only (minimal permissions = faster review)

Paste this into Claude Code and let it work. It will create the file structure, write the manifest, build the content script, and create the popup UI.

---

Step 2: Understand what Claude Code generates

Claude Code will create several files. Here is what each one does:

manifest.json — the configuration file every Chrome extension needs. It declares the extension name, version, permissions, and which scripts to run. Manifest V3 is the current standard — V2 was deprecated in 2024.

Key fields:

{
  "manifest_version": 3,
  "name": "Meta Check",
  "version": "1.0.0",
  "permissions": ["activeTab"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }]
}

content.js — runs on the web page and extracts metadata. This script reads the DOM to find meta tags, headings, and Open Graph data.

popup.html / popup.css / popup.js — the interface users see when they click the extension icon. The popup sends a message to the content script, receives the metadata, and displays it.

Manifest V3 basics you should know:

• Service workers replace background pages. If your extension needs persistent background logic, it uses a service worker (declared in manifest.json).
• activeTab permission — the most privacy-friendly permission. It only grants access to the current tab when the user clicks your extension icon. No access to browsing history, no access to other tabs.
• Content Security Policy — V3 is stricter about inline scripts. All JavaScript must be in separate .js files, not inline in HTML.

---

Step 3: Test locally in Chrome

This is where it gets satisfying. You can test your extension immediately without publishing it.

1. Open Chrome and navigate to chrome://extensions/
2. Toggle Developer mode (top right corner)
3. Click Load unpacked
4. Select your extension's project folder

Your extension appears in the toolbar. Click it on any web page and the popup shows the metadata.

Iterating with Claude Code:

The first version will not be perfect. That is fine. Test it on a few different websites and note what needs fixing.

Common iteration prompts:

• "The heading extraction misses H1 tags inside shadow DOM elements. Fix the content script to handle this."
• "Add a total word count for the page body text."
• "The popup is too narrow on pages with long meta descriptions. Make it 450px wide and add text wrapping."
• "Add an export button that copies all the metadata as formatted text to the clipboard."

Each time you make changes with Claude Code, go to chrome://extensions/ and click the refresh icon on your extension to reload it. Changes appear instantly.

---

Step 4: Polish before publishing

Before submitting to the Chrome Web Store, tick these off:

Icon. You need icons at 16x16, 48x48, and 128x128 pixels. Ask Claude Code: "Generate a simple SVG icon for an SEO meta checking tool — a magnifying glass over a code bracket. Then create PNG exports at 16, 48, and 128px." Alternatively, use a free tool like Figma to create one.

Description. Write a clear Chrome Web Store description:

• First line: what the extension does in one sentence
• Bullet points: 3-5 key features
• Last line: what makes it different from alternatives

Screenshots. Take 2-3 screenshots of your extension in action. Chrome Web Store listings with screenshots get significantly more installs.

Privacy policy. Required if your extension collects any data. For our meta checker (which processes everything locally), a simple statement works: "Meta Check does not collect, store, or transmit any user data. All processing happens locally in your browser."

Ask Claude Code to generate a simple privacy policy page if needed:

Create a minimal privacy policy HTML page for a Chrome extension 
that processes data locally and does not collect or transmit 
any user information.

---

Step 5: Publish to the Chrome Web Store

1. Go to the Chrome Web Store Developer Dashboard
2. Pay the one-time registration fee ($5, roughly GBP4)
3. Click New Item
4. Upload a ZIP of your extension folder (exclude node_modules if present)
5. Fill in the listing details: name, description, category, screenshots, icons
6. Set the visibility (public or unlisted)
7. Submit for review

Review timeline: Expect 1-3 business days. Simple extensions with minimal permissions (like our activeTab-only meta checker) typically pass quickly. Extensions requesting broad permissions face more scrutiny.

Common rejection reasons:

• Description does not accurately describe what the extension does
• Missing privacy policy when permissions require it
• Icon is too similar to an existing brand
• Extension requests more permissions than it needs

If rejected, Google provides a reason. Fix the issue and resubmit — there is no penalty for resubmission.

---

Step 6: Monetisation options

Your extension is live. Now, how do you make money from it?

Freemium (recommended)

Offer core features for free. Charge for premium features.

For our meta checker example:

• Free: basic meta tag analysis, heading structure, OG tags
• Premium (GBP2.99/month or GBP24.99/year): bulk page analysis, export to CSV, historical tracking, competitor comparison

This is the most common model for successful extensions. Users try the free version, get value from it, and upgrade when they hit the limits.

How to implement: Use Stripe for payment processing. Claude Code can build a simple licence key system — user pays via Stripe, receives a licence key, enters it in the extension settings. The extension checks the key on startup.

Ask Claude Code:

Add a premium tier to this extension. Free users get basic 
meta tag analysis. Premium users (verified by a licence key 
stored in chrome.storage.sync) also get: bulk analysis of 
all pages in open tabs, CSV export, and a history panel 
showing the last 50 analyses.

One-time purchase

Simpler than subscriptions. Charge GBP4.99-9.99 for the full extension. Works well for utility extensions that solve a permanent problem.

Pros: Users prefer paying once. No churn. Cons: No recurring revenue. You need a constant stream of new users.

Chrome Web Store Payments

Google offers a built-in payments system for extensions. It takes a 5% commission. This is the simplest payment integration but gives you less control than Stripe.

Realistic revenue expectations

Revenue depends on your niche, marketing effort, and how well the extension solves the problem.

Users	Conversion Rate	Price (Monthly)	Monthly Revenue
1,000	3%	GBP2.99	GBP90
5,000	3%	GBP2.99	GBP449
10,000	4%	GBP2.99	GBP1,196
25,000	5%	GBP2.99	GBP3,738

These are realistic numbers for well-maintained extensions in useful niches. The growth curve is slow at first (expect 100-500 installs in your first month) and accelerates as reviews accumulate and Chrome Web Store search rankings improve.

---

Growing your extension after launch

Publishing is not the finish line. Here is how to drive installs:

Optimise your listing. Chrome Web Store has its own search algorithm. Include relevant keywords in your extension name, short description, and full description. "SEO Meta Checker - One-Click Page Audit" ranks better than "Meta Check."

Get reviews. After 5-10 days of use, show a subtle prompt asking happy users to leave a review. Do not be aggressive — one prompt, easy to dismiss. Extensions with 10+ positive reviews rank significantly higher in search.

Write about it. Publish a blog post about why you built the extension and what problem it solves. Share in relevant communities. Our guide to finding your first SaaS customers covers UK-specific channels that work for any product launch.

Post on Product Hunt. Extensions do well on Product Hunt. The maker community appreciates small, useful tools. See our guide on launching on Product Hunt from the UK for timing and preparation tips.

Iterate based on reviews. Read every review. Users will tell you exactly what features to add next. The extensions that grow fastest are the ones that visibly respond to user feedback.

---

Building more extensions with the same workflow

Once you have shipped one extension, the second is faster. You already understand the Manifest V3 structure, the Chrome Web Store publishing process, and how to test locally.

Many successful extension builders run a portfolio of 3-5 extensions targeting different niches. Each takes a weekend to build with Claude Code. Collectively, they generate a meaningful side income.

The workflow is always the same:

1. Find a browser-based annoyance with poor existing solutions
2. Write a clear brief for Claude Code
3. Build and test in an afternoon
4. Polish and publish
5. Iterate based on reviews

Vibe coding makes this entire cycle possible in a weekend. The constraint is no longer your coding speed — it is your ability to identify problems worth solving.

---

Common mistakes to avoid

Requesting too many permissions. Only ask for the permissions you actually need. Extensions with "access all websites" or "read browsing history" scare users away and face longer review times. Our meta checker only needs activeTab — the minimum.

Ignoring mobile. Chrome extensions do not work on Chrome for Android or iOS. Your extension is desktop-only. This is fine — just know your addressable market and do not spend time optimising for mobile.

Feature creep. The best extensions do one thing well. Resist the urge to add features until users ask for them. A focused extension with five stars beats a bloated one with three stars.

Skipping the privacy policy. Even if your extension processes everything locally, include a privacy policy. It builds trust and prevents a common rejection reason during review.

Not updating. Extensions that have not been updated in over a year start losing rankings. Push a small update every few months — even if it is just a version bump and minor polish.

---

What to build next

If the SEO meta checker is not your thing, here are five extension ideas validated by Chrome Web Store search data:

1. Tab session manager — save and restore groups of tabs. High demand, existing solutions are clunky.
2. Screenshot and annotate — full-page screenshot with annotation tools. Existing options are ad-heavy.
3. Email template manager — quick-insert email templates in Gmail. Business users love this.
4. Colour picker and palette generator — extract colours from any webpage. Designers search for this constantly.
5. Focus mode — block distracting sites during work hours. Productivity niche with high retention.

Each of these can be built in a weekend with Claude Code. The extension that wins is not the one with the most features — it is the one that solves the problem most cleanly. For tool comparison context, see our Cursor vs Claude Code breakdown to understand which AI coding tool fits your workflow best.

---

This week's free report: AI Website Accessibility Monitor with EAA Compliance

Score: 7.1/10 - read the full breakdown

Every Thursday we publish a new data-backed UK business opportunity. Subscribe free to get it in your inbox.