Extension Architecture & Context Map

Four contexts, four different sets of powers. Click a context to see what it can and can't touch, then play the data-flow.

The four contexts

📄
Content script
lives in the web page
⚙️
Service worker
event-driven, no DOM
🛠️
Options page
full settings page
CapabilityPopupContentWorkerOptions
Access page DOM
Own DOM / HTML UI±
Full chrome.* APIslimited
Always availableper-pageon events
Long-lived state

No context keeps long-lived state — persist with chrome.storage (Part 7).

Data flow — popup → worker → content → page

Popup Service worker Content script Web page DOM

The popup asks the worker to do something on the page.