Build a Chrome Extension With AI (No Code Experience)

A Chrome extension is not a demo. When you click the icon and it does something — saves a URL, counts words, highlights text — that's a real browser tool running inside your real browser. It ships in a folder of three files. AI will generate all three from a single prompt.

The success condition for this guide is simple: your extension loads in Chrome with zero errors. Everything else is a bonus.

If you're working through your first AI project, the PokeAPI beginner guide is a good companion — it covers the same "one prompt, one working thing" approach for a different project shape.

What You'll Build — and Why a Chrome Extension Is the Best First Shipping Project

Most beginner projects live in a terminal or a browser tab you close and forget. A Chrome extension lives in your browser toolbar. You see it every session. Other people can install it. That gap between "I made a thing" and "I shipped a thing" is smaller here than almost anywhere else.

The success condition: it loads in Chrome with no errors

When you open chrome://extensions/ and see your extension listed without a red error banner, you've shipped. The feature can be small — one button, one action. The point is that it works in a real environment, not just in your editor.

What the three core files actually do (30-second mental model)

Every Chrome extension, from a simple tab saver to a full ad blocker, starts with the same three files:

manifest.json — the extension's ID card. Chrome reads this first. It tells the browser what your extension is named, what version it is, and what permissions it needs.
popup.html — the small page that appears when a user clicks your extension's icon in the toolbar. This is your UI.
popup.js — the JavaScript that runs inside the popup. Button clicks, API calls, tab manipulation — it all lives here.

That's the whole mental model. You don't need to understand the Chrome extension system deeply before you start. You need to understand these three files, what they're responsible for, and not confuse them.

Pick Your Tool: Claude Code or Cursor

Both tools will generate the three files from a single prompt. The difference is how much setup they require and how you interact with them.

For a detailed breakdown of which tool fits which workflow, read the Cursor vs Claude Code comparison for beginners.

When to use Cursor (visual, in-IDE, no terminal setup needed)

is the right starting point if you're not comfortable in a terminal. It's a code editor — you open a folder, open the chat panel, paste your prompt, and Cursor creates the files directly in your project. You see the output in the editor sidebar. No shell, no Node, no installation beyond Cursor itself.

Cursor has a free Hobby tier that covers everything you need for this project — 2,000 completions and 50 slow premium requests per month, no credit card required. Generating three files and iterating on them comfortably fits within those limits.

When to use Claude Code (terminal-first, faster for file generation)

runs in your terminal. You navigate to an empty folder, run claude, and give it the scaffold prompt. It writes the files, explains what it created, and waits for your next instruction. The whole thing happens faster than switching windows in an IDE.

Claude Code requires a paid Claude plan (Pro at $20/month or Max). If you're already subscribed, it's the faster path.

Step 1 — Write the One Prompt That Scaffolds Everything

You don't need to write code. You need to write one clear prompt. The AI generates the files; your job is to tell it exactly what the extension should do so the output isn't a generic placeholder.

Before you write the prompt, read the guide to writing better AI coding prompts. The short version: be specific about what the button does, not just that there is a button.

The prompt template (copy-paste ready)

Paste this into Claude Code or the Cursor chat panel. Replace the bracketed section with your actual idea.

Create a Chrome extension using Manifest V3. The extension should have a popup with a single button that [does one specific thing — e.g., "saves the current tab's URL to a list displayed in the popup"]. 

Generate three files:
- manifest.json (Manifest V3, with the minimum required fields and any permissions needed)
- popup.html (a clean, minimal popup with a button and a results area)
- popup.js (the logic for the button click, using the chrome.tabs API if needed)

Do not use any external libraries or build tools. All three files should work when loaded as an unpacked extension in Chrome.

The "no external libraries" instruction is important. A beginner Chrome extension has no build step. If the AI generates code that imports from npm, you'll hit errors immediately because there's no bundler in place.

What files the AI will create and why

The AI should output exactly three files. If it outputs more — a background.js, a content.js, an options.html — that's fine for more complex projects, but for your first extension, push back and ask it to simplify to the three core files. Fewer files means fewer things to debug.

Step 2 — Understand the Three Files Before You Touch Anything

Read the files before you run anything. You don't need to understand every line. You need to understand the shape of each file — what it controls — so that when something breaks, you know where to look.

manifest.json — the extension's ID card

Chrome requires Manifest V3 for all new Web Store submissions. For local development, use V3 from the start — Google began disabling MV2 extensions in Chrome stable in mid-2025 (Chrome 139+), including side-loaded unpacked extensions. MV2 is no longer a reliable development target.

A minimal Manifest V3 file looks like this:

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  }
}

The three truly required fields are manifest_version, name, and version. The action field is not required by the spec but you need it to display a popup when the user clicks your toolbar icon — so treat it as required for this project. If your extension needs to read the current tab's URL, you'll also need a permissions field:

"permissions": ["tabs"]

The AI prompt above should add this automatically if you described a tab-related action. Scan the manifest to confirm it's there if your feature needs it.

popup.html — what the user sees when they click the icon

This is standard HTML. No framework, no build step, no CDN required. The AI will generate something like a <button> and a <div> to display results. The only Chrome-specific constraint: you cannot use inline JavaScript (no onclick="..." on HTML elements). All JavaScript must live in an external file and be loaded via a <script src="popup.js"> tag at the bottom of the body.

If the AI generates inline event handlers, ask it to move them to popup.js using addEventListener. Inline scripts are blocked by Chrome's Content Security Policy in Manifest V3.

popup.js — what happens when they interact

This file runs inside the popup window's context. It has access to Chrome's extension APIs (like chrome.tabs to get the current URL) but not to the page the user is visiting — that requires a content script, which is a more advanced topic. Keep your first extension to popup-only logic and you'll avoid the most common confusion.

Step 3 — Side-Load the Extension in Chrome

"Side-loading" means loading your extension directly from your local folder, without going through the Chrome Web Store. This is how all extension development works — you build locally, test locally, publish when it's ready.

Enable Developer Mode

Open a new tab and go to chrome://extensions/
In the top-right corner, toggle Developer mode to on
Three buttons will appear: Load unpacked, Pack extension, Update

The Developer mode toggle is in the top-right of the extensions page. If you don't see it, make sure you're on chrome://extensions/ and not the Chrome Web Store.

Load unpacked — selecting the right folder

Click Load unpacked. A file picker opens. Navigate to the folder where the AI created your three files — the folder itself, not any individual file. Click Select Folder.

Chrome reads the manifest.json from that folder and loads the extension. Your extension icon should appear in the Chrome toolbar (you may need to click the puzzle-piece icon and pin it).

Confirming it loaded without errors

On the chrome://extensions/ page, your extension card should show:

Its name (from manifest.json)
A toggle to enable/disable it
No red "Errors" button

If there's a red Errors button, click it. Chrome shows you the exact error and the file/line number. Copy that error message and paste it back into Claude Code or Cursor — that's the fastest path to a fix.

Step 4 — Make It Do Something Real

The scaffold prompt gives you a working structure. Now you iterate with the AI to add the feature you actually care about.

Extension idea #1: save the current tab's URL to a list

This is the most beginner-friendly feature because it only needs the tabs permission and all the logic lives in popup.js. When the user clicks the button, the extension gets the current tab's URL and appends it to a list displayed in the popup.

Prompt to add this feature:

In popup.js, add a click handler to the button that:
1. Gets the URL of the current active tab using chrome.tabs.query
2. Appends that URL as a new list item inside a <ul> element in popup.html
3. Keeps the list in memory for the session (no storage needed yet)

Update manifest.json to include the "tabs" permission if it's not already there.

Extension idea #2: add a floating word-count badge to any page

This feature requires a content script — a JavaScript file that injects into the page the user is visiting. It's one step more complex but still beginner-accessible.

Prompt to add this feature:

Add a content script to the extension that:
1. Counts the number of words on the current page by reading document.body.innerText
2. Displays the count in a fixed-position badge in the bottom-right corner of the page

Update manifest.json to declare the content script with "matches": ["<all_urls>"] and add "scripting" to permissions if needed.

After updating the files, go back to chrome://extensions/ and click the reload icon on your extension card. Changes to content scripts require a reload to take effect.

Prompting the AI to add each feature iteratively

Treat the AI like a pairing partner, not a code dispenser. After each change, load the extension, test it, and report back what happened. "The button click doesn't show any URLs — here's the error from the console" is a better prompt than "it doesn't work." The more specific the input, the faster the fix.

When Things Break — The Two Most Common Errors and How to Fix Them

The guide to fixing AI-generated code covers the full debugging playbook, but Chrome extensions have two errors that show up constantly for beginners.

"Manifest file is missing or unreadable"

This error appears on the chrome://extensions/ page when Chrome can't find or parse manifest.json in the folder you selected.

Two causes:

You selected the wrong folder. You may have selected a parent folder or a subfolder. The folder you load must contain manifest.json at its root — not inside a subdirectory.
The JSON is malformed. Paste the contents of manifest.json into a JSON validator (or ask the AI to check it). A trailing comma or a missing quote is enough to break it.

Fix: ask the AI "does this manifest.json have any syntax errors?" and paste the file contents. It will spot the issue immediately.

Permissions errors and how to update manifest.json

If your extension tries to use a Chrome API without declaring the matching permission in manifest.json, Chrome blocks it silently — no visible error, the feature just does nothing.

Example: calling chrome.tabs.query without "tabs" in permissions. The API call fails silently.

Fix: tell the AI which API you're using and ask it to confirm the correct permission string. Then add it to manifest.json, save the file, and click the reload icon on your extension card. You don't need to re-load unpacked after the initial load — just reload.

What's Next — Publishing to the Chrome Web Store (Optional)

Once your extension loads cleanly and does what you intended, you have a real project to point to. Publishing it to the Chrome Web Store is optional — many developers keep extensions private or share them as zip files — but it's a natural next step if you want other people to install it.

Publishing requires a one-time Chrome Web Store developer registration fee of $5. After that, there's no per-extension cost for free extensions.

Before you publish, commit the project to git. The git survival guide for vibe coders covers the minimum you need — init a repo, make your first commit, push to GitHub. It takes ten minutes and means you have a recoverable history before you start touching the Chrome Web Store submission flow.

Publishing itself involves uploading a zip of your extension folder, filling in a store listing (name, description, screenshots), and waiting for a review that typically takes a few days. The AI can help you write the store description — give it your manifest.json and a one-sentence summary of what the extension does.

The Chrome extension is built. It loads. That's the line. Everything after this is optional polish.