How to Build Your First Chrome Extension: A Complete Beginner’s Tutorial (2026)

*As an Amazon Associate I earn from qualifying purchases.

TL;DR

We’re building a Tab Counter extension that displays the number of open tabs in a badge on your toolbar. You’ll learn Manifest V3 structure, write HTML and JavaScript for a popup, create a background service worker, and load your extension locally. Time: 30 minutes. Skills: HTML, basic JavaScript, Chrome extension API fundamentals.

Why Build Your Own Chrome Extension?

Most people think of Chrome extensions as third-party tools downloaded from the Web Store. But here’s the secret: building your own is not only easier than you’d expect—it’s also one of the fastest ways to customize your browsing experience.

Think about the repetitive tasks you do every day. Reformatting text, converting currencies, tracking open tasks, managing bookmarks, or injecting templates into forms. Each of these is a perfect candidate for an extension. And instead of waiting for a developer to build it or hoping someone on GitHub has solved your exact problem, you can build it yourself in under an hour.

The barrier to entry is lower than ever. You don’t need to understand complex build tools, frameworks, or architecture patterns. You just need to know a little HTML, CSS, and JavaScript—and even if you’re new to JavaScript, you can copy-paste and modify the code we’re about to show you.

The best extension is the one that solves *your* problem, exactly the way *you* want it solved.

What You Need to Know First

Before we write code, let’s cover the fundamentals of Chrome extensions in 2026.

Manifest V3: The New Standard

Chrome shifted to Manifest V3 a few years ago, and it’s now the only way to build extensions. Manifest V3 is stricter than its predecessor—it disallows certain practices (like remote code execution) and adds new security features. If you find old tutorials using Manifest V2, skip them. We’re using V3.

The Three Core Files

Every Chrome extension has three essential components:

manifest.json — Your extension’s identity and configuration. Tells Chrome what permissions you need, what scripts to run, and what your extension does.
popup.html — The UI that appears when users click your extension icon in the toolbar. (Optional if your extension doesn’t have visible UI, but ours does.)
Background script — A service worker that runs in the background and handles logic, listens for events, and manages state. In Manifest V3, this is background.js and must be declared as a service worker.

Our Tab Counter will include all three, plus a popup.js file to connect the popup to the background script.

Step-by-Step: Build Your Tab Counter Extension

Step 1: Create Your Project Folder

Create a new folder on your computer called tab-counter-extension. You can put it anywhere—your desktop, documents folder, wherever you prefer.

mkdir ~/Desktop/tab-counter-extension
cd ~/Desktop/tab-counter-extension

Step 2: Write manifest.json

Create a file called manifest.json in your project folder. This file tells Chrome everything about your extension.

{
  "manifest_version": 3,
  "name": "Tab Counter",
  "version": "1.0",
  "description": "Shows the number of open tabs in a badge.",
  "permissions": ["tabs"],
  "action": {
    "default_popup": "popup.html",
    "default_title": "Tab Counter"
  },
  "background": {
    "service_worker": "background.js"
  }
}

What this does: Manifest V3 tells Chrome to load a popup when you click the extension icon, run a background service worker, and request permission to access the tabs API.

Step 3: Write popup.html

Create a file called popup.html. This is the UI that users see when they click your extension.

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      width: 250px;
      padding: 20px;
      font-family: Arial, sans-serif;
      text-align: center;
      background: #f5f5f5;
    }
    h1 {
      margin: 0;
      font-size: 14px;
      color: #333;
    }
    #tab-count {
      font-size: 48px;
      font-weight: bold;
      color: #0066cc;
      margin: 10px 0;
    }
    p {
      margin: 10px 0 0;
      font-size: 12px;
      color: #666;
    }
  </style>
</head>
<body>
  <h1>Open Tabs</h1>
  <div id="tab-count">—</div>
  <p>Click to refresh count</p>
  <script src="popup.js"></script>
</body>
</html>

What this does: Creates a simple popup with a heading, a place to display the tab count, and a message. The count starts as “—” and will be filled in by JavaScript.

Step 4: Write popup.js

Create a file called popup.js. This script runs when the popup opens and fetches the tab count.

// Query the active tabs when popup opens
chrome.tabs.query({}, (tabs) => {
  const tabCount = tabs.length;
  document.getElementById('tab-count').textContent = tabCount;
});

What this does: When the popup opens, it uses the Chrome tabs API to count all open tabs and displays the number in the popup.

Step 5: Write background.js

Create a file called background.js. This service worker runs in the background and updates the badge whenever tabs change.

// Update badge when tabs change
function updateBadge() {
  chrome.tabs.query({}, (tabs) => {
    chrome.action.setBadgeText({ text: tabs.length.toString() });
    chrome.action.setBadgeBackgroundColor({ color: '#0066cc' });
  });
}

// Listen for tab created
chrome.tabs.onCreated.addListener(updateBadge);

// Listen for tab removed
chrome.tabs.onRemoved.addListener(updateBadge);

// Listen for tab activated (switched)
chrome.tabs.onActivated.addListener(updateBadge);

// Update badge on startup
updateBadge();

What this does: Listens for tab events (created, removed, activated) and updates the badge (the small number that appears on the extension icon) to always show the current tab count. On startup, it counts existing tabs and sets the initial badge.

Step 6: Load Your Extension in Chrome

Now comes the magic moment. You’ll load your unpackaged extension directly into Chrome for testing.

Open Chrome and go to chrome://extensions in the address bar.
Toggle Developer mode in the top right corner.
Click Load unpacked.
Select your tab-counter-extension folder.

Your extension should now appear in the list. If there are any errors, Chrome will show them in red. Check your code against the examples above and reload.

Step 7: Test Your Extension

Now test it:

Look for the extension icon in your Chrome toolbar (top right, puzzle piece area).
Click it to open the popup. You should see the total number of open tabs.
Open a new tab and click the extension again—the count should increase.
Notice the small badge on the extension icon itself—it shows the tab count too.

DEBUGGING TIP

If something doesn’t work, right-click the extension icon and select Inspect popup to see the browser console. This will show any JavaScript errors. Also, you can click Service Worker in your extension’s details page to debug the background script.

Understanding What Just Happened

You’ve created a working Chrome extension from scratch. Here’s how it works:

When Chrome starts, it loads your manifest.json and starts the background service worker (background.js).
The background script listens for tab events and keeps the badge updated.
When you click the extension icon, Chrome opens your popup and runs popup.js, which queries the tabs API and displays the count.
The extension persists as long as Chrome is running, and the badge always reflects the current tab count.

Five Ideas for Your Next Extension

Now that you understand the basics, here are five simple extensions you can build next:

1. Word Counter

Inject a script into web pages that counts words in selected text and displays the count in a popup. Use content_scripts in your manifest and the Selection API in JavaScript.

2. Dark Mode Toggle

Add a popup button that injects CSS into the current page, toggling a dark stylesheet on and off. Perfect for late-night browsing. Requires content scripts and scripting permission.

3. Custom New Tab Page

Replace Chrome’s default new tab page with your own. Use chrome_url_overrides in the manifest to point to a custom newtab.html. Add widgets, quotes, or links.

4. Redirect Rules

Build an extension that redirects certain URLs. For example, redirect Twitter to Nitter, or medium.com to a proxy. Use the webRequest or declarativeNetRequest API.

5. Quick Notes

A popup with a textarea where you can jot down quick notes without leaving your page. Store notes in chrome.storage.local and retrieve them on subsequent clicks.

PERMISSION BEST PRACTICE

Always request only the permissions your extension needs. Users are more likely to trust and install extensions with minimal permissions. Our Tab Counter only asks for "tabs"—nothing more.

Publishing to the Chrome Web Store

Once you’re happy with your extension, you can publish it to the Chrome Web Store so others can install it.

The Process (Overview)

Create a Google developer account (if you don’t have one).
Pay a $5 one-time developer registration fee.
Prepare a zip file of your extension folder.
Upload it to the Chrome Web Store developer dashboard.
Fill in your extension’s name, description, screenshots, and category.
Submit for review. Google usually reviews within 24 hours.
Once approved, your extension goes live and users can install it.

What Google Looks For

Google reviews extensions for security, privacy, and policy compliance. Make sure:

Your extension does what it says it does.
You don’t collect user data without permission and disclosure.
You don’t inject ads or redirect users without consent.
Your description and screenshots are honest and accurate.

The Tab Counter extension would pass review easily—it’s simple, secure, and transparent about what it does.

Frequently Asked Questions

Do I need to know advanced JavaScript?

No. The Tab Counter uses basic JavaScript: query() to fetch tabs, addEventListener() patterns for listeners, and simple DOM manipulation. If you can write functions and work with arrays, you can build extensions.

Can I use React or Vue in my extension?

Yes, but it adds complexity for beginners. Start with vanilla JavaScript first. Once you’re comfortable, you can explore bundling React for more complex popups.

Will my extension slow down Chrome?

Not if you code efficiently. The Tab Counter uses minimal resources because the background service worker only wakes up when tabs change. Service workers are much lighter than old background pages.

Can I make money from my extension?

The Chrome Web Store doesn’t have revenue sharing, but you can monetize through sponsorships, premium tiers, or redirecting users to your website. Keep it ethical and transparent.

What if I want to distribute my extension privately?

You can. Just zip your folder and send it to users. They’ll load it unpacked via chrome://extensions (it requires Developer mode, so it’s not ideal for non-technical users, but it works for teams and friends).

How do I update my extension after publishing?

Increment the version number in manifest.json, upload a new zip to the Web Store dashboard, and re-submit. Google reviews updates faster than initial submissions—usually within a few hours.

Next Steps

You now know how to build a Chrome extension. The Tab Counter is simple, but it teaches you every fundamental concept you need:

Manifest V3 structure and permissions.
Service workers and event listeners.
Popup UI and popup-to-background communication.
Chrome APIs (in this case, tabs and action APIs).

From here, you can explore more complex extensions: content scripts for page interaction, storage APIs for persistence, alarms for scheduled tasks, and more.

The best way to learn is to build. Pick one of the five ideas above, or think of your own problem to solve. You’ve got the foundation now.

Ready to Keep Learning?

Explore the broader ecosystem of Chrome extensions and productivity tools designed to supercharge your workflow.

Browse Chrome Extensions Guide