Have you ever wanted to create your own Chrome extension — like an ad blocker, productivity tool, or fun popup app — but didn’t know where to start? The good news is that building one is surprisingly simple. All you need is a basic understanding of HTML, CSS, and JavaScript.
In this guide, I’ll walk you step-by-step through building a working Chrome extension — from setup to launch.
Step 1: Set Up Your Folder Structure
Start by creating a new folder for your project. You can name it whatever you like, for example:
my-chrome-extension/
│
├── manifest.json
├── popup.html
├── popup.js
└── popup.css
This folder will contain all the files your extension needs.
Step 2: Create the Manifest File
Every Chrome extension needs a manifest.json file. It’s basically a configuration file that tells Chrome what your extension does and what files it uses.
Create a file named manifest.json inside your folder and add the following code:
{
"manifest_version": 3,
"name": "My First Chrome Extension",
"version": "1.0",
"description": "A simple Chrome extension example.",
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
},
"permissions": []
}
Step 3: Build Your Popup HTML
When users click your extension’s icon, Chrome opens a popup window. Let’s build that next.
Create a popup.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Extension</title>
<link rel="stylesheet" href="popup.css">
</head>
<body>
<h1>Hello Chrome!</h1>
<button id="changeColor">Change Background</button>
<script src="popup.js"></script>
</body>
</html>
This simple page contains a title and a button that will trigger some JavaScript.
Step 5: Add Some JavaScript
Now, let’s make the button work.
Create a popup.js file:
document.getElementById('changeColor').addEventListener('click', () => {
document.body.style.backgroundColor =
document.body.style.backgroundColor === 'lightblue' ? 'white' : 'lightblue';
}); This script toggles the popup’s background color every time you click the button.
Step 6: Load Your Extension in Chrome
Now for the fun part — seeing your extension in action!
Open Chrome and navigate to:
chrome://extensionsEnable Developer mode (toggle at the top right).
Click “Load unpacked”.
Select your
my-chrome-extensionfolder.
You’ll see your extension appear in the Chrome toolbar.
Step 7: Test It!
Click the extension icon.
A small popup appears with your HTML interface.
Click the Change Background button — the color toggles between white and blue!
That’s it — you just built your first Chrome extension.
Bonus: Add More Power with Content Scripts
If you want your extension to interact with the current web page (like highlighting text, changing colors, or grabbing data), you can add a content script.
A content script runs directly inside the webpage and can modify its content using JavaScript. I’ll cover that in a follow-up tutorial — stay tuned!
Conclusion
You now have a fully working Chrome extension powered by HTML, CSS, and JavaScript. From here, you can:
Customize the popup interface.
Add new features using content scripts.
Publish your extension on the Chrome Web Store.
Building a Chrome extension is a fantastic way to learn front-end development and create tools you can actually use every day.