How to Create a Chrome Extension: Beginner Tutorial (Manifest V3)

How do I make a Chrome extension?

Every Chrome extension starts with the same file: manifest.json, which tells Chrome the extension's name, version, and what it's allowed to do. Everything else — a popup, a background script, a content script — is optional depending on what your extension needs to do.

You write extensions with the same HTML, CSS, and JavaScript used for any website, plus Chrome's own extension APIs for things a normal webpage can't do, like reading the active tab or storing data in the browser. No separate framework or build tool is required to get started.

What you need before you start

The setup is lighter than most people expect — there's no SDK to install and no account required until you're ready to publish.

• A code or text editor — VS Code is a common choice, but any plain-text editor works.
• Chrome itself, with Developer mode enabled on the chrome://extensions page.
• Basic HTML, CSS, and JavaScript — enough to write a small popup page and a script file.
• A Chrome Web Store Developer Dashboard account, only needed at the publishing stage, not for building or testing locally.

Chrome extension file structure: what manifest.json needs

manifest.json is the only file Chrome requires by name and location — it has to sit in your extension's root folder.

{
  "manifest_version": 3,
  "name": "Hello World",
  "version": "1.0",
  "description": "A minimal example extension.",
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": []
}

How to build a hello-world Chrome extension step by step

1. Create a new folder for your extension and add a manifest.json file with the fields above.
2. Create popup.html in the same folder with a simple heading, like <h1>Hello World</h1>.
3. Open chrome://extensions in Chrome and turn on Developer mode using the toggle in the top-right corner.
4. Click Load unpacked and select your extension's folder.
5. Click your extension's new icon in the toolbar to see the popup appear.

That's a complete, working extension. Everything from here — a background service worker, a content script, permissions — is added on top of this same structure.

How to add a background service worker

A service worker runs in the background and reacts to browser events, like a tab closing, without needing a visible popup or webpage open.

{
  "background": {
    "service_worker": "background.js"
  }
}

chrome.tabs.onRemoved.addListener((tabId) => {
  console.log("Tab closed:", tabId);
});

Add that background field to your manifest.json alongside action, create background.js in the same folder, then reload the extension from chrome://extensions to activate it. Service workers don't have direct access to a page's DOM — for that, you need a content script.

How to inject a content script into web pages

A content script runs inside the actual pages a user visits, which is how an extension reads or changes what's on screen.

{
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

document.body.style.border = "5px solid red";

Save that as content.js, add the content_scripts field to manifest.json, then reload the extension and refresh any open tab — every page now loads with a red border, confirming the script ran. Narrow the matches pattern to specific sites once you move past testing, rather than leaving <all_urls> in a published extension.

How to test and debug your extension locally

Everything happens inside chrome://extensions while you're developing, with no separate test environment to set up.

1. Click the reload icon on your extension's card in chrome://extensions after any code change.
2. Right-click the toolbar icon and choose Inspect popup to open DevTools scoped to the popup specifically.
3. Click service worker on the extension's card to open a console scoped to your background script.
4. Use the regular browser DevTools on any tab to debug a content script, since it runs inside that page's context.
5. Watch the Errors button on the extension's card — Chrome surfaces manifest and permission problems there before they show up as silent failures.

How to publish your Chrome extension to the Chrome Web Store

Publishing means packaging your folder and submitting it through Google's separate developer dashboard, not something you do from inside Chrome itself.

1. Create a Chrome Web Store Developer Dashboard account and complete the one-time registration step, including its account fee, listed on the dashboard itself.
2. Zip your extension's folder, or let the dashboard package it, and upload it as a new item.
3. Fill in the store listing: name, description, screenshots, and a category.
4. Review the developer program policies before submitting, since a violation is the most common reason a listing gets rejected.
5. Submit for review; Chrome's team checks the extension before it becomes publicly visible in search.

Examples of well-scoped extensions to learn from

Before you design your own extension, it helps to look at real ones that do exactly one job — the same principle Chrome's own guidance recommends for anyone submitting to the Web Store. Browse Manifest V3-ready extensions for more current examples.

Study one of these by opening its options page and thinking through what a minimal manifest and script structure for it would look like — that's a faster way to learn the patterns than starting from a blank folder. See Find Extensions for developers for more building and publishing resources.