How to Develop a Chrome Extension

A complete, step-by-step guide to building your first Chrome extension using Manifest V3 — from project setup to publishing on the Chrome Web Store.

Step 1: Create the Manifest File

Every Chrome extension starts with a manifest.json file. This file tells Chrome the extension's name, version, permissions, and entry points. With Manifest V3, you define a service worker instead of a background page.

Create a new folder for your extension and add a manifest.json with the required fields: manifest_version (set to 3), name, version, and description. Add an action field to configure the toolbar icon and popup.

Step 2: Build the Popup UI

The popup is the small window that appears when users click your extension icon. It is a regular HTML file referenced in the manifest's action.default_popup field. Use HTML and CSS to create the interface, then add JavaScript for interactivity.

Step 3: Add Content Scripts

Content scripts run in the context of web pages. They can read and modify the DOM, allowing your extension to interact with page content. Define them in the manifest under the content_scripts key with URL match patterns to control which pages they run on.

Step 4: Set Up the Service Worker

The service worker is the extension's background process in Manifest V3. It handles events like tab updates, alarms, and messages between content scripts and the popup. Unlike the old background pages, service workers are event-driven and do not persist in memory.

Step 5: Test Locally

Open chrome://extensions in your browser, enable Developer mode, and click "Load unpacked". Select your extension folder. Chrome will load the extension and you can test it immediately. Changes to code require clicking the refresh icon on the extension card.

Step 6: Publish to Chrome Web Store

Once your extension is working, zip the project folder and upload it to the Chrome Web Store Developer Dashboard. Fill in the listing details, add screenshots, and submit for review. Most extensions are reviewed within a few business days.

After publishing, make sure to test your extension across different environments. Automated cross-browser testing helps ensure your extension works consistently for all users.

Frequently Asked Questions

What programming languages do I need for a Chrome extension?

Chrome extensions use standard web technologies: HTML for popup and options pages, CSS for styling, and JavaScript for logic. You can also use TypeScript with a build step. The manifest.json file is written in JSON.

How long does it take to build a Chrome extension?

A simple extension (like a color picker or page modifier) can be built in a few hours. More complex extensions with backend APIs, storage, and advanced UI can take days to weeks depending on scope.

Is it free to publish a Chrome extension?

There is a one-time developer registration fee of $5 USD to create a Chrome Web Store developer account. After that, publishing and updating extensions is free.

What is Manifest V3?

Manifest V3 is the latest extension platform for Chrome. It replaces background pages with service workers, introduces declarativeNetRequest for network filtering, and enforces stricter security policies. All new extensions should use Manifest V3.

Bugster Logo

How to Develop a Chrome Extension

A complete, step-by-step guide to building your first Chrome extension using Manifest V3 — from project setup to publishing on the Chrome Web Store.

Step 1: Create the Manifest File

Every Chrome extension starts with a manifest.json file. This file tells Chrome the extension's name, version, permissions, and entry points. With Manifest V3, you define a service worker instead of a background page.

Create a new folder for your extension and add a manifest.json with the required fields: manifest_version (set to 3), name, version, and description. Add an action field to configure the toolbar icon and popup.

Step 2: Build the Popup UI

The popup is the small window that appears when users click your extension icon. It is a regular HTML file referenced in the manifest's action.default_popup field. Use HTML and CSS to create the interface, then add JavaScript for interactivity.

Step 3: Add Content Scripts

Content scripts run in the context of web pages. They can read and modify the DOM, allowing your extension to interact with page content. Define them in the manifest under the content_scripts key with URL match patterns to control which pages they run on.

Step 4: Set Up the Service Worker

The service worker is the extension's background process in Manifest V3. It handles events like tab updates, alarms, and messages between content scripts and the popup. Unlike the old background pages, service workers are event-driven and do not persist in memory.

Step 5: Test Locally

Open chrome://extensions in your browser, enable Developer mode, and click "Load unpacked". Select your extension folder. Chrome will load the extension and you can test it immediately. Changes to code require clicking the refresh icon on the extension card.

Step 6: Publish to Chrome Web Store

Once your extension is working, zip the project folder and upload it to the Chrome Web Store Developer Dashboard. Fill in the listing details, add screenshots, and submit for review. Most extensions are reviewed within a few business days.

After publishing, make sure to test your extension across different environments. Automated cross-browser testing helps ensure your extension works consistently for all users.

Frequently Asked Questions

What programming languages do I need for a Chrome extension?

Chrome extensions use standard web technologies: HTML for popup and options pages, CSS for styling, and JavaScript for logic. You can also use TypeScript with a build step. The manifest.json file is written in JSON.

How long does it take to build a Chrome extension?

A simple extension (like a color picker or page modifier) can be built in a few hours. More complex extensions with backend APIs, storage, and advanced UI can take days to weeks depending on scope.

Is it free to publish a Chrome extension?

There is a one-time developer registration fee of $5 USD to create a Chrome Web Store developer account. After that, publishing and updating extensions is free.

What is Manifest V3?

Manifest V3 is the latest extension platform for Chrome. It replaces background pages with service workers, introduces declarativeNetRequest for network filtering, and enforces stricter security policies. All new extensions should use Manifest V3.