Chrome Extension Components Explained¶

manifest.json - The Blueprint¶

What it's for: Tells Chrome what your extension is, what it can do, and what permissions it needs.

Without it: Chrome won't load your extension at all. It's mandatory.

Real example: You build a price tracker extension. The manifest declares: - "I need to run scripts on shopping sites" (content_scripts) - "I need to store price history" (storage permission) - "I have a popup UI" (action with popup.html)

Background Service Worker - The Brain¶

What it's for: Runs behind the scenes handling logic, state, API calls, coordinating everything.

Why separate from content scripts: Content scripts run inside web pages (isolated, limited). Background has full Chrome API access and coordinates across all tabs.

Real example: Price tracker - Background monitors price changes every hour (alarm) - Makes API calls to check prices (content scripts can't due to CORS) - Stores data in chrome.storage - Sends notifications when prices drop - Responds to popup requests for "show me price history"

Without it: Your extension is just dumb scripts with no memory or coordination.

Content Scripts - The Eyes and Hands¶

What it's for: Runs inside web pages to read or modify the actual page content.

Why separate from background: Background has no access to page DOM. Content scripts are the only way to touch what's on the page.

Real example: Price tracker - Content script finds the price on Amazon's page (reads <span class="price">$29.99</span>) - Sends that price to background for storage - Injects a banner showing "Price dropped $5 since last week!" - Highlights the price in green

Without it: You can't interact with actual web pages. Extension is blind.

What it's for: Quick UI when user clicks your extension icon.

Why separate from background: Background has no UI. Popup is the user-facing interface.

Real example: Price tracker - Shows graph of price history - "Track this item" button - List of tracked items - "Open settings" link

Without it: Users have no way to interact with your extension easily.

What it's for: Let users configure extension behavior without you hardcoding everything.

Why separate from popup: Settings need more space, shouldn't clutter popup. Users expect settings in chrome://extensions.

Real example: Price tracker - How often to check prices (every hour vs every day) - Notification preferences (email? push?) - Which sites to track (Amazon only vs all sites) - API key for price comparison service

Without it: Extension works one way for everyone. No customization.

chrome.storage - The Memory¶

What it's for: Save data that persists across browser restarts and syncs across devices.

Why not just JavaScript variables: Background service worker can terminate anytime (Manifest v3). Variables disappear. Storage persists.

Real example: Price tracker - Stores list of tracked items - Price history for each item - User settings - Last check timestamp

Without it: Extension forgets everything when browser closes or service worker restarts.

How They Work Together - Full Flow¶

Scenario: User on Amazon wants to track a product.

1. Content script (running on Amazon page)¶

Reads product price and name from DOM
User clicks extension icon

Shows "Track this item: iPhone 15 - $799"
User clicks "Track"

chrome.runtime.sendMessage({
  action: 'trackItem',
  name: 'iPhone 15',
  price: 799,
  url: 'amazon.com/...'
})

4. Background receives message¶

Saves item to chrome.storage
Sets up alarm to check price every hour
Responds to popup "Item tracked!"

5. Hour later, alarm fires in background¶

Opens Amazon page invisibly
Injects content script
Content script reads new price
Sends back to background: "$749"

6. Background sees price dropped¶

Updates storage
Shows notification: "iPhone 15 dropped $50!"

7. User clicks notification¶

Opens popup
Popup reads from storage
Shows price graph

8. User wants to customize¶

Opens options page
Changes check interval to "every 30 minutes"
Saves to storage

9. Background detects storage change¶

Recreates alarm with new interval

Analogy Time¶

Think of it like a restaurant:

Manifest = Business license (tells city what you're allowed to do)
Background = Kitchen (does the actual work, customers don't see it)
Content Scripts = Delivery drivers (go out to customers' homes to interact)
Popup = Menu board (quick interface for customers)
Options = Reservation system (detailed preferences)
Storage = Recipe book/inventory (remembers everything)

Kitchen (background) can't deliver food to homes (can't access web pages). Delivery drivers (content scripts) can't cook (limited APIs). Menu board (popup) just shows info, real work happens in kitchen.

Which parts are required?¶

manifest.json (always)
At least ONE of: background, content script, or popup
Everything else is optional based on what your extension does

Do you need all of them?¶

No. Simple extensions might only have:

Manifest + content script (just modify pages, no UI)
Manifest + popup (just show info, no page interaction)
Manifest + background (just handle browser events, no UI)