How to Build Your Own Chrome Extension in 5 Steps

What you need to know before you start

A Chrome extension is a small program that adds features to your browser. You can write one using JavaScript, HTML, and CSS — the same languages that make websites work. You do not need special software or a computer science degree. If you have ever edited a text file or looked at website code, you can build a basic extension.

The process has five parts: create a folder with your extension files, write the code that tells Chrome what your extension does, test it in your browser, refine it, and then decide whether to publish it. Most people spend a few hours on a simple extension. The hardest part is usually deciding what you want it to do.

Chrome extensions run only in Chrome and Chromium-based browsers like Edge and Brave. If you want your extension to work in Firefox, you would need to rebuild it using Firefox's system, which is slightly different. This guide covers Chrome only.

Key Takeaways

Every Chrome extension needs a manifest.json file that describes what it does, what permissions it needs, and which files it uses.
You write the extension code in a folder on your computer, then load it into Chrome using Developer Mode in your extensions settings.
A popup extension (the simplest kind) needs three files: manifest.json, a JavaScript file, and an HTML file for what users see when they click the icon.
Testing happens in your own browser first — you can reload your extension instantly while you work, so you see changes right away.
Publishing to the Chrome Web Store requires a Google account and a one-time $5 fee, but you can use your extension privately without publishing it.

Set up your extension folder and manifest file

Create a new folder on your computer. Name it something clear, like "my-first-extension". Inside that folder, create a file called manifest.json. This file is the instruction manual for your extension — it tells Chrome the extension's name, what it does, which files to load, and what permissions it needs.

Open manifest.json in a text editor (Notepad on Windows, TextEdit on Mac, or any code editor). Paste this code:

{ "manifest_version": 3, "name": "My First Extension", "version": "1.0", "description": "A simple extension that does something useful", "permissions": ["activeTab"], "action": { "default_popup": "popup.html", "default_title": "Click me" } }

Change "My First Extension" to your extension's name and "A simple extension..." to what it actually does. The manifest_version must be 3 — that is the current Chrome standard. Save the file. Do not add a .txt extension; it must be manifest.json exactly.

Create the popup HTML file

In the same folder, create a new file called popup.html. This is what users see when they click your extension icon. Paste this code:

<!DOCTYPE html> <html> <head> <style> body { width: 300px; padding: 10px; font-family: Arial, sans-serif; } button { padding: 10px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } </style> </head> <body> <h1>Hello</h1> <p>Click the button below.</p> <button id="myButton">Click me</button> <script src="popup.js"></script> </body> </html>

This creates a small window with a heading, text, and a button. The button does not do anything yet — that is what the JavaScript file will handle. Save this file as popup.html in your extension folder.

Write the JavaScript that makes it work

Create a third file called popup.js in the same folder. This file runs when the user clicks your extension icon. Paste this code:

document.getElementById("myButton").addEventListener("click", function() { alert("You clicked the button!"); });

This code finds the button (using the id "myButton" from your HTML), and when someone clicks it, a message appears. This is the simplest possible interaction. Once you understand how this works, you can replace the alert with something more useful — like changing the page color, saving text, or fetching information from a website.

Save popup.js in your extension folder. Now you have three files: manifest.json, popup.html, and popup.js. That is a complete, working extension.

Load your extension into Chrome and test it

Open Chrome and go to chrome://extensions in the address bar. In the top right, turn on Developer Mode (you will see a toggle switch). Once it is on, three buttons appear: "Load unpacked", "Pack extension", and "Update".

Click Load unpacked. A folder picker opens. Navigate to your extension folder and select it. Chrome loads your extension immediately. You should see a new icon in your toolbar (usually a puzzle piece). Click it, and your popup appears with the button you created.

Click the button. An alert box says "You clicked the button!" If it does, your extension works. If something breaks, check that all three files are in the same folder and that the filenames match exactly what the code expects (manifest.json, popup.html, popup.js).

While Developer Mode is on, you can edit your files and reload the extension instantly. Go back to chrome://extensions, find your extension, and click the reload icon (circular arrow). Your changes appear immediately. This is how you test and refine your extension.

Expand what your extension can do

The button-and-alert example teaches you the pattern, but real extensions do more. You might want your extension to read the current webpage, change how it looks, save user settings, or talk to an outside service. Each of these requires different permissions in your manifest.json.

If you want to read or change the webpage the user is viewing, add "scripting" and "activeTab" to your permissions list. If you want to store data that persists between sessions, use Chrome's storage API. If you want to run code in the background (like checking for new emails), you add a background service worker to your manifest.

The Chrome Extensions documentation at developer.chrome.com/docs/extensions has examples for each of these. Start with the samples that match what you want to build, copy the code, and modify it for your use case. Most extensions are built this way — by starting with a working example and changing it.

Decide whether to publish or keep it private

You can use your extension in Chrome right now without publishing it anywhere. It works only on your computer, and only while Developer Mode is on. This is fine if you built it just for yourself.

If you want other people to use it, you publish it to the Chrome Web Store. You need a Google account and a one-time $5 developer fee. Once you pay, you can upload your extension, write a description, add screenshots, and set it to public or unlisted (so only people with the link can find it).

Before you publish, test your extension thoroughly on different websites and make sure it does not break anything. Users will leave reviews, and a broken extension gets bad ratings fast. If you publish and then find a bug, you can upload a new version and Chrome updates it for everyone automatically.

Frequently Asked Questions

Do I need to know how to code to make an extension?

You need to understand the basics of JavaScript, HTML, and CSS. If you have never written code before, spend a few hours learning JavaScript fundamentals first — sites like Codecademy or freeCodeCamp have free courses. Once you know what a function is and how to use an event listener, you can build a simple extension.

Can I make an extension that works in Firefox too?

Firefox extensions use a similar structure but different APIs in some places. You would need to rewrite parts of your code and test it in Firefox separately. Start with Chrome, get it working, then adapt it for Firefox if you need to. The manifest format is different, so you cannot use the same manifest.json file for both.

What if I want my extension to do something on every webpage automatically?

You need a content script, which runs on every page the user visits. Add it to your manifest.json under "content_scripts" and specify which websites it runs on. Content scripts can read and change the page, but they have limited permissions — they cannot access your browser history or other sensitive data.

How do I update my extension after I publish it?

Edit your files on your computer, change the "version" number in manifest.json to something higher (like 1.1 or 2.0), then upload the new folder to the Chrome Web Store. Chrome checks for updates automatically and installs them for users within a few hours.

Can someone steal my extension code?

Yes. Extension code is not encrypted, so anyone can download your published extension and read the source. If you have secrets (like API keys), do not put them in the extension code — instead, have the extension talk to a server you control, and keep the secrets on the server. Never hardcode passwords or private tokens in your extension files.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.