Udemezue John

Posted on Mar 5

How To Build a Chrome Extension With JavaScript

#webdev #programming #javascript #beginners

Introduction

Building a Chrome extension with JavaScript is one of the easiest ways to add custom features to your browser.

Whether it's blocking ads, saving bookmarks, or automating tasks, extensions make everyday browsing better.

The best part? You don’t need to be a pro developer to create one. If you know basic JavaScript, HTML, and CSS, you're good to go.

Google Chrome has over 3.2 billion users worldwide, making extensions a great way to share your ideas with a massive audience.

If you’re a developer, you can even make money from your extensions through ads, subscriptions, or one-time purchases.

But even if you're just curious, learning how to build one is a fun project that improves your coding skills.

Let me walk you through everything step by step—from setting up your first extension to making it work inside Chrome.

What Is a Chrome Extension?

A Chrome extension is a small software program that adds extra features to the Chrome browser.

It can change how websites look, add shortcuts, or even automate tasks.

Extensions use standard web technologies like JavaScript, HTML, and CSS, making them easy to build if you're familiar with web development.

Examples of Popular Chrome Extensions
Grammarly – Checks spelling and grammar.
AdBlock – Blocks ads on websites.
Honey – Finds and applies coupon codes for online shopping.

Now, let’s build one from scratch.

Step 1: Set Up Your Project.

Before writing any code, create a new folder on your computer. This will hold all your extension files. You can name it "MyFirstExtension" or anything you like.

Inside this folder, create the following files:

manifest.json (the extension's configuration file)
background.js (the main JavaScript file)
popup.html (the user interface)
popup.js (JavaScript for the popup)
icon.png (the extension's icon)

Step 2: Create the Manifest File

The manifest.json file tells Chrome everything about your extension—its name, version, permissions, and more. Open a text editor and paste this code inside manifest.json:

{
  "manifest_version": 3,
  "name": "My First Extension",
  "version": "1.0",
  "description": "This is a simple Chrome extension.",
  "permissions": ["storage"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "background": {
    "service_worker": "background.js"
  }
}

Save the file in your project folder.

Step 3: Create the Popup Interface

The popup is the small window that appears when you click the extension icon. Create a new file called popup.html and add this code:

<!DOCTYPE html>
<html>
<head>
    <title>My Extension</title>
    <style>
        body { width: 200px; padding: 10px; text-align: center; }
        button { padding: 10px; }
    </style>
</head>
<body>
    <h2>Hello!</h2>
    <button id="clickMe">Click Me</button>
    <script src="popup.js"></script>
</body>
</html>

This creates a simple popup with a button.

Step 4: Add JavaScript to the Popup

Now, let’s make the button do something it is when clicked. Create a popup.js file and add this code:

document.getElementById("clickMe").addEventListener("click", function() {
    alert("Hello from your Chrome extension!");
});

This script listens for a button click and shows an alert message.

Step 5: Add a Background Script

Background scripts run behind the scenes and help the extension perform tasks, even when the pop-up is closed. Create a background.js file and add this code:

console.log("Background script running...");

Step 6: Load the Extension in Chrome

Open Google Chrome and type chrome://extensions/ in the address bar.
Turn on Developer mode (top right corner).
Click Load unpacked and select your extension folder.
Your extension should now appear in the list. Click on the icon in the toolbar to see the popup.

Step 7: Test and Improve

Now that your extension is working, you can improve it by adding more features. Try storing user settings, interacting with web pages, or adding custom styles.

FAQs

1. Can I publish my Chrome extension?

Yes! You can publish it on the Chrome Web Store by creating a developer account and uploading your extension.

2. Can I make money from a Chrome extension?

Yes, developers earn through ads, subscriptions, or selling premium versions of their extensions.

3. Do I need to know advanced JavaScript?

No, basic JavaScript is enough to build simple extensions. But for more advanced features, learning APIs and JavaScript frameworks can help.

Further Resources

Chrome Extensions Documentation – Official guide from Google.
Manifest v3 Migration Guide – Learn about the latest changes in Chrome extensions.
Chrome Developer Dashboard – Where you publish your extension.

Conclusion

Building a Chrome extension with JavaScript is a great way to learn coding and create something useful.

Whether you want to personalize your browser, automate tasks, or even start a business, extensions open up many possibilities.

So, what kind of Chrome extension would you like to build?

DEV Community