What you need to build a Chrome extension

A Chrome extension is a small program that adds features to your browser. You do not need special software or a degree in computer science — you need a text editor, a folder on your computer, and knowledge of three languages that work together: HTML (the structure), CSS (the appearance), and JavaScript (the behavior). If you have written any of these before, you already know most of what you need.

The simplest extensions are just a few files in a folder. Chrome reads a file called manifest.json that tells it what the extension does, what permissions it needs, and which files to load. You write this file in plain text, save it with the right name, and Chrome handles the rest.

You will need a text editor — Notepad works, but something like Visual Studio Code (free from Microsoft) or Sublime Text makes the work faster because it highlights your code and catches mistakes. You will also need to turn on Developer Mode in Chrome, which takes one click in your settings.

Key Takeaways

  • Every Chrome extension needs a manifest.json file that lists what the extension does, what permissions it needs, and which files to load.
  • The three core files are manifest.json (the instruction file), a popup.html file (what appears when you click the extension icon), and a popup.js file (what happens when you interact with it).
  • You test your extension by turning on Developer Mode in Chrome settings, then loading your folder as an unpacked extension.
  • Publishing to the Chrome Web Store requires a Google account, a one-time $5 developer fee, and a review process that usually takes a few hours to a few days.

The three files every extension needs

Start by creating a new folder on your computer — call it something like my-first-extension. Inside that folder, create three files: manifest.json, popup.html, and popup.js. These three files are the minimum a working extension needs.

The manifest.json file is the instruction manual. It tells Chrome the extension's name, what version it is, what it does, and which files to load. Here is what a basic one looks like:

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

The popup.html file is what the user sees when they click your extension icon. It is just HTML — the same language you would use to build a website. A basic version looks like this:

<!DOCTYPE html> <html> <head> <title>My Extension</title> <style> body { width: 300px; padding: 10px; font-family: Arial; } </style> </head> <body> <h1>Hello</h1> <button id="myButton">Click me</button> <script src="popup.js"></script> </body> </html>

The popup.js file contains the JavaScript that makes things happen. When the user clicks the button in your popup, this file decides what occurs. A basic version looks like this:

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

How to test your extension in Chrome

Once you have created your three files, you need to load them into Chrome so you can see if they work. Open Chrome and go to chrome://extensions in the address bar. In the top right corner, toggle on Developer Mode. A new button called "Load unpacked" will appear.

Click "Load unpacked" and navigate to the folder where you saved your extension files. Select the folder and click "Select Folder". Chrome will load your extension and show it in the extensions list. You should see your extension icon appear in the top right of your browser window, next to the address bar.

Click the icon to open your popup and test it. If something does not work, go back to chrome://extensions, find your extension, and click the "Errors" button to see what went wrong. Most errors are typos in the manifest.json file or a missing file name. Fix the error, save the file, and click the refresh icon next to your extension name — Chrome will reload it automatically.

Adding permissions and background scripts

straightforward extensions like the one above work fine, but most useful extensions need to do more — read what is on the current web page, store data, or run code in the background. These features require permissions in your manifest.json file.

If you want your extension to read the content of the web page the user is viewing, add "scripting" to the permissions list. If you want to store data that persists between sessions, add "storage". If you want to run code that stays active even when the popup is closed, you need a background script.

A background script is a JavaScript file that runs in the background. Add it to your manifest.json like this:

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

Then create a file called background.js in your folder. This file can listen for events — like when a tab opens, when the user clicks the extension icon, or when a message arrives from your popup. Background scripts are powerful but also the most common source of errors, so test carefully.

Publishing to the Chrome Web Store

Once your extension works the way you want, you can publish it so other people can install it. Go to the Chrome Web Store Developer Dashboard at chrome.google.com/webstore/devconsole. You will need a Google account.

Pay the one-time $5 developer fee if this is your first extension. Then click "Create new item" and upload a zip file of your extension folder. You will need to write a description, choose a category, upload at least one screenshot showing what your extension does, and confirm that your extension does not violate Chrome's policies.

Google will review your extension — this usually takes a few hours to a few days. They check that your extension does what you say it does, that it does not steal data or inject ads, and that it does not break any of their rules. Once it is approved, it will appear in the Chrome Web Store and anyone can install it.

Common mistakes and how to avoid them

The most common mistake is a typo in manifest.json. This file must be valid JSON, which means every comma, bracket, and quote mark must be in exactly the right place. If Chrome cannot read it, your extension will not load at all. Use a text editor that highlights JSON syntax — it will show you mistakes when ready.

The second common mistake is asking for too many permissions. If your extension asks for permission to read every website the user visits, Chrome will warn the user and many will not install it. Only ask for the permissions you actually need. If you only need to read one specific website, say so in your manifest instead of asking for all websites.

The third mistake is forgetting to reload your extension after you make changes. When you edit a file, Chrome does not automatically reload it. Go back to chrome://extensions and click the refresh icon next to your extension name. Without this step, you will test the old version and think your changes did not work.

Frequently Asked Questions

Can I build a Chrome extension without knowing JavaScript?

You can build a very straightforward one with just HTML and CSS — for example, an extension that shows a note or a calculator. But most useful extensions need JavaScript to respond to user actions or read web pages. Learning the basics of JavaScript takes a few hours if you already know HTML.

What is the difference between manifest version 2 and manifest version 3?

Manifest version 3 is the current standard and is required for all new extensions. Version 2 is no longer supported. If you find old tutorials that use version 2, ignore them — use version 3 instead. The differences are mostly in how background scripts work and what permissions you can request.

Can I make money from a Chrome extension?

You cannot sell extensions directly through the Chrome Web Store, but you can offer a free version with limited features and charge for a full version through your own website. Some extensions show ads or ask for donations. Google's policies prohibit injecting ads into web pages or stealing user data to sell to advertisers.

How do I update my extension after I publish it?

Go back to the Chrome Web Store Developer Dashboard, upload a new zip file with a higher version number in manifest.json, and submit it for review. Users with the extension installed will receive the update automatically within a few hours.

What should I do if my extension gets rejected from the Chrome Web Store?

Google will send you an email explaining why. Common reasons are that the extension does not do what the description says, it requests unnecessary permissions, or it violates their policies. Read the rejection carefully, fix the problem, and resubmit. You can resubmit as many times as you need.