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 to be a professional programmer to make one — many straightforward extensions are built with the same languages that power websites: HTML, CSS, and JavaScript. If you have never written code before, start with a very small extension that does one thing well, like changing the background color or displaying a message when you open a new tab.

You will need three things: a text editor to write your code (Notepad on Windows or TextEdit on Mac work, but a dedicated editor like Visual Studio Code is easier), the Chrome browser itself, and a folder on your computer to hold your extension files. You do not need to pay for anything or install special software beyond what you already have.

The extension you build will only work on your own computer until you publish it to the Chrome Web Store, which requires a Google account and a one-time $5 developer fee. For learning and personal use, you can test your extension locally without publishing it.

Key Takeaways

  • Every Chrome extension needs at least three files: a manifest file that describes what the extension does, an HTML file for the interface, and a JavaScript file for the behavior.
  • You write these files in a text editor, save them in a folder, and load that folder into Chrome using Developer Mode to test your extension.
  • Start with a straightforward extension that does one task — like displaying text or changing a page element — before attempting something complex.
  • Testing happens in Chrome itself; you can reload your extension when ready to see changes without restarting the browser.

Create the three required files

Every Chrome extension starts with a manifest file named manifest.json. This file tells Chrome what your extension is called, what it does, and which permissions it needs. Open your text editor and create a new file with this content:

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

Save this file as manifest.json in a new folder. The folder name does not matter — call it my-extension or anything you prefer. Next, create a file called popup.html in the same folder. This is the interface that appears when someone clicks your extension icon:

<!DOCTYPE html> <html> <head> <style> body { width: 300px; padding: 10px; font-family: Arial; } </style> </head> <body> <h1>Hello</h1> <p>This is my extension.</p> <script src="popup.js"></script> </body> </html>

Finally, create a file called popup.js in the same folder. This file contains the code that makes your extension do something. For now, leave it empty or add a single line that logs a message:

console.log("Extension loaded");

You now have three files in one folder. That is all you need to load and test your extension in Chrome.

Load your extension into Chrome

Open Chrome and go to chrome://extensions in the address bar. You will see a page listing all your installed extensions. In the top right corner, toggle on Developer Mode. Three new buttons appear: "Load unpacked", "Pack extension", and "Update".

Click "Load unpacked". A file browser opens. Navigate to the folder where you saved your three files and select it. Chrome reads the manifest file, checks that everything is in order, and adds your extension to the list. You should see your extension name, version number, and a small icon in the top right of your browser window.

Click the icon to open your extension. The popup you created in popup.html appears. If you see your "Hello" message, the extension loaded correctly. If you see an error, check that all three files are in the same folder and that the file names match exactly what the manifest file expects.

Make your extension do something

The simplest extensions change something on the page you are viewing. To do this, you need to add a content script — a JavaScript file that runs on web pages. Edit your manifest.json file and add this section after the "action" block:

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

Create a new file called content.js in the same folder. Add this code to change the background color of every page to light blue:

document.body.style.backgroundColor = "lightblue";

Save the file. Go back to chrome://extensions, find your extension, and click the reload icon (circular arrow). Now visit any website. The background should turn light blue. Change the color in content.js to "lightgreen" or "lightyellow", save, reload the extension, and refresh the page. You will see the new color when ready.

This reload-and-test cycle is how you build extensions. Make a small change, reload, and see what happens. Start with changes that are straightforward to see — color changes, text additions, hiding elements — before moving to more complex behavior.

Common things extensions do

Once you understand the basic structure, you can add more features by editing your JavaScript files. Here are patterns you will use often:

Respond to a button click: In your popup.html, add a button with an id. In popup.js, find that button and run code when it is clicked. This is how extensions let users control what happens.

Store information: Chrome provides storage that persists between sessions. Use chrome.storage.sync.set() to save data and chrome.storage.sync.get() to retrieve it. This lets your extension remember user preferences.

Run code on specific sites only: In your manifest, change the "matches" pattern from <all_urls> to something like "https://www.example.com/*". Your extension will only run on that site.

Add a keyboard shortcut: Add a "commands" section to your manifest to let users trigger your extension with a key combination like Ctrl+Shift+Y.

Each of these patterns requires adding permissions to your manifest file. Chrome will warn you if your extension tries to do something it does not have permission for, so you will know what to add next.

Publish to the Chrome Web Store

When 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 and must pay a one-time $5 developer fee.

Upload a zip file of your extension folder. Add screenshots, a description, and category tags. Chrome reviews your extension to make sure it does not violate their policies — mainly that it does not steal data, inject ads, or mislead users about what it does. Review usually takes a few hours to a few days.

Once approved, your extension appears in the Chrome Web Store and anyone can install it by clicking "Add to Chrome". You can update it anytime by uploading a new version with a higher version number in your manifest file.

Frequently Asked Questions

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

You need to understand the basics of HTML, CSS, and JavaScript, but you do not need to be an informed. Start by modifying existing code rather than writing from scratch. Many straightforward extensions use only a few lines of JavaScript. Online tutorials and documentation will show you the exact code to copy for common tasks.

Why does my extension stop working after I restart Chrome?

If you loaded it in Developer Mode, it stays loaded. If you see an error message on the extensions page, Chrome detected a problem in your code — usually a typo in a file name or a syntax error in JavaScript. Check that all file names match exactly what your manifest expects, and that your JavaScript has no missing brackets or semicolons.

Can I test my extension on my phone?

Chrome extensions only work on desktop Chrome, not on mobile Chrome or other browsers. You can test only on a computer. If you want to create something for mobile, you would need to build a mobile app instead, which is a different process.

What if I want my extension to work on Firefox or Safari too?

Firefox and Safari use different extension formats, though they are similar to Chrome's. You would need to create separate versions for each browser. Start with Chrome, get it working well, then research the specific requirements for other browsers if you want to expand.

How do I debug my extension if something is not working?

Right-click your extension icon and select "Inspect popup" to open the developer tools. You will see any error messages in the Console tab. For content scripts, open the developer tools on any webpage (F12), go to the Console tab, and look for errors. The error message usually tells you exactly what line of code has the problem.