Extension Architecture

Browser extension architecture and design patterns.

Extension Structure

Extension
├── Background Service Worker
│   └── Manages state, messaging, context menus
│
├── Content Script
│   └── Injected into webpages
│
├── Popup UI
│   ├── Verify View
│   ├── Settings View
│   ├── History View
│   └── About View
│
└── Storage
    └── Encrypted API keys, history

Message Passing

User Action
    ↓
Popup/Content Script
    ↓
chrome.runtime.sendMessage()
    ↓
Background Service Worker
    ↓
Process & Respond

Storage API

• chrome.storage.sync - Cloud synced data (100KB limit)
• chrome.storage.local - Local only data (10MB limit)
• chrome.storage.session - Session only (ephemeral)

Security Model

• Content Security Policy (CSP)
• No inline scripts
• Encrypted storage for API keys
• CORS validation
• No 3rd party tracking

Permissions

• storage - Read/write browser storage
• contextMenus - Add context menu items
• <all_urls> - Access all websites
• activeTab - Current tab access

Performance

• Lazy load popup components
• Cache API responses
• Minimal memory footprint
• Efficient message passing

Cross-browser Support

• Chrome (Manifest v3)
• Firefox (Manifest v3)
• Edge (Manifest v3)
• Opera (Manifest v3)

See Installation Guide for setup.