Build a Chrome Extension With Claude Code

Decide What the Extension Does

Do not start by building a large browser tool. A good first Chrome extension should solve one clear problem. For this guide, we will build a simple Website SEO Checker. When the user opens a website and clicks the extension, it should inspect the current page and show:

- Page title

- Meta description

- H1

- Canonical URL

- Robots meta

- Open Graph title

- Open Graph description

- Open Graph image

It should also clearly indicate when something important is missing.

Example Output

For example:

Title

✅ AI Website Builder — Example

Meta Description

❌ Missing

H1

✅ Build Websites With AI

Why Start With Something Simple?

A Chrome extension can do much more, but features such as:

- Account systems

- Cloud storage

- Paid subscriptions

- External AI APIs

- Complicated browser automation

would make the first project unnecessarily difficult.

The SEO Checker works entirely inside the browser. No database or hosting is required.

Create the Project

Create an empty folder for the project and open it in Claude Code. Then use:

Build the Website SEO Checker Extension

Builds a complete Manifest V3 Chrome extension with a popup showing page title, meta description, H1 count, canonical URL, robots meta, and Open Graph fields, each with a clear Missing state, plus the current page URL and a Refresh/Recheck button. Requires minimal permissions, no remote code, no external APIs, no analytics, no backend, and no authentication. Creates the manifest, popup HTML/CSS/JS and icon placeholders, validates the manifest, inspects permissions, explains the project structure, and gives exact local-load instructions — without publishing anything. Finishes with a READY / NOT READY verdict.

Build a complete Chrome extension called: Website SEO Checker The extension should inspect the currently active webpage and display important on-page SEO information. Use the current Chrome Extensions platform and Manifest V3. The extension should have a simple popup that shows: Page Title - current title - character count - clear Missing state when unavailable Meta Description - current description - character count - clear Missing state H1 - first H1 - number of H1 elements on the page - warn if there is no H1 Canonical URL - display the canonical URL - show Missing when none exists Robots Meta - display the current robots meta value - show a clear default/Not Found state when unavailable Open Graph Show: - og:title - og:description - og:image Clearly indicate missing values. Also include: - current page URL - a Refresh / Recheck button Design requirements: - clean professional popup - approximately 380-420px wide - easy-to-scan sections - clear success/warning/missing states - readable typography - no unnecessary animation Technical requirements: - use Manifest V3 - request only the minimum Chrome permissions actually required - keep all JavaScript and CSS inside the extension package - do not load remote executable code - do not use external APIs - do not use analytics - do not collect browsing history - do not transmit page content anywhere - do not add a backend - do not add authentication Keep the project easy for a beginner to understand. Create all required files including: - manifest.json - popup HTML - popup CSS - popup JavaScript - extension icons/placeholders if needed After building it: 1. validate the manifest 2. inspect the permissions 3. explain the project structure 4. tell me exactly how to load the extension locally in Chrome Do not publish anything. Finish with: Extension build: READY / NOT READY

NOTE

Chrome's current extension platform uses Manifest V3, and every extension requires a manifest.json at the root of the extension package. Google also requires packaged extension code rather than remotely hosted executable JavaScript.

Open Chrome Extensions Documentation

https://developer.chrome.com/docs/extensions/

Review the Permissions

Before testing, use this prompt:

Review Extension Permissions

Reviews every permission in manifest.json, explains why each is required and exactly what feature uses it, removes anything not genuinely necessary, and never expands access merely for convenience. Finishes with a MINIMAL / NEEDS REVIEW verdict.

Review this Chrome extension's permissions. For every permission in manifest.json, explain: - why it is required - exactly what feature uses it Remove any permission that is not genuinely necessary. Do not expand the extension's access merely for convenience. Finish with: Permissions: MINIMAL / NEEDS REVIEW

Keeping permissions narrow is especially important for extensions because users are granting them access inside their browser.

Load the Extension

You do not need to publish the extension to test it. Chrome officially supports loading an unpacked extension during development. Open Chrome and go to:

chrome://extensions

ADDRESS BAR

Then:

Enable Developer mode Click Load unpacked Select the folder containing the extension Pin the extension to the Chrome toolbar

The extension should now appear in your browser.

Test It on a Real Website

Open a website. Click the Website SEO Checker extension. You should immediately see the page information. Test a few different pages:

A normal website

A page missing a meta description

A page with an H1

A page without an H1

One of your own websites

Compare With the Real HTML

Do not assume the extension is correct just because the interface looks good. Open the page source or DevTools and compare:

HTML

<title>Example Title</title>

with:

Extension

Example Title

Do the same for:

- Meta description

- H1

- Canonical

- Open Graph data

Fix Any Problems

Use:

Test and Fix Extension Logic

Tests the extension logic against several different webpage structures, verifying title/meta description/H1 count/canonical/robots meta/Open Graph accuracy, that missing elements report as missing instead of showing stale values, that switching tabs never shows the previous page's data, and that Refresh/Recheck always reads the current active page. Handles pages Chrome blocks extension access to gracefully, fixes only genuine parsing/UI problems, adds no new features, and keeps permissions minimal. Finishes with a PASS / ISSUES REMAIN verdict.

Test the Chrome extension logic against several different webpage structures. Fix only genuine parsing or UI problems. Verify: - page title is read correctly - meta description is read correctly - H1 count is accurate - canonical URL is accurate - robots meta is accurate - Open Graph fields are accurate - missing elements are reported as missing rather than displaying stale values - switching between tabs does not show data from the previous page - Refresh / Recheck uses the current active page Also handle pages where Chrome prevents extension access gracefully. Do not add new features. Keep permissions minimal. Finish with: Extension test: PASS / ISSUES REMAIN

NOTE

After modifying the manifest or core extension scripts, Chrome may require you to reload the unpacked extension from the Extensions page before testing again.

Polish the Interface

Once the functionality works, improve the interface without turning it into a large project.

Polish the Extension UI

Improves visual hierarchy, spacing, readability, long-URL handling, character-count presentation, Missing/Found states, popup scrolling, and keyboard accessibility, without adding accounts, AI, external APIs, cloud storage, analytics, browsing-data collection, or unrelated SEO features — preserving existing functionality and minimal permissions. Runs a final code review and finishes with a READY / NOT READY verdict.

Polish the Website SEO Checker Chrome extension without expanding its scope. Improve: - visual hierarchy - spacing - readability - long URL handling - character-count presentation - Missing / Found states - popup scrolling if required - keyboard accessibility Make the extension feel like a small professional browser utility. Do not: - add accounts - add AI - add external APIs - add cloud storage - add analytics - collect browsing information - add unrelated SEO features Preserve the existing functionality and minimal permissions. Then run a final code review. Finish with: Extension UI: READY / NOT READY

Add Proper Icons

Before sharing or publishing the extension, replace temporary icons with your own extension icon. Use a simple icon that remains recognizable at small sizes.

NOTE

Do not reuse another extension's logo or branding.

Run the Final Audit

Use:

Final Production-Readiness Audit

Runs a final production-readiness audit of the Chrome extension: manifest (Manifest V3, correct name/description/version, working icon paths, minimal permissions), the SEO checker itself (title/meta description/H1 count/canonical/robots meta/Open Graph detection, correct missing-value handling, data always from the currently inspected page), privacy & security (no external transmission, no history storage, no analytics, no remote executable code, no secrets), UX (popup opens correctly, long titles/URLs don't break layout, Refresh/Recheck works, understandable errors), and code quality (no unnecessary dependencies, no dead code, no important runtime errors) — without adding new functionality. Finishes with a READY / NOT READY verdict.

Run a final production-readiness audit of this Chrome extension. Verify: Manifest - Manifest V3 is used - name and description are correct - version is valid - icon paths work - permissions are limited to what the extension actually needs SEO Checker - title detection works - meta description detection works - H1 detection and count work - canonical detection works - robots meta detection works - Open Graph detection works - missing values are handled correctly - data always comes from the currently inspected page Privacy & security - no page content is transmitted externally - no browsing history is stored - no analytics was added - no external executable JavaScript is loaded - no API keys or secrets exist UX - popup opens correctly - long titles and URLs do not break the layout - Refresh / Recheck works - errors are understandable Code quality - there is no unnecessary dependency - there is no dead code - there are no important runtime errors Do not add new functionality during this audit. Finish with: Chrome Extension status: READY / NOT READY If NOT READY, list only the remaining problems.

Publishing Is Out of Scope for This Guide

For this guide, we do not need to publish to the Chrome Web Store. The payoff already happens here:

Claude Code → files created → Load unpacked → extension appears → open a website → click → SEO report appears

If you later want to make the extension public, Chrome provides a separate Chrome Web Store publishing process. Manifest V3 is the current supported extension format.

Open Chrome Web Store Developer Docs

https://developer.chrome.com/docs/webstore/

Keeping publishing outside the main guide also prevents it from becoming a long lesson about store listings, verification, privacy disclosures, and review.

Ideas to Try Next

Once you understand this workflow, you can reuse it for much more interesting ideas:

- Word counter

- Color picker

- Link checker

- Heading checker

- Image alt-text checker

- Page information viewer

- Copy-cleaner

- Tab organizer

- Reading helper

- Website notes tool

THE REAL LESSON

The real lesson is not "Build an SEO extension." It is: Build your own Chrome extension with Claude Code. The SEO Checker is simply a practical demo that works without external infrastructure.