Build a Chrome Extension with AI: A Step-by-Step Guide

You can build a Chrome extension with AI by describing one small job to your editor, letting it generate a Manifest V3 project, and loading that folder into Chrome in developer mode. A first working version usually takes an afternoon. Cursor, Claude Code, Windsurf or any similar tool will do the job.

Extensions suit vibe coding because they're small. They're a few files, there's no server, and you can test by clicking the toolbar icon. The catch is that Chrome is strict about permissions and file structure, and AI editors get those details wrong in predictable ways. This guide covers how to avoid that.

What an extension is made of

Every extension starts with manifest.json, which tells Chrome what your extension is and what it's allowed to do. The rest is ordinary web code. Know these four parts so you can tell the AI which one you need:

• Manifest: name, version, permissions and which files do what.
• Popup: the small HTML page that opens when someone clicks your icon.
• Content script: JavaScript that runs inside a web page and can read or change it.
• Service worker: the background script that listens for events. In Manifest V3 it replaces the old background pages.

Manifest V3 is the only version you need to care about. One 2026 practical guide puts it bluntly: for a new extension, V3 is the only option. Older tutorials, and the AI's training data, still contain plenty of V2 patterns, so you'll have to watch for them.

Step 1: Pick one job

The most common failure is asking for too much. "A productivity extension with AI summaries, tab groups and a dashboard" will produce a pile of code you can't debug. Pick one behavior, such as:

• Highlight every link on a page that opens in a new tab.
• Add a "copy as Markdown" button for the current page's title and URL.
• Hide the sidebar on a site you use daily.
• Show word count and reading time for the selected text.

Write it as a single sentence: "When I do X on site Y, Z happens." If you can't, the idea is still too fuzzy.

Step 2: Give the AI a tight first prompt

Start in an empty folder. Name the manifest version, list the files you expect, and tell the AI to ask for the fewest permissions possible. Here's a prompt you can paste and adapt:

Build a Chrome extension using Manifest V3 (not V2).

Goal: when I click the toolbar icon, copy the current tab's
title and URL to my clipboard as a Markdown link, and show
"Copied!" in the popup.

Constraints:
- Plain HTML, CSS and JavaScript. No frameworks, no build step.
- Files: manifest.json, popup.html, popup.js, icons/ folder.
- Request the fewest permissions possible. Explain each one
  you add and why.
- No inline scripts in popup.html (MV3 blocks them).
- No remote code, no external network requests.

After writing the files, give me a checklist for loading it
in chrome://extensions and what I should see.

The "no inline scripts" line is there for a reason. Manifest V3 disallows inline scripts in extension pages, and AI editors still sometimes put a <script> block straight into the popup HTML. If that happens, Chrome just won't run it, and the error can be easy to miss.

Step 3: Load it in Chrome

You don't need the Web Store to test. Do this:

1. Open chrome://extensions in your address bar.
2. Turn on Developer mode (top right).
3. Click Load unpacked and pick your project folder.
4. Pin the extension from the puzzle-piece menu so the icon stays visible.

One thing that trips people up: according to this loading guide, from Chrome 134 onward unpacked extensions only stay enabled while the Developer mode toggle is on. If your extension vanishes or turns off after a restart, check the toggle before you blame your code.

After each AI edit, go back to the Extensions page and hit the reload button on your extension's card. It's an easy step to forget. A lot of "the AI's fix didn't work" moments are just a stale copy of the extension.

Step 4: Debug by pasting real errors

Where you look depends on which part is failing:

What's broken	Where to look
Extension won't load at all	The red Errors button on its card in chrome://extensions
Popup misbehaves	Right-click the popup, choose Inspect, open the Console
Background logic fails	Click the service worker link on the extension card
Page changes don't happen	Open DevTools on the page itself and check the Console for content script errors

Copy the exact error text and paste it into your editor along with the file it came from. "It doesn't work" gets you guesses. "Uncaught TypeError at popup.js line 12" gets you a fix. Include what you expected to happen, too.

Where AI usually goes wrong

• Mixing V2 and V3. You'll see background.scripts, browser_action or permissions stuffed where host_permissions should go. A CSS-Tricks migration guide covers the differences: service workers replace background pages, and host permissions get their own field.
• Over-asking for permissions. It will cheerfully add <all_urls> when activeTab would do. Ask it to justify every permission, and cut any it can't.
• Storing state in global variables. The service worker can shut down and restart. Tell the AI to use chrome.storage for anything that needs to persist.
• Invented APIs. If a chrome.something call throws "is not a function", check it against the official Chrome extension docs. Don't just ask the AI to try again.
• Remote code. Anything that loads a script from a CDN is likely to cause trouble at review time. Bundle it locally instead.

Step 5: Iterate in small slices

Once the basic version works, commit it to git. Then make one change per prompt: add a keyboard shortcut, then save a setting, then add an options page. After each one, reload and test. If something breaks, you can roll back to the last commit and you'll know what caused it.

A good follow-up prompt looks like this:

The extension works. Now add an options page where I can pick
the output format (Markdown or plain text), saved with
chrome.storage.sync. Only change the files needed. Don't add
new permissions except "storage". Tell me which files changed.

Step 6: Publish (optional)

You can use an extension forever in developer mode without publishing. If you want others to install it, you'll need a Chrome Web Store developer account. Registration is a one-time $5 fee, per this 2026 publishing guide. The same guide notes that two-step verification is required on the Google account, and that publishing is blocked without it.

Before you upload, get these ready:

• A zip of the folder containing only the files the extension needs.
• A 128×128 PNG icon, plus the screenshots and description for the store listing.
• A short privacy statement that matches what your code actually does. If the AI added analytics or network calls, find them and decide whether you want them.
• A version number in manifest.json that goes up with every update. Chrome rejects same-or-lower versions.

Review times and rejection reasons vary, so treat the first submission as a learning round. Read the policy emails you get. Don't hand-wave them away.

A quick pre-flight checklist

1. The manifest says "manifest_version": 3.
2. Every permission has a reason you can say out loud.
3. No inline scripts, no remote code.
4. You've tested on a few different sites, not just the one you built it for.
5. The code is in git, and you've read the diff, not just the summary.

FAQ

Do I need to know JavaScript to build a Chrome extension with AI?

Not to get started, but you do need to be able to read what the AI writes. Extensions are plain HTML, CSS and JavaScript, so the code is small enough to skim. You'll still need to spot a permission that shouldn't be there or a V2 pattern that slipped in, and the more JavaScript you know, the faster you'll catch these.

Which AI editor is best for Chrome extensions?

I haven't found evidence that one editor is clearly better at this. What matters more is the prompt: state Manifest V3, keep the scope small, and paste real errors back. Pick whichever tool you already use. Switch only if you keep hitting the same wall after giving it clear context.

Can I test my extension without publishing it?

Yes. Go to chrome://extensions, turn on Developer mode and click Load unpacked. Reload the extension after each change. You only need a Web Store account when you want other people to install it from the store.

Cover photo: Daniil Komov on Unsplash