DEV Community

Cover image for Things Nobody Tells You About Building Chrome Extensions
Shubham Gupta
Shubham Gupta

Posted on

Things Nobody Tells You About Building Chrome Extensions

#beginners #javascript #chrome #webdev

When I started learning Chrome extension development, I thought it would be easy.

I already knew:

  • React
  • JavaScript
  • APIs
  • Node.js

So I assumed:
“Building a browser extension should take only a few hours.”

I was wrong. 😅

Chrome extensions work very differently from normal web applications.

You need to understand:

  • manifests,
  • permissions,
  • content scripts,
  • service workers,
  • browser security,
  • an extension architecture.

In this article, I’ll explain the things that confused me the most while building my first Chrome extension.

If you’re a beginner, this guide may save you many hours.

First, What Is a Chrome Extension?

A Chrome extension is a small application that runs inside the browser.

Extensions can:

  • modify webpages,
  • automate tasks,
  • save notes,
  • block ads,
  • use AI,
  • summarize content,
  • and much more.

Examples:

  • Grammarly
  • Honey
  • Dark Reader
  • Momentum

All of these are browser extensions.

The Most Important File: manifest.json

The first confusing thing in Chrome extension development is the manifest.json file.

Think of it like the brain of your extension.

This file tells Chrome:

  • your extension name,
  • version,
  • permissions,
  • scripts,
  • icons,
  • popup pages,
  • and features.

Without this file, your extension will not work.

Example:

{
  "manifest_version": 3,
  "name": "My First Extension",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  }
}
Enter fullscreen mode Exit fullscreen mode

At first this looks simple.

But as your extension grows, this file becomes very important.

What Is Manifest Version 3?

Most old tutorials use Manifest V2.

But Chrome now uses Manifest V3 (MV3).

This changes many things.

The biggest change:
background scripts are replaced with service workers.

This means:

  • extensions do not stay active all the time,
  • Chrome stops them when inactive,
  • and they restart only when needed.

As a beginner, this confused me a lot because I expected my extension to behave like a normal application.

Understanding Extension Parts

A Chrome extension usually has 4 main parts.

1. Popup

This is the small UI that opens when users click the extension icon.

Usually built using:

  • HTML
  • CSS
  • JavaScript
  • React

Example:

  • Todo popup
  • AI assistant popup
  • Note-taking UI

2. Content Script

This script runs inside websites.

It can:

  • read webpage content,
  • modify the DOM,
  • inject buttons,
  • extract text.

Example:
A YouTube summarizer extension reads video titles and transcripts using content scripts.

This was one of the hardest concepts for me initially.

3. Background Service Worker

This handles background logic.

Examples:

  • listening for browser events,
  • handling API calls,
  • managing notifications.

But unlike normal apps:
it does not stay alive forever.

This behavior creates many beginner bugs.

4. Storage

Extensions can save data using Chrome storage APIs.

Example:

  • saved notes,
  • settings,
  • AI prompts,
  • authentication tokens.

Permissions Are Extremely Important

Extensions often ask for permissions like:

  • tabs
  • storage
  • activeTab
  • scripting

Example:

"permissions": ["storage", "activeTab"]
Enter fullscreen mode Exit fullscreen mode

At first I added many permissions without thinking.

But I later realized:
too many permissions make users suspicious.

Good extensions request only what they truly need.

Debugging Chrome Extensions Is Weird

Debugging normal apps is simple.

Chrome extensions are different because each part has separate DevTools.

You may debug:

  • popup console,
  • content script console,
  • background worker console.

I wasted a lot of time checking the wrong console 😅

Content Scripts Are Isolated

One thing nobody explains properly:

Content scripts run inside webpages…
but they are still isolated from the page itself.

This means:
some variables are inaccessible,
and some scripts behave differently.

At first this feels very confusing.

Chrome Security Is Strict

Chrome blocks many unsafe operations.

For example:

  • inline JavaScript,
  • unsafe eval(),
  • random external scripts.

This security system is called CSP (Content Security Policy).

Many libraries that work in React apps may fail inside extensions because of CSP restrictions.

Performance Actually Matters

Bad extensions can slow down the browser.

Especially when:

  • scripts run on every page,
  • bundles are too large,
  • or too many listeners exist.

I learned quickly that optimization matters even for small extensions.

Publishing Is Another Challenge

After building your extension, you still need:

  • store listing,
  • screenshots,
  • icons,
  • privacy policy,
  • proper permissions explanation.

Chrome Web Store reviews can reject extensions for small issues.

Final Thoughts

Chrome extension development is much more interesting than I expected.

At first it feels confusing.

But while building extensions, you learn:

  • browser architecture,
  • security,
  • performance optimization,
  • event-driven systems,
  • and real product engineering.

If you’re a beginner:
don’t worry if things feel strange initially.

Everyone gets confused by:

  • manifests,
  • content scripts,
  • and service workers at first.

Start with a small project,
experiment a lot,
and keep debugging.

That’s honestly the best way to learn Chrome extensions 🚀

Top comments (0)