howtocodeai.com
Tutorials / Intermediate

Build a Chrome Extension With AI in an Afternoon

Extensions are just small web pages with permissions. Build one that actually improves your browsing — with AI writing the manifest, the popup, and the logic.

DifficultyIntermediate
Time2–3 hours
You'll needClaude or ChatGPT · Chrome · A folder on your computer
You'll buildA working Chrome extension installed in your own browser — a page highlighter, a distraction blocker, a quick-notes popup, or your own idea.

Here's what nobody tells you about browser extensions: they're made of exactly the same stuff as the websites you've already built — HTML, CSS, JavaScript — plus one JSON file that tells Chrome what the extension is allowed to do. No store approval needed to run your own. If you can build a web page with AI, you can build an extension today.

Step 1 — Pick something that scratches your own itch

The best first extensions do one small thing: hide YouTube comments, add a word counter to every text box, save the current page to a reading list, show a motivational quote on every new tab. One feature. You can always add more once the skeleton works.

Step 2 — Generate the whole extension

Build a complete Chrome extension using Manifest V3. Purpose: [a popup with a button that saves the current page's title and URL to a reading list, displayed in the popup, stored with chrome.storage.local]. Give me every file with its exact filename: manifest.json, popup.html, popup.js, and anything else needed. Request only the minimum permissions required, and explain in one line why each permission is needed. Clean, modern popup design, ~320px wide.

Worth knowing'Manifest V3' matters — it's the current extension format. If the AI produces 'manifest_version: 2', tell it to redo in V3; Chrome is phasing V2 out and the APIs differ.

Step 3 — Install your unpacked extension

Make a folder, save each file the AI gave you with the exact filename. Then in Chrome: chrome://extensions → toggle Developer mode (top right) → Load unpacked → select your folder. Your extension's icon appears in the toolbar. This loop — edit files, click the refresh icon on the extension card — is your whole development cycle.

Step 4 — Debug the extension way

Extensions have two consoles: right-click the popup → Inspect for popup errors, and the 'Errors' button on the extension card in chrome://extensions for everything else. Same debugging rule as always: copy the red text, paste it into the chat, get the full corrected file back.

Step 5 — Add the power feature: content scripts

Popups are nice; content scripts are where extensions get interesting — JavaScript that runs inside the pages you visit. Ask the AI to 'add a content script that [highlights every occurrence of a keyword I set in the popup]'. It will update the manifest permissions and add a file. Review what new permissions it requests before reloading — that's your security habit forming.

Step 6 — Keep it or ship it

For personal use, you're done — it lives in your browser forever. Publishing to the Chrome Web Store costs a one-time $5 developer fee, requires a privacy policy and store listing, and takes a few days of review. Worth it if your itch turns out to be everyone's itch — niche extensions with a few thousand users are a real micro-business category.

Keep going

Need somewhere to put it live? See where to host AI-built sites. Compare tool costs on the pricing tracker (or stick to the free options), then pick your next build.