Architecture
Overview
Section titled “Overview”Context Bro is a standalone browser extension that turns your everyday browsing into structured context for AI agents. It extracts page content, compiles it through customizable templates, and delivers it to any API endpoint you configure.
Slogan: Help you bring your context to live.
Data Flow
Section titled “Data Flow”Browser Tab → Content Script → Template Engine → POST to Your API- Content Script extracts page data (title, content, meta, selection, schema.org)
- Template Engine compiles your template with extracted variables and filters
- API Client POSTs the compiled payload to your configured endpoint with custom headers
Extension Components
Section titled “Extension Components”| Component | Role |
|---|---|
| Background Service Worker | Orchestrates extraction, message routing, scheduling, adapter management |
| Content Script | Injected into pages to extract DOM content via Defuddle |
| Popup | Quick share UI — endpoint/template selection, JSON preview |
| Options Page | Full configuration — endpoints, templates, allowlist, schedule |
| Selection Button | Floating CSUI button on text selection |
| Platform Adapters | Twitch and YouTube live chat observers |
Template Engine
Section titled “Template Engine”The template engine is AST-based:
- Tokenizer → Parser → Renderer pipeline
- 50+ built-in filters (truncate, replace, date, split, join, etc.)
- CSS selector variables (
{{selector:.class@attr}}) - Schema.org structured data extraction
Auto-Capture
Section titled “Auto-Capture”Context Bro has three content capture models, each designed for different content volatility:
Focused Mode
Section titled “Focused Mode”Event-driven capture for pages you’re actively reading:
- Triggers on tab focus/navigation to a matching domain
- 10-second dwell before first extraction
- Optional refetch at configurable intervals (10s–1hr) for slowly-changing pages (feeds, dashboards)
- Stops when you switch away from the tab
- Uses
setInterval— no Chrome Alarm needed since the user is actively viewing
Any-Tab Mode
Section titled “Any-Tab Mode”Periodic background capture using the Chrome Alarms API:
- Scans all open tabs matching Site Rule patterns
- Configurable polling interval (minutes to hours)
- Runs even when tabs are in the background
Shared: Deduplication
Section titled “Shared: Deduplication”Both modes use SHA-256 content hashing with a configurable per-rule dedup window to prevent sending unchanged content.
Platform Adapters
Section titled “Platform Adapters”Live stream adapters use MutationObserver to capture chat in real-time:
- Twitch: native + 7TV + FFZ DOM variants, bits, subs, raids
- YouTube: live chat, Super Chat/Sticker, memberships, VOD transcript
- 30-second batch aggregation with priority sampling (monetization > mod > random)
- Sliding window dedup (10s) to prevent duplicates
Technology Stack
Section titled “Technology Stack”| Layer | Technology |
|---|---|
| Extension framework | WXT (Vite-based) |
| UI | React 19 + TailwindCSS v4 |
| Content extraction | Defuddle |
| Template engine | AST-based |
| Formatting | Biome |
| Language | TypeScript (strict) |
| Target | Chrome MV3 |