Chrome Extension Anatomy Explorer

An extension is a few small parts living in different places. Click each highlighted piece to learn what it is and where it runs.

Where the parts live

https://example.com

🧩3

example.com

A normal web page the user is visiting.

Your extension can read and modify it…

content_script injected this

⚙ service_worker (background) — running off-screen

Tip: click the 🧩 toolbar icon to open the popup, then click the popup itself.

The minimal file layout

my-extension/ ├─ manifest.json # required — the blueprint of your extension ├─ popup.html # the UI shown when the toolbar icon is clicked ├─ popup.js # logic for the popup ├─ content.js # runs inside web pages ├─ background.js # the service worker — event handler, no DOM └─ icons/ # 16 / 48 / 128 px icons

Load it via chrome://extensions → Developer mode → Load unpacked and point at this folder.