Chrome Extension Manifest V3 architecture

Here's the recommended architecture for a Manifest V3 data-capture extension:

textCopy
Content Script (per tab)     Service Worker (background)     Popup UI
  |                              |                              |
  | Observe DOM / intercept XHR  | Receive messages              | Show status
  | Extract structured data      | Queue & batch sync            | Configure settings
  | Send via chrome.runtime     | POST to backend API           |
  |------ message passing ------>|                              |
  |                              |------- fetch() ------------->| Backend

Key components:

1. Content Scripts — Injected into target pages (e.g., ChatGPT, Claude). They observe the DOM or intercept network requests to capture conversation data.

2. Service Worker (background) — Receives data from content scripts via chrome.runtime.onMessage. Handles batching, deduplication, and syncing to your backend.

3. Popup UI — React-based settings panel. Configures sync endpoint, shows sync status.

Critical design decisions:

• Use chrome.storage.local for offline queue (Service Worker can restart anytime in MV3)
• Implement idempotent sync — server should handle duplicate submissions gracefully
• Use platform adapters — one adapter per website (ChatGPT adapter, Claude adapter) to isolate DOM-specific logic
• Content scripts communicate via chrome.runtime.sendMessage, NOT direct fetch to backend