10 mins read
A Chrome extension is a small software program that runs inside the Chrome browser and customises how it looks and behaves. Extensions can block ads before they load, save tab sessions so you never lose your work, inject AI assistants into every webpage, or automate repetitive clicks and form fills. They live in the browser toolbar and operate with access to the pages you visit, the tabs you open, and the network requests your browser makes.
In 2026, the case for building one has never been stronger. Three things have converged: Manifest V3 is now mature and fully documented, ending years of migration uncertainty. AI coding tools have collapsed the skill barrier -- you can go from a natural language description to a working extension in under 20 minutes. And Chrome remains the dominant browser, with over 3 billion active users giving any extension an enormous addressable audience the moment it is published.
The Chrome Web Store hosts more than 100,000 extensions, yet most popular use cases have exactly one or two dominant players with weak competition. Whether you want to build a personal productivity tool, a monetisable product, or simply learn how browser APIs work, the barrier to a first publishable extension is now a few hours of focused effort -- not a multi-week project.
This guide walks through the entire journey: understanding the core architecture, writing your first extension from scratch, using AI to accelerate development, and publishing to the Web Store. By the end, you will have a working extension running in your own browser.
Building a Chrome extension requires fewer prerequisites than most people assume. Here is what you actually need before writing a single line.
Google Chrome (any recent version). This is the browser you will test in, and the same browser your users will run the extension on.
A code editor. VS Code is the community standard -- it is free, has excellent JavaScript support, and auto-completes Chrome extension APIs out of the box. Any plain-text editor works, but VS Code will save you time.
Basic HTML, CSS, and JavaScript. You need to understand how a web page is structured, what a function is, and how to reference a DOM element. If you can build a simple webpage, you have enough. If you cannot, AI tools can cover the gap entirely.
One concept worth understanding before you start is Manifest V3. Every Chrome extension must include a file called manifest.json -- the extension's identity card. It tells Chrome the extension's name, version, what permissions it needs, and which files do what. Manifest V3 (MV3) is the current required standard, replacing the older Manifest V2 that Google deprecated for security reasons. The key architectural change is that persistent background pages are replaced by ephemeral service workers -- this means background code cannot hold state indefinitely, but extensions become more lightweight and secure.
You do not need a developer account or a paid subscription to start. You can load and test an extension locally for free. The only cost in the entire process is the one-time $5 Chrome Web Store developer registration fee, which only applies when you decide to publish.
Build your Chrome extension with AI
Let Clawnify do the work for you
For this walkthrough, we will build a minimal but genuinely useful extension: a button in the browser toolbar that, when clicked, changes the background colour of the current webpage. Simple enough to finish in 10 minutes, concrete enough to touch every foundational concept.
Step 1 -- Create the Project Folder
Create a new folder on your computer named colour-changer. All extension files live here.
Step 2 -- Write manifest.json
Create manifest.json in the folder. Set manifest_version to 3, give the extension a name and version, declare a default popup pointing to popup.html, and add the activeTab and scripting permissions. This tells Chrome the extension exists, what it is called, and that it needs permission to run scripts on the active tab.
Step 3 -- Add popup.html
Create popup.html: a minimal HTML file with a single button element. This is what the user sees when they click the toolbar icon. Reference popup.js at the bottom of the body.
Step 4 -- Add popup.js
Create popup.js. When the button is clicked, use chrome.scripting.executeScript to inject a one-liner into the current tab that sets document.body.style.backgroundColor to a colour of your choice.
Step 5 -- Load in Chrome
Open Chrome and navigate to chrome://extensions/. Toggle Developer Mode on (top-right). Click Load unpacked and select your folder. The extension appears in the toolbar immediately. Click it on any webpage -- the background changes. That is a working Chrome extension. To iterate: edit your files, then click the refresh icon next to your extension on the extensions page. Changes apply immediately.
You do not need to write any of the code above by hand. AI tools like Claude, ChatGPT, or Codex can generate a complete, working Chrome extension from a single well-written prompt. Here is how to do it reliably.
Write a Specific Prompt
Vague prompts produce vague code. A strong extension prompt specifies: what the extension does, which browser API it needs, and the output format. Example:
Write a Chrome extension using Manifest V3 that adds a floating button to every page. When clicked, the button highlights all links on the page in yellow. Provide all required files: manifest.json, content.js, and an optional popup.html. Use the activeTab and scripting permissions.
Map the Output to Files
The AI will return code blocks -- typically one per file. Copy each block into the corresponding file in your project folder. If the AI returns a single long response, look for the filename in comments at the top of each block (e.g., // manifest.json).
Load and Test
Load the folder unpacked in chrome://extensions/ exactly as described in the previous section. If something does not work, open the Chrome console (right-click the extension icon, select Inspect popup) and share the error message with the AI as a follow-up prompt. Iteration is fast -- most AI-generated extensions need one or two follow-up prompts to handle edge cases or browser quirks. Treat the AI as a co-pilot: it eliminates the blank-page problem and handles boilerplate, but you should read what it produces and understand which permissions it requested and why. Never blindly paste code that asks for broad permissions without understanding what it does.
For OpenClaw users, this workflow is a natural fit: you can prompt your AI agent to generate an extension, save the files directly to your workspace, and load it immediately. Agents hosted on Clawnify.com can handle the entire file creation pipeline autonomously.
Once your extension works locally, publishing to the Chrome Web Store is a straightforward four-step process.
Step 1 -- Pay the Developer Registration Fee
Navigate to the Chrome Web Store developer dashboard and pay the one-time $5 developer registration fee via your Google account. This covers all future extensions you publish -- it is not a recurring subscription.
Step 2 -- Zip and Upload
Select all files in your extension folder (excluding development files like .git or node_modules) and compress them into a ZIP archive. In the developer dashboard, click New Item and upload the ZIP. You will then need to add: a short description (up to 132 characters for the summary), at least one screenshot at 1280x800 pixels, a 128x128 pixel icon, and category tags.
Step 3 -- Wait for Review
Google reviews new extensions before they go live. In 2026, the typical review window is two to five business days. The most common rejection reasons are: requesting broader permissions than the extension actually uses, missing a privacy policy link when the extension handles user data, and a description that does not accurately reflect what the extension does. Read the developer programme policies before submitting to avoid these pitfalls.
Step 4 -- Updates and Post-Launch
After approval, your extension is live. Pushing updates follows the same process: increment the version number in manifest.json, re-zip, and upload the new package. Updates go through a shorter review cycle and preserve your existing reviews and ratings.
Stage | What to prepare | Common pitfall |
|---|---|---|
Registration | Google account, $5 fee | New accounts can slow review |
Submission | ZIP, screenshots, description, icon | Screenshots not exactly 1280x800 |
Review | Wait 2-5 business days | Overly broad permissions |
Live | Monitor reviews and crash reports | Forgetting to increment version |
