What a Chrome extension is and what you can build

A Chrome extension is a small program that adds a feature or tool to your browser. It lives in your toolbar, runs on the pages you visit, or both. You can build one that changes how a website looks, blocks certain content, saves information you type repeatedly, or reminds you to do something at a set time.

The simplest extensions use three files: a manifest (which tells Chrome what the extension does), HTML (which creates any popup window or settings page), and JavaScript (which makes things happen). You do not need to know how to code professionally — if you can follow step-by-step instructions and edit text files, you can build a working extension.

Most extensions you build for yourself will never go on the Chrome Web Store. You load them directly into Chrome in "developer mode," which means only you can use them unless you share the folder. That is fine for personal tools.

Key Takeaways

  • Every Chrome extension needs three core files: manifest.json (describes what it does), a popup.html file (creates the visible interface), and a script.js file (makes it work).
  • You create these files in a folder on your computer using any text editor, then load that folder into Chrome through the Extensions page in developer mode.
  • The manifest file must list the permissions your extension needs — for example, permission to read the current page, or permission to store data locally.
  • Testing happens in Chrome itself; you reload the extension after each change to see what breaks and what works.

Setting up your extension folder and files

Create a new folder on your computer and name it something clear, like "my-first-extension". Inside that folder, you will create three files. Use a text editor like Notepad (Windows), TextEdit (Mac), or any code editor. Do not use Microsoft Word — it adds invisible formatting that breaks extensions.

The first file is manifest.json. This file tells Chrome the extension's name, version, what it does, and what permissions it needs. Create a blank file, name it exactly "manifest.json", and paste this text into it:

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

The second file is popup.html. This creates the small window that appears when you click the extension icon. Create a blank file, name it "popup.html", and paste this into it:

<!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> <h2>My Extension</h2> <p>Click the button below.</p> <button id="myButton">Click Me</button> <script src="script.js"></script> </body> </html>

The third file is script.js. This file contains the code that actually does something when you click the button. Create a blank file, name it "script.js", and paste this into it:

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

Now you have a folder with three files: manifest.json, popup.html, and script.js. Save all three and close your text editor.

Loading your extension into Chrome

Open Chrome and type this into the address bar: chrome://extensions. Press Enter. You will see a page listing all your installed extensions.

In the top right corner of that page, toggle on the switch labeled Developer mode. Three new buttons will appear: "Load unpacked", "Pack extension", and "Update". Click Load unpacked.

A file browser window will open. Navigate to the folder you created (the one containing manifest.json, popup.html, and script.js). Click on the folder itself — do not open it — then click the "Select Folder" button at the bottom right.

Chrome will load your extension. You should see it appear on the extensions page with an icon and the name "My First Extension". If you see an error message instead, check that all three files are in the same folder and that the filenames are spelled exactly right, including the dots.

Testing your extension and making changes

Look for the extension icon in your Chrome toolbar — it usually appears as a small puzzle piece or a custom icon. Click it. A small popup window should appear with the heading "My Extension", some text, and a green button that says "Click Me". Click the button. An alert box should pop up saying "Button clicked!".

If nothing happens, or if you see an error, the most common problems are: the files are not in the same folder, the filenames have typos, or the text inside the files was not copied exactly. Check all three.

To make changes, edit the files in your text editor, save them, then go back to the extensions page and click the refresh icon (curved arrow) next to your extension. Chrome will reload it with your changes. This reload step is essential — Chrome does not automatically pick up edits.

Try editing popup.html: change the text "Click Me" to something else, save the file, reload the extension, and click the icon again. You should see your new text. This is how you test every change you make.

Understanding permissions and what your extension can access

The manifest.json file includes a "permissions" section. This tells Chrome what the extension is allowed to do. In the example above, activeTab means the extension can see the page you are currently viewing, and scripting means it can run code on that page.

If you want your extension to do something with the current webpage — like highlight certain words, change colors, or read text — you need both of those permissions. If your extension only has a popup window and does not touch the webpage itself, you might not need them.

Other common permissions include storage (to save data on your computer that the extension remembers between sessions) and tabs (to see what tabs you have open). You only add permissions you actually use. Chrome will warn you if you request permissions you do not need.

Building something slightly more useful

Once the basic extension works, you can expand it. A common next step is to save information. Replace the contents of your script.js file with this:

document.getElementById("myButton").addEventListener("click", function() { let count = localStorage.getItem("clickCount") || 0; count = parseInt(count) + 1; localStorage.setItem("clickCount", count); alert("You have clicked " + count + " times!"); });

This code saves how many times you clicked the button, even after you close Chrome. The next time you open the extension, it will remember the count. Save the file, reload the extension, and test it by clicking multiple times and closing the popup.

Another useful addition is to run code on every webpage you visit. To do that, you need a "content script" — a separate JavaScript file that Chrome runs on pages automatically. This requires adding a "content_scripts" section to your manifest.json, which is more complex. Start with the popup version first, get comfortable with how it works, then expand from there.

Sharing your extension and next steps

If you want to share your extension with someone else, send them the entire folder. They can load it into their own Chrome using the same "Load unpacked" method. The extension will work on their computer exactly as it works on yours.

If you want to publish your extension on the Chrome Web Store so anyone can find and install it, you will need to create a developer account, pay a one-time fee, and submit your extension for review. That process is more involved and requires you to follow Chrome's policies. Most personal extensions never go through that step.

To improve your skills, look at the code of extensions you already use. Right-click on any extension icon, select "Manage extension", then click "Details", then scroll down and click "View in Chrome Web Store". Many extensions link to their source code on GitHub, where you can read how others solved problems you might face.

Frequently Asked Questions

What if I get an error when I try to load the extension?

The most common error is "Manifest file is missing or unreadable." This means the manifest.json file is not in the folder you selected, or it has a typo in the filename. Check that the file is named exactly "manifest.json" with no extra spaces or capital letters in the wrong place. If the error says something about JSON syntax, you may have accidentally changed a comma or bracket when copying the text.

Can I edit the extension while it is loaded in Chrome?

Yes. Edit the files in your text editor, save them, then click the refresh icon next to the extension on the extensions page. Chrome will reload it when ready. You do not need to unload and reload it each time.

How do I make my extension run on every webpage, not just when I click the icon?

You need a content script, which is a JavaScript file that runs automatically on pages. This requires adding a "content_scripts" section to your manifest.json and creating a new file. It is more complex than a popup extension, so start with the popup version first and add content scripts once you are comfortable with the basics.

What if I want to add a settings page where I can change how the extension works?

Create a new HTML file called "options.html" with a form that saves settings to localStorage, then add an "options_page" entry to your manifest.json pointing to it. Users can right-click the extension icon and select "Options" to open your settings page. This is a natural next step after you have a working popup.

Is there a way to test my extension without reloading it every time?

Not automatically, but you can use Chrome's DevTools to debug. Right-click the extension popup and select "Inspect", which opens the developer console. You can see error messages there that tell you exactly what went wrong, which is faster than guessing. This helps you catch mistakes before you reload.