How to Build a Chrome Extension in 2026: A Beginner's Guide

Published: April 17, 2026 • Reading time: 12 minutes

Chrome extensions are one of the most accessible ways to build software that millions of people can use. With over 3 billion Chrome users worldwide, a useful extension can reach a massive audience with relatively low development effort.

In this guide, I'll walk you through building a simple Chrome extension from scratch using Manifest V3 (the current standard). By the end, you'll understand the core concepts and be ready to build your own ideas.

What You'll Need

Basic JavaScript knowledge
A text editor (VS Code recommended)
Chrome browser for testing
About 30 minutes

Understanding Chrome Extension Architecture

Every Chrome extension consists of these key components:

manifest.json: Configuration file that defines your extension
background script: Runs in the background, handles events
content script: Runs on web pages, can modify DOM
popup: UI that appears when clicking the extension icon
options page: Settings UI for your extension

Not every extension needs all of these—a simple extension might just need a manifest and a popup.

Step 1: Create the Manifest

Create a new folder for your extension, then add a manifest.json file:

{
  "manifest_version": 3,
  "name": "My First Extension",
  "version": "1.0",
  "description": "A simple Chrome extension example",
  "permissions": ["activeTab"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    }
  }
}
            

Key changes in Manifest V3: Version 3 replaced background pages with service workers, removed remotely hosted code, and introduced stricter CSP policies. Always use V3 for new extensions.

Step 2: Create the Popup HTML

The popup is what users see when they click your extension icon:

<!DOCTYPE html>
<html>
<head>
  <title>My Extension</title>
  <style>
    body { 
      width: 300px; 
      padding: 15px; 
      font-family: Arial, sans-serif;
    }
    button {
      background: #4285f4;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
      width: 100%;
    }
    button:hover { background: #3367d6; }
  </style>
</head>
<body>
  <h3>Quick Action</h3>
  <p id="status">Click to get page title</p>
  <button id="actionBtn">Get Title</button>
  <script src="popup.js"></script>
</body>
</html>
            

Step 3: Add Popup JavaScript

Create popup.js to handle user interactions:

// Get the current tab and extract its title
document.getElementById('actionBtn').addEventListener('click', async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  
  document.getElementById('status').textContent = 
    `Title: ${tab.title}`;
});
            

Step 4: Test Your Extension

Open Chrome and go to chrome://extensions
Enable "Developer mode" (toggle in top right)
Click "Load unpacked" and select your extension folder
Your extension should appear in the toolbar
Click the extension icon to test it

Common mistake: Forgetting to reload the extension after making changes. Click the refresh icon on your extension card in chrome://extensions to update it.

Step 5: Add Content Script (Optional)

If you want to interact with web pages, add a content script:

Update your manifest:

"content_scripts": [{
  "matches": ["<all_urls>"],
  "js": ["content.js"]
}]
            

Create content.js:

// Listen for messages from popup or background
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'getSelection') {
    const selection = window.getSelection().toString();
    sendResponse({ selection });
  }
});
            

Popular Extension Ideas

Looking for inspiration? Here are proven extension categories:

Productivity: Tab managers, note-taking, time trackers
Content modification: Ad blockers, dark mode, font changers
AI assistants: Text summarizers, writing helpers, translators
Developer tools: Color pickers, JSON formatters, API testers
Shopping: Price trackers, coupon finders, review aggregators

Need a Head Start?

Our AI Quick Assist Chrome extension is ready to use - highlight any text on a webpage and get instant AI help. Study the code or use it as a starting point for your own extension.

Get the Extension →

Publishing to the Chrome Web Store

When you're ready to share your extension:

Create a Chrome Web Store developer account ($5 one-time fee)
Prepare your extension assets (icons, screenshots, promotional images)
Write a compelling description and select relevant categories
Upload your extension ZIP file
Submit for review (typically takes 24-48 hours)

Packaging Your Extension

# Create a ZIP file of your extension
zip -r my-extension.zip . -x "*.git*" -x "*node_modules*"
            

Best Practices

Request minimal permissions: Users are suspicious of extensions that want too much access
Keep it fast: Extensions should feel instant; avoid heavy operations
Handle errors gracefully: Web pages can be unpredictable
Test on multiple sites: Different sites have different structures
Provide clear UI: Users should understand what your extension does

Resources

Chrome Extension Documentation
Chrome Extension Samples
Chrome Extensions for Productivity (our guide)

Next Steps

Now that you understand the basics:

Think of a problem you encounter regularly while browsing
Sketch how an extension could solve it
Start with the simplest possible version
Iterate based on your own usage

The best extensions come from solving real problems you experience yourself. Happy building!