Chrome extensions allow you to deeply customize and enhance your browsing experience. Whether you want to modify webpages, create productivity tools, automate tasks, or publish to the Chrome Web Store, extensions provide a powerful yet beginner-friendly platform.

This guide takes you from the fundamentals to a fully functioning extension, using Manifest V3, the current standard for Chrome and Chromium-based browsers.

Understanding the Chrome Extension Architecture

Every Chrome extension is built from the following core components:

  • manifest.json — The required configuration file
  • Background Service Worker — Persistent logic running behind the scenes
  • Content Scripts — JavaScript injected into webpages
  • Popup UI — The little window that appears when the extension icon is clicked
  • Options Page — A dedicated page for extension settings
  • Assets — Icons, images, CSS, etc.

A typical extension structure looks like this:

my-extension/
│
├── manifest.json
├── background.js
├── content.js
└── popup/
    ├── popup.html
    └── popup.js

Step 1: Create the Project Folder

Create a folder called:

my-chrome-extension/

Inside it, add the following initial files:

manifest.json
background.js
content.js
popup/
├── popup.html
└── popup.js

Step 2: Write manifest.json

This file tells Chrome what your extension is, what it does, and what permissions it needs.

Create manifest.json:

{
  "manifest_version": 3,
  "name": "My First Chrome Extension",
  "version": "1.0.0",
  "description": "A simple Chrome extension built from scratch.",
  "action": {
    "default_popup": "popup/popup.html"
  },
  "permissions": ["scripting", "tabs"],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "128": "icon.png"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

Step 3: Create a Background Script

background.js runs behind the scenes.

Add something simple:

chrome.runtime.onInstalled.addListener(() => {
  console.log("Extension installed!");
});

Step 4: Write a Content Script

content.js runs inside webpages you specify.

console.log("Content script loaded on:", window.location.href);

// Example DOM manipulation
document.body.style.border = "5px solid red";

Step 5: Create the Popup UI

popup.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>My Extension</title>
  </head>
  <body>
    <h1>Hello!</h1>
    <button id="btn">Click Me</button>

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

popup.js

document.getElementById("btn").addEventListener("click", () => {
  alert("Button clicked from the popup!");
});

Step 6: Load the Extension in Chrome

  1. Open chrome://extensions/
  2. Enable Developer mode (top-right toggle)
  3. Click Load unpacked
  4. Select your my-chrome-extension/ folder

Your extension is now active!

You should see:

  • The extension icon (with popup)
  • Console logs in DevTools
  • Borders injected into webpages via content.js

Step 7: Add Messaging (Optional but Powerful)

Extensions often need communication between popup → background → content scripts.

Example of popup → background:

popup.js

chrome.runtime.sendMessage({ action: "ping" });

background.js

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.action === "ping") {
    console.log("Popup says hello!");
  }
});

Step 8: Package Your Extension

When ready to publish:

  1. Go to chrome://extensions/
  2. Click Pack extension
  3. Upload .zip to the Chrome Web Store Developer Dashboard

Happy building! 🚀

This foundation is enough to build a wide range of powerful Chrome extensions—from simple UI tools to advanced automation and user-script systems.