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 computer science degree — you build one using three files that work together: HTML (the structure), CSS (the appearance), and JavaScript (the actions). These are plain text files you can write in Notepad or any text editor.

Before you start, download and install Visual Studio Code, which is free and designed for writing code. It highlights your mistakes and makes the work faster. You will also need Google Chrome itself, and a folder on your computer where you keep your extension files organized.

The extension you build will live in that folder until you load it into Chrome. Chrome reads the files from there and runs them every time you use your browser. When you are done building, you can keep it private or submit it to the Chrome Web Store so other people can install it.

Key Takeaways

  • Every Chrome extension needs a manifest.json file that tells Chrome what the extension does and what permissions it needs.
  • You write the extension using HTML, CSS, and JavaScript — the same languages that make websites work.
  • Visual Studio Code is free and makes writing code much easier because it catches mistakes as you type.
  • You test your extension by loading it into Chrome from a folder on your computer before you publish it anywhere.
  • A simple extension can be built in an afternoon; the complexity grows only if you add more features.

Create the manifest file that Chrome reads first

Every extension starts with a file named manifest.json. This is the instruction sheet that tells Chrome what your extension is called, what it does, and what permissions it needs to run. Chrome reads this file first, and if something is wrong with it, the extension will not load at all.

Open Visual Studio Code, create a new file, and save it as manifest.json. Type this code into it:

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

The manifest_version must be 3 — that is the current version Chrome uses. The name is what appears in your browser. The permissions section tells Chrome what the extension is allowed to do; "scripting" means it can run code on web pages. The action section points to a popup.html file, which is the window that opens when you click the extension icon.

Save this file in a folder called my-extension on your desktop or documents folder. Everything else you create goes in this same folder.

Build the popup that appears when you click the icon

The popup is the small window that opens when you click your extension icon in the browser. Create a new file in Visual Studio Code and save it as popup.html in your my-extension folder. Type this:

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="popup.css"> </head> <body> <h1>Hello</h1> <p>This is my extension</p> <button id="myButton">Click me</button> <script src="popup.js"></script> </body> </html>

This HTML creates a heading, some text, and a button. The link tag at the top connects it to a CSS file that makes it look nice. The script tag at the bottom connects it to a JavaScript file that makes the button do something when you click it.

Save this file as popup.html in the same folder. Do not change the filename — the manifest.json file is looking for a file with exactly this name.

Add styling with a CSS file

Create another new file and save it as popup.css in your my-extension folder. Type this:

body { width: 300px; padding: 10px; font-family: Arial, sans-serif; background-color: #f0f0f0; } h1 { color: #333; font-size: 18px; } button { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #45a049; }

This CSS makes the popup 300 pixels wide, sets the font to Arial, and styles the button with a green background that turns darker when you hover over it. You can change the colors and sizes to whatever you want. The cursor: pointer line makes the cursor change to a hand when you move over the button, so users know it is clickable.

Save this file as popup.css. The popup.html file is already looking for it, so once you save it, the styling will connect automatically.

Write the JavaScript that makes the button work

Create one more file and save it as popup.js in your my-extension folder. Type this:

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

This JavaScript finds the button (by its id "myButton"), listens for a click, and shows an alert message when someone clicks it. The alert is just a test — in a real extension, you would do something more useful, like change the page color, save information, or fetch data from the internet.

Save this file as popup.js. Now you have all four files: manifest.json, popup.html, popup.css, and popup.js, all in the same my-extension folder.

Load your extension into Chrome and test it

Open Google Chrome and type chrome://extensions into the address bar. You will see a page that lists all your installed extensions. In the top right corner, turn on the toggle for Developer mode. Three new buttons appear: "Load unpacked", "Pack extension", and "Update".

Click Load unpacked. A folder browser opens. Navigate to your my-extension folder on your desktop or documents, select it, and click "Select Folder". Chrome reads all the files in that folder and loads your extension.

You should see your extension appear on the extensions page with a generic icon. Look at the top right of your Chrome window — you will see a small puzzle piece icon. Click it, and you should see your extension listed. Click your extension name, and the popup window opens. Click the button inside, and you should see the alert message "You clicked the button!"

If something does not work, go back to the extensions page and look for a red error message under your extension name. It will tell you what is wrong — usually a typo in a filename or a mistake in the code. Fix it, save the file, and click the refresh icon on the extensions page. Chrome will reload your extension with the changes.

Make changes and reload to see them instantly

Every time you edit one of your files, save it in Visual Studio Code, then click the refresh icon on the extensions page in Chrome. Your extension reloads with the new code. This is how you test and improve your extension as you build it.

Try changing the button text in popup.html from "Click me" to something else, save the file, refresh the extension, and click the extension icon again. You will see the new text. Try changing the button color in popup.css from green to blue, save, refresh, and the button will be blue. This cycle — edit, save, refresh, test — is how extension development works.

Once you are comfortable with this process, you can add more features: make the extension change the background color of web pages, save information to your computer, or interact with websites you visit. The same three languages (HTML, CSS, JavaScript) power all of it.

Frequently Asked Questions

Do I need to know how to code before I start?

No. If you can follow step-by-step instructions and copy code into a text editor, you can build a basic extension. Start with the simple example here, then learn more as you go. Many free tutorials online teach JavaScript specifically for extensions.

Can I publish my extension to the Chrome Web Store?

Yes, but you need a Google developer account and must pay a one-time registration fee. Your extension also has to follow Chrome's policies — it cannot collect data without permission, cannot contain malware, and cannot mislead users. Once approved, anyone can install it from the Web Store.

What if my extension breaks a website?

Your extension only runs on pages you tell it to. In the manifest.json file, you can add a "host_permissions" section that limits where the extension works. This prevents it from interfering with sites where you do not want it active. You can also add a toggle in your popup so users can turn it on and off.

How do I make my extension work on all websites?

Add this to your manifest.json file inside the "action" section: "default_icon": "icon.png". Then create a 128x128 pixel image, save it as icon.png in your folder, and that image becomes your extension icon. For the extension to run on all pages, add "host_permissions": ["<all_urls>"] to the manifest, but Chrome will ask users for permission when they install it.

What happens if I close Visual Studio Code?

Your extension keeps running in Chrome. Visual Studio Code is just the tool you use to edit the files. Once the files are saved and loaded into Chrome, the extension works whether or not the editor is open. You only need to open Visual Studio Code again when you want to make changes.