Thumbnail for Create Your First Chrome Extension

Create Your First Chrome Extension

2
59 views

Table of Contents

We use browsers everyday — whether it’s for coding debugging or getting things done. But at some point, you realize you want more control over how your browser behaves.

That’s where Chrome Extensions come in.

They let you extend the browser itself — automate workflows, enhance productivity, and build custom tooling directly into your daily environment.

In this guide, you’ll build your first “Hello world” Chrome extension from scratch. By the end, you’ll understand the core building blocks of Chrome Extensions and be ready to build your own.

Project Structure

Let’s start by setting up the basic structure of our extension.

Create a new folder:

my-first-extension/
│── manifest.json
│── popup.html
│── popup.js

You don’t need to fully understand everything yes — just get a quick idea of what each file does.

  • manifest.json :

    This is the core of your extension. Chrome reads this file first to understand what your extension does, which files to load, and what permissions it needs.

  • popup.html :

    This defines the UI of your extension — the small window that appears when you click the extension icon.

  • popup.js :

    This handles the logic inside the popup, like button click or user interactions.

Creating menifest.json

Now we will be creating most important file of your extension. This is the file Chrome reads first to understand your extension.

{
  "manifest_version": 3,
  "name": "Hello World Extension",
  "version": "1.0",
  "description": "My first Chrome extension",

  "action": {
    "default_popup": "popup.html"
  }
}

Let me explain what this code does,

  • menifest_version: 3

    Required version for modern Chrome extensions.

  • name & version:

    Basic information about your extenion.

  • action → default_popup

    Tells Chrome to open popup.html when the extension icon is clicked.

Creating popup.html

Now let’s create the UI of our extension. This is what the user will see when they click the extension icon.

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Extension</title>
  </head>
  <body>
    <h1>Hello World 👋</h1>
    <button id="btn">Click Me</button>

    <script src="popup.js"></script>
  </body>
</html>

Let me explain what this code does,

  • Displays a simple “Hello World” message

  • Adds a button

  • Link popup.js for functionality.

Creating popup.js

Now lets add functionality to our button. This is where your extension actually does something.

document.getElementById("btn").addEventListener("click", () => {
  alert("Hello from your Chrome Extension 🚀");
});

What id does,

Selects the button using its id → Listens for a click event → Shows an alert message when clicked.

Loading the Extension in Chrome

Now lets actually run it.

  1. Open Chrome and go to: chrome://extensions/

  2. Enable Developer Mode (top right)

  3. Click Load unpacked (top left)

  4. Select your my-first-extension folder

  5. Test it.

And that’s wrap-up, You just build a working Chrome Extension from scratch, now explore more and build something of your own. because,

we learn by doing!!!

About the Author

H

@hunterx

11 Followers18 Following

0 Comments