Series · 12 parts

Build Chrome Extensions — Zero to Pro (Manifest V3)

Go from "I want to build a browser extension" to shipping one on the Chrome Web Store. Every part has real config and a live, interactive simulator. Start with the Manifest V3 mental model and your first "load unpacked" extension, then the manifest deep dive, the component architecture (popup, service worker, content scripts, options), content-script injection and isolated worlds, the event-driven background service worker, messaging across contexts, chrome.storage, UI surfaces and the action API, permissions and security, the powerful APIs (tabs, scripting, contextMenus, commands, notifications), a pro Vite + CRXJS + TypeScript + React build, and finally publishing, auto-update, and cross-browser — with a capstone extension.

01 Build Chrome Extensions · Part 1 — The Manifest V3 Mental Model & Your First Extension

Start from zero: what a browser extension really is, the four moving parts, the Manifest V3 model, and shipping a working "Hello World" extension you load unpacked in under 10 minutes. With a live anatomy explorer.
02 Build Chrome Extensions · Part 2 — The Manifest, Deep Dive

Every manifest.json key that matters: action, permissions vs host_permissions, content_scripts, background, icons, web_accessible_resources, commands and side_panel — with an interactive manifest builder.
03 Build Chrome Extensions · Part 3 — Architecture & the Component Model

How the popup, content script, service worker and options page relate — what each one can and cannot do, why they are isolated, and the data-flow that ties them together. With an interactive context map.
04 Build Chrome Extensions · Part 4 — Content Scripts

Inject JavaScript and CSS into web pages: match patterns, run_at timing, the isolated world, injecting your own UI, and the gotchas of touching someone else’s DOM. With an interactive injection lab.
05 Build Chrome Extensions · Part 5 — The Background Service Worker

The event-driven heart of MV3: the lifecycle (install, wake, idle, terminate), why there is no persistent state, alarms vs setTimeout, and registering listeners correctly. With a live lifecycle simulator.
06 Build Chrome Extensions · Part 6 — Messaging Across Contexts

How isolated pieces talk: one-shot sendMessage, long-lived connect ports, the return-true async trap, broadcasting to tabs, and externally_connectable. With an interactive messaging playground.
07 Build Chrome Extensions · Part 7 — Storage

chrome.storage in depth: local vs sync vs session, quotas and item limits, the onChanged event for reactive UIs, storage as the single source of truth, and migrating data shapes between versions. With an interactive storage explorer.
08 Build Chrome Extensions · Part 8 — UI Surfaces & the Action API

The popup, options page, side panel, and the toolbar action (badge, icon, title): choosing the right surface, wiring each to storage, and the action API for ambient status. With an interactive mock browser.
09 Build Chrome Extensions · Part 9 — Permissions & Security

The permission model: activeTab, optional permissions and runtime requests, host permissions, the content security policy, and how to write an extension that users install and reviewers trust. With an interactive permissions inspector.
10 Build Chrome Extensions · Part 10 — The Powerful APIs

tabs, scripting, contextMenus, commands (keyboard shortcuts) and notifications — the toolkit that turns a toy into a real product. With an interactive API explorer.
11 Build Chrome Extensions · Part 11 — Pro Tooling & Build (Vite + CRXJS + TS + React)

Why plain files stop scaling, and how to set up a modern extension project with Vite, CRXJS, TypeScript and React — HMR, bundling, npm packages, and a typed manifest. With an interactive build-pipeline visualizer.
12 Build Chrome Extensions · Part 12 — Publish, Auto-Update, Cross-Browser & Capstone

Package and upload to the Chrome Web Store, pass review, version and auto-update, port to Firefox and Edge, and build a capstone "Reading Ruler" extension that ties the whole series together. With an interactive ship checklist.