Complete guide · Manifest V3 · 2026
How to make a Chrome extension
A Chrome extension is a small package of HTML, CSS, JavaScript, icons, and a manifest.json file that Chrome loads into the browser. This guide walks the full path — folder to manifest to popup to service worker to a published .zip — and links to a deeper tutorial for every step.
The short answer
Create a folder, add a manifest.json with "manifest_version": 3, add popup.html and background.js, add PNG icons at 16/32/48/128, then load the folder at chrome://extensions with Developer mode on. Zip it to publish. If you would rather skip the boilerplate, ManifestGo generates all of it from one sentence.
Step by step
1. Decide what your extension does
Every Chrome extension is a small, focused browser tool. Before writing anything, write one sentence describing the behaviour — for example: 'hide the YouTube sidebar and show a focus timer in the toolbar popup'. That sentence decides which surfaces (popup, content script, background worker) you actually need.
- Toolbar popup — a small UI opened from the extension icon.
- Content script — code injected into pages to read or change them.
- Background service worker — event handling, alarms, messaging, storage.
- Options page — persistent settings stored in chrome.storage.
2. Create the project folder and manifest.json
Every extension starts with a manifest.json at the project root. It declares the Manifest V3 version, name, permissions, and which files power each surface. Chrome refuses to load a folder without a valid manifest, so this file is the single most important one in the project.
- Set "manifest_version": 3 — Manifest V2 is no longer accepted.
- Declare "action" with a default_popup for a toolbar UI.
- Declare "background": { "service_worker": "background.js" } for events.
- Request only the permissions you use — "storage", "activeTab", "scripting".
3. Build the popup UI
The popup is plain HTML, CSS, and JavaScript. Manifest V3 forbids inline scripts, so link an external popup.js instead of using onclick attributes. Keep the popup narrow (around 320–400px) because Chrome renders it as a floating panel, not a page.
4. Add a background service worker
The service worker replaces the old persistent background page. It wakes on events — installs, alarms, messages, context-menu clicks — and shuts down when idle. That means no global state: persist everything with chrome.storage instead of module variables.
5. Inject content scripts where you need the page
Content scripts run inside the page and can read or rewrite the DOM. Match them with URL patterns in the manifest, or inject them on demand with chrome.scripting.executeScript. They cannot call most chrome.* APIs directly, so send messages to the service worker for privileged work.
6. Add real icons at 16, 32, 48 and 128
Chrome shows the toolbar icon at 16 and 32, the extensions page at 48, and the Web Store at 128. Toolbar icons must be raster PNGs — an SVG in the manifest gives you the default grey puzzle piece instead of your brand.
7. Test it with Load unpacked
Open chrome://extensions, enable Developer mode, click Load unpacked and choose your folder. Fix any manifest errors shown in red, click the reload arrow after each change, and open the service worker link to read background console logs.
8. Package and publish
Zip the folder contents (not the folder itself), pay the one-time $5 Chrome Web Store developer fee, upload the .zip, add screenshots, a privacy policy URL, and a justification for every permission you request. Clean submissions are usually reviewed in one to three business days.
Deep dives for each step
What changed from V2, and every field your manifest.json needs.
A copy-paste Manifest V3 file with every common field annotated.
HTML, CSS and JS for a toolbar popup that passes CSP rules.
Events, lifecycle, and why your background state keeps vanishing.
Injection, matches patterns, and messaging back to the worker.
Save settings and sync them across a user's signed-in browsers.
Add a real settings screen wired to chrome.storage.sync.
Add menu items on selected text, links, and images.
Declare commands and handle them in the service worker.
Why your toolbar shows a puzzle piece, and how to fix it.
Install and reload your extension locally while developing.
Pick the narrowest permissions that still let the feature work.
Where each surface logs, and how to inspect the service worker.
Fees, screenshots, privacy policy, and review timelines.
Frequently asked questions
How do I make a Chrome extension step by step?
Create a folder with a manifest.json using manifest_version 3, add a popup.html plus popup.js for the toolbar UI, add a background.js service worker for events, add content scripts if you need to modify web pages, include PNG icons at 16/32/48/128, then load the folder at chrome://extensions with Developer mode enabled and Load unpacked. Zip the folder to publish it to the Chrome Web Store.
Do I need to know how to code to make a Chrome extension?
Not anymore. AI Chrome extension builders such as ManifestGo generate the manifest, popup, background service worker, content scripts, and icon set from a plain-English description, then hand you a .zip you can install directly. Coding knowledge helps for complex logic, but it is not required for most personal or internal extensions.
How long does it take to build a Chrome extension?
By hand, a simple extension takes a few hours including learning the Manifest V3 APIs. With an AI builder, a working extension is typically generated, previewed, and downloaded in under five minutes; more complex multi-surface extensions take 15–30 minutes with iteration.
What files does a Chrome extension need?
At minimum, manifest.json. Most real extensions also include popup.html and popup.js for the toolbar UI, background.js as the service worker, one or more content scripts, an options.html settings page, and PNG icons at 16, 32, 48, and 128 pixels.
Can a Chrome extension use an API key or a database?
Yes. A Chrome extension can call external APIs from the service worker and store data in chrome.storage. Keys should never be hard-coded into a published extension — proxy requests through a backend, or keep the key user-supplied in the options page for personal builds.
Is Manifest V3 required?
Yes. Chrome no longer accepts Manifest V2 extensions in the Web Store, and Manifest V2 extensions are disabled in current Chrome releases. All new extensions must use manifest_version 3 with a service worker instead of a background page.
Skip the boilerplate entirely
ManifestGo turns one sentence into a complete Manifest V3 extension — manifest, popup, service worker, content scripts, options page, real PNG icons, and a .zip ready for chrome://extensions or the Web Store. Iterate in chat, restore any previous version, and download whenever you like.