Chrome extensions are one of the most satisfying things to build with AI. They’re self-contained, they solve a real problem you have right now, and when they work, they work every day without you thinking about them.
I built my first AI-assisted Chrome extension in about five hours. It’s a simple tool that adds a keyboard shortcut for saving the current tab’s URL and title to a Notion database. Unglamorous, but I use it every single day.
The build process for Chrome extensions is different from apps or websites — the structure is more rigid, the debugging happens in Chrome DevTools, and the deployment involves the Chrome Web Store review process. This guide covers all of it.
What Chrome extensions can do
Before picking an idea, it helps to know what extensions are actually capable of. The main categories:
- Modify page content: Add, remove, or change elements on any webpage. Useful for blocking distractions, reformatting content, adding features to existing sites.
- Capture page data: Read the URL, title, selected text, or any visible content on the current tab.
- Add keyboard shortcuts: Trigger actions on any page via hotkeys.
- Add a popup interface: A small UI that appears when you click the extension icon.
- Call external APIs: Send data to or receive data from any web service. This is where extensions get powerful — save to Notion, post to Slack, query an AI model.
- Persistent background tasks: Run code even when a specific tab isn’t active. Useful for monitoring or notification-type extensions.
What extensions can’t do: they can’t access your file system (beyond user-initiated file downloads), they can’t run fully offline without limitations, and they can’t do anything that would require elevated OS permissions.
Understanding extension structure
You don’t need to memorize this, but understanding it helps you write better prompts and debug more effectively.
Every Chrome extension is a folder of files. The four key ones:
Manifest.json
The blueprint. Tells Chrome what your extension is, what permissions it needs, which files do what, and which version of the extensions API you’re using. Always use Manifest V3 (MV3) — MV2 is being phased out.
Popup.html (and popup.js)
The UI that appears when a user clicks your extension icon. This is optional — some extensions have no visible UI — but most do. It’s just HTML/CSS/JavaScript.
Content_script.js
Code that runs in the context of web pages. This is what lets you read or modify page content. Runs on the pages you specify in your manifest.
Background.js (service worker)
Code that runs in the background, independently of any specific tab. Handles events like keyboard shortcuts, tab changes, or messages from content scripts.
That’s it. A Chrome extension is a small web app with a specific structure and some special browser APIs. Which means AI can generate it.
Generating the code with AI
I use Claude for Chrome extension code, not Bolt. Chrome extensions have a specific structure that Bolt isn’t optimized for — Claude handles it better because you can be precise about the manifest version, permissions, and file structure in your prompt.
My prompt template:
“Build a Chrome extension (Manifest V3) that [exact description of what it does]. Requirements: [list specific behaviors]. Permissions needed: [only what’s necessary]. Include all required files: manifest.json, popup.html, popup.js, content_script.js (if needed), background.js (service worker, if needed). The manifest should request only the minimum permissions required. Annotate the code with comments explaining what each section does.”
Example for a “save to Notion” extension:
“Build a Chrome extension (Manifest V3) that saves the current tab’s title and URL to a Notion database via the Notion API when the user clicks the extension icon. Requirements: a popup with a ‘Save to Notion’ button and a status message. The Notion API key and database ID should be entered in an options page. Permissions needed: activeTab, storage. Include all required files: manifest.json, popup.html, popup.js, options.html, options.js. Annotate the code.”
Claude will generate all the files with their content. Copy each one into a folder on your computer — that folder is your extension.
Testing locally in Chrome
You don’t need to publish to the Chrome Web Store to test your extension. Chrome lets you load unpacked extensions directly from your file system.
Steps:
- Open Chrome and go to
chrome://extensions - Enable “Developer mode” (toggle in the top right)
- Click “Load unpacked”
- Select your extension folder
- Your extension appears in the toolbar
Every time you make a change to the code, click the refresh icon on your extension card in chrome://extensions to reload it. Changes to the popup don’t require a reload — just close and reopen the popup.
Test methodically:
- Does the popup open?
- Do buttons do what they’re supposed to?
- Does it work on the target site/URL?
- Does it handle edge cases (empty inputs, API errors, etc.)?
Debugging with AI
Chrome extensions have three separate DevTools contexts, which confuses everyone the first time:
- Popup DevTools: Right-click the extension popup → Inspect. For debugging popup.js.
- Background DevTools: Go to
chrome://extensions, click “Service Worker” under your extension. For debugging background.js. - Page DevTools: Normal F12 DevTools on any tab. For debugging content_script.js.
When something breaks, check the console in the relevant DevTools context first. Copy the error message, go back to Claude, and paste it with context:
“My Chrome extension is throwing this error in the popup console: [paste error]. Here is my popup.js: [paste code]. What’s causing this and how do I fix it?”
This fixes 80% of extension bugs on the first try. The remaining 20% usually come down to permission issues (you need a permission you didn’t declare in the manifest) or Manifest V3 syntax changes (some V2 APIs no longer work in V3). Both are fixable — Claude knows the differences.
Publishing to the Chrome web store
If you want your extension publicly available (or just want to install it on multiple devices without developer mode), you’ll need to publish it.
What you need:
- A Google account
- $5 one-time developer registration fee
- A ZIP file of your extension folder
- At least one screenshot (1280×800 or 640×400)
- A short description (up to 132 characters)
The process:
- Go to the Chrome Web Store Developer Dashboard
- Pay the $5 fee (one-time, not per extension)
- Click “New Item” and upload your ZIP
- Fill in the store listing: description, screenshots, category, privacy policy
- Submit for review
Review typically takes 1–3 days for simple extensions. Extensions that request sensitive permissions (like reading all pages) take longer and require justification.
One thing to handle before publishing: a privacy policy URL is required for any extension that handles user data. If your extension doesn’t collect or transmit any user data, you still need a page that says so. A simple paragraph on your own site or a free hosting service works fine.
10 Chrome extension ideas you can build in a day
These are all achievable in a single focused day with AI assistance:
- Tab saver to Notion: One click saves current URL + title to a Notion database
- Distraction blocker: Blocks specified domains during set hours
- Reading time estimator: Shows estimated reading time for any article
- Price tracker: Highlights price on product pages and compares to a saved baseline
- AI summarizer: Summarizes the current page using the Claude or OpenAI API
- Custom keyboard shortcuts: Adds hotkeys for frequent browser actions
- Screenshot to clipboard with annotation: Captures visible area with one hotkey
- LinkedIn message templates: Adds quick-insert buttons in LinkedIn message composer
- Word count for any page: Shows total word count and reading time in a small badge
- URL formatter: Reformats URLs for sharing (removes UTM params, shortens, copies)
The AI summarizer idea is especially interesting because it demonstrates calling an AI API from a browser extension — a building block for more complex tools.
What to build next
- → [LINK: How to Build a Full-Stack App with AI in One Day] — go beyond the browser
- → [LINK: How to Build a SaaS MVP with AI] — turn your extension idea into a product
- → Back to the Build with AI pillar
FAQ
Do i need to know JavaScript to build a Chrome extension with AI?
Not to generate and test it — AI will write the code. But being able to read JavaScript helps significantly when debugging. If something breaks, you need to understand enough to describe the problem clearly and evaluate whether the AI’s fix makes sense. Total beginners can do this but should budget extra time for the learning curve.
How long does Chrome web store review take?
For simple extensions with basic permissions, usually 1–3 business days. Extensions requesting access to all sites or sensitive data can take 1–2 weeks and may require additional justification. Plan accordingly if you have a launch deadline.
Can i build a Chrome extension that uses AI apis?
Yes. You can call any external API from a Chrome extension, including Claude, OpenAI, or any other AI service. The main consideration is API key security — store keys in the extension’s options storage, not hardcoded in the extension files, since your extension code is technically readable by users.
Is Manifest V3 different from V2?
Yes, significantly. Manifest V3 replaced background pages with service workers, changed how content scripts work, and removed some APIs. Chrome is phasing out V2 support. Always build with V3 — make this explicit in your AI prompt to ensure the generated code uses the right APIs.
Can i build a Firefox extension with the same process?
Mostly yes. Firefox supports most of the Chrome Extensions API, and many extensions work across both browsers with minimal changes. The main differences are in the manifest format and some API names. If cross-browser compatibility matters, mention it in your prompt and the AI will flag the differences.