What you need to build a Chrome extension

A Chrome extension is a small program that adds features to your browser. You build one using three files: a manifest.json file that tells Chrome what your extension does, an HTML file for what users see, and a JavaScript file for what actually happens when someone uses it. You do not need special software — a text editor like Notepad, VS Code, or Sublime Text is enough. You also need a Google account to upload your extension to the Chrome Web Store later, though you can test it locally without one.

The whole process takes a few hours if you are building something simple, like a button that opens a website or changes the color of web pages. More complex extensions that interact with multiple websites or store data take longer. You will spend most of your time writing and testing the JavaScript, not setting up the basic structure.

Key Takeaways

  • Every extension needs three core files: manifest.json, an HTML file, and a JavaScript file, which you create in a single folder on your computer.
  • The manifest.json file is where you name your extension, describe what it does, and list which websites it can access.
  • You test your extension locally by loading the folder directly into Chrome before uploading it to the Chrome Web Store.
  • The JavaScript file controls what your extension actually does — whether that is modifying web pages, opening new tabs, or storing user settings.
  • Publishing to the Chrome Web Store costs a one-time $5 developer fee and requires a Google account, but you can test and share unpublished extensions for free.

Create the three required files

Start by making a new folder on your computer — call it something like my-extension. Inside that folder, create three files. The first is manifest.json, which is a configuration file that tells Chrome everything about your extension. The second is popup.html, which is the page that appears when someone clicks your extension icon. The third is popup.js, which contains the code that makes your extension work.

Open manifest.json in your text editor and 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"   } }

Replace "My First Extension" with your extension's name and "A simple extension that does something useful" with a real description. The permissions section tells Chrome which websites your extension can access — "activeTab" means it can only see the website you are currently viewing. The action section points Chrome to your popup.html file and sets the text that appears when you hover over the extension icon.

Write the HTML and JavaScript files

Open popup.html and paste this code:

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

This creates a simple popup with a button. The style section controls how it looks — you can change the colors, size, and font. The script tag at the bottom tells the popup to load your popup.js file when it opens.

Now open popup.js and paste this code:

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

This code finds the button you created in the HTML file and makes it show an alert message when someone clicks it. You can replace the alert with any code you want — opening a website, changing colors on the page, storing data, or anything else JavaScript can do.

Load and test your extension in Chrome

Open Chrome and go to chrome://extensions in the address bar. In the top right corner, turn on Developer mode — you will see a toggle switch. Once it is on, click the Load unpacked button that appears. A file browser will open. Navigate to your my-extension folder and select it. Chrome will load your extension immediately.

You should see your extension icon appear in the top right corner of Chrome, next to the address bar. Click it to open your popup and test the button. If something does not work, go back to chrome://extensions, find your extension, and look for error messages. Chrome will show you what went wrong in red text. The most common mistakes are typos in the manifest.json file or a missing file — make sure all three files are in the same folder and the names match exactly what you wrote in the manifest.

Every time you change your code, save the file and click the refresh icon next to your extension name on the chrome://extensions page. Chrome will reload your extension with the new code. This is how you test changes without restarting the browser.

Add more features with permissions

The basic extension above only works with the popup. To make your extension do more — like change colors on web pages, read what is on the page, or store settings — you need to ask Chrome for permission. You do this by adding to the permissions section in manifest.json.

If you want your extension to change the appearance of web pages, you need a content script, which is a JavaScript file that runs on the actual websites you visit. Create a new file called content.js in your extension folder. Then add this to your manifest.json:

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

The matches line tells Chrome which websites this script runs on — "<all_urls>" means every website. You can narrow it down to specific sites like "https://www.example.com/*" if you only want it to run on one place. Inside content.js, you can write code that changes the page — for example, this code makes all text on a page blue:

document.body.style.color = "blue";

If you want to store user settings — like whether they prefer dark mode or what color they chose — add "storage" to your permissions list in manifest.json. Then you can save and load data using Chrome's storage system, which keeps settings even after the browser closes.

Publish to the Chrome Web Store

Once your extension works the way you want, you can share it with others through the Chrome Web Store. Go to chrome.google.com/webstore/developer/dashboard and sign in with your Google account. You will need to pay a one-time $5 developer fee the first time you publish anything. After that, you can upload as many extensions as you want.

Click New item and upload a ZIP file of your extension folder. You will need to provide a name, description, icon image (at least 128 by 128 pixels), and screenshots showing what your extension does. Chrome will review your extension to make sure it does not do anything harmful or misleading — this usually takes a few hours to a few days. Once it is approved, it will appear in the Chrome Web Store and anyone can find it and install it.

You do not have to publish to the Chrome Web Store if you do not want to. You can share your extension folder with other people and they can load it locally the same way you did, using the Load unpacked button. This is useful if you are building an extension just for yourself or a small group.

Common mistakes and how to fix them

The most common mistake is forgetting to save your manifest.json file or having a typo in it. JSON is very strict about commas and brackets — if you are missing a comma or have an extra one, Chrome will not load your extension. Use a text editor that highlights JSON syntax, like VS Code, which will show you errors as you type.

Another common problem is asking for permissions you do not actually need. If your extension only shows a popup and does not touch web pages, you do not need "activeTab" or content scripts. Asking for fewer permissions makes your extension safer and less likely to be rejected by the Chrome Web Store.

If your extension loads but does not do anything, check the console for errors. Right-click on your popup, click Inspect, and look at the Console tab. Chrome will show you any JavaScript errors in red. This is usually where you will find typos in your code or references to elements that do not exist in your HTML.

Frequently Asked Questions

Do I need to know how to code to make a Chrome extension?

You need to know basic JavaScript, HTML, and CSS. If you have never coded before, you can learn the basics in a few weeks using free resources like Codecademy or freeCodeCamp. Start with HTML and CSS, then move to JavaScript. Once you understand those, building an extension is straightforward.

Can I make money from a Chrome extension?

Yes, but most extensions on the Chrome Web Store are free. You can add ads inside your extension, charge a one-time fee when someone installs it, or offer a paid version with extra features. The Chrome Web Store handles payment processing if you choose to charge money.

What is the difference between manifest version 2 and 3?

Manifest version 3 is the current standard and what Chrome requires for new extensions. Version 2 is older and Chrome no longer accepts new extensions using it. If you are learning now, use version 3 — that is what the code examples above show.

Can my extension access passwords or private information?

No. Chrome blocks extensions from accessing passwords, credit card numbers, and other sensitive data. You can only access information that the user has given you permission to see through the permissions system in manifest.json.

How do I update my extension after I publish it?

Go back to the Chrome Web Store developer dashboard, click your extension, and upload a new ZIP file with your updated code. Chrome will review the changes — usually faster than the first review — and push the update to all users automatically.