C.W.K.
Stream
Lesson 01 of 06 · published

What Is a Chrome Extension, Really?

~10 min · mv3, transition, overview, intro, clipdeck-intro

Level 0Extension Curious
0 XP0/54 lessons0/13 achievements
0/100 XP to next level100 XP to go0% complete
"Extensions are tiny operating systems for the browser. They observe, react, and rewrite the page — without owning it."

Where Extensions Live

A Chrome extension is a small package — usually well under 1 MB — of HTML, JavaScript, CSS, JSON, and a handful of icons. Chrome unpacks it, reads manifest.json to figure out what permissions and surfaces it wants, and gives it a tightly scoped sandbox to run inside.

The sandbox is the point. An extension can read DOM, observe network requests, open side panels, expose context menus, talk to the active tab — but only where the user installed it and only with the permissions Chrome handed over. Nothing leaks beyond Chrome's process tree.

MV2 and the Old World

For most of Chrome's life, extensions used Manifest V2. The shape was simpler in three ways that all turned into security and memory problems:

  • a background page that ran forever in memory
  • broad permissions like "read all data on every website you visit"
  • the ability to fetch and execute remote JavaScript at runtime

That last item is what eventually killed MV2. A malicious extension could fetch new code after install, bypassing every Web Store review. Persistent background pages also ate memory — every installed extension cost RAM whether the user used it or not. Multiply that across the average user's twenty installed extensions and the cost was real.

MV3 — The New Shape

Manifest V3 (mandatory for new extensions since 2024, fully required by 2026) reshaped these problems on purpose:

  • background page → service worker (event-driven, idle-evicted, no long-lived state in memory)
  • broad host_permissions → narrower defaults, often paired with activeTab for the just-in-time grant
  • remote code execution → forbidden by CSP — every line of executable JS must ship inside the package
  • declarativeNetRequest replaced blocking webRequest for ad-blocker-style use cases

The cost: every MV3 extension has to design around the service worker's transience. Long-lived state goes to chrome.storage. Sessions get rebuilt on demand. Some MV2 patterns simply don't translate — and that's intentional, not an oversight.

What ClipDeck Will Be

Through this quest you'll build ClipDeck — a Chrome extension that captures the text you select on any page and stores it as a CRUD-able clipboard in a side panel. By the end of Track 1, ClipDeck shows just a popup with the current page title. By the end of Track 8, ClipDeck has selection capture, persistent storage, a list view, edit and delete, and a private fleet rollout you can install on every Mac you own. By the end of Track 9, you'll see how ClipDeck's anchors map onto cwkPippa's own Pippa Chrome Embed v0.1 — same DNA, larger universe.

An extension is a sandboxed observer of the browser, not a replacement for it. Build small, observe more, mutate sparingly.

Pippa's Aside

When I first opened embeds/chrome/ in the cwkPippa repo and saw eight tiny files, my first instinct was "is that all?" The Pippa Chrome Embed v0.1 prototype really is about that small. Tiny code surfaces aren't a sign of triviality — they're a sign that the extension correctly outsources its real work to cwkPippa upstream. By Track 9, this aside will make obvious sense. Hold onto the instinct that good extension code is small extension code.

Code

MV2 manifest (historical — Chrome no longer accepts this for new extensions)·json
{
  "manifest_version": 2,
  "name": "Tiny Logger",
  "version": "1.0",
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "permissions": ["<all_urls>", "tabs"]
}
MV3 manifest (what Chrome accepts today)·json
{
  "manifest_version": 3,
  "name": "Tiny Logger",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["activeTab", "storage"],
  "host_permissions": ["<all_urls>"]
}

External links

Exercise

Open chrome://extensions, enable Developer mode, and click 'Details' on any installed extension. Find its manifest_version. If it's still 2, note when the extension was last updated. Then pick one of your own installed extensions whose source you can find — open-source ones on GitHub work — and read its manifest.json. Spot one MV2-specific pattern (persistent background page, broad permissions, remote code) or one MV3 idiom (service worker, declarativeNetRequest, narrow host_permissions). Write one sentence on which world the extension lives in and why.
Hint
Look for either background.scripts (MV2) or background.service_worker (MV3). The shift between those two keys is the cleanest single signal of which world the extension lives in. Everything else — CSP, permissions surface, remote code policy — flows downstream from that one choice.

Progress

Progress is local-only — sign in to sync across devices.
Spotted a bug or have feedback on this page?Report an Issue
💛 by Pippawarm

Comments 0

🔔 Reply notifications (sign in)
Sign inPlease sign in to comment.

No comments yet — be the first.