アーキテクチャ

概要

Context Broはスタンドアロンのブラウザ拡張機能で、日常のブラウジング行動をAI Agentが利用できる構造化コンテキストに変換します。ページコンテンツを抽出し、カスタマイズ可能なテンプレートでコンパイルし、設定した任意のAPIエンドポイントに配信します。

Slogan: Help you bring your context to live.

データフロー

ブラウザタブ → Content Script → テンプレートエンジン → あなたのAPIにPOST

1. Content Script がページデータを抽出（タイトル、コンテンツ、meta、選択テキスト、schema.org）
2. テンプレートエンジン が抽出した変数とフィルターでテンプレートをコンパイル
3. APIクライアント がコンパイルされたペイロードをカスタムヘッダー付きで設定されたエンドポイントにPOST

拡張機能コンポーネント

コンポーネント	役割
Background Service Worker	抽出のオーケストレーション、メッセージルーティング、スケジューリング、アダプター管理
Content Script	ページに注入、Defuddleを通じてDOMコンテンツを抽出
Popup	クイック共有UI — エンドポイント/テンプレート選択、JSONプレビュー
Optionsページ	フル設定 — エンドポイント、テンプレート、Allowlist、スケジュール
Selection Button	テキスト選択時のフローティングCSUIボタン
プラットフォームアダプター	TwitchとYouTubeライブチャットオブザーバー

テンプレートエンジン

テンプレートエンジンはASTベース：

• Tokenizer → Parser → Renderer パイプライン
• 50以上の組み込みフィルター（truncate、replace、date、split、join等）
• CSSセレクター変数（{{selector:.class@attr}}）
• Schema.org構造化データ抽出

自動キャプチャ

Context Broには3つのコンテンツキャプチャモデルがあり、それぞれ異なるコンテンツの変動頻度に対応しています：

フォーカスモード

アクティブに閲覧しているページ向けのイベント駆動型キャプチャ：

• マッチするドメインのタブにフォーカス/ナビゲーションするとトリガー
• 最初の抽出前に10秒の滞在
• オプションの定期再取得（10秒〜1時間の設定可能な間隔）でゆっくり変化するページ（フィード、ダッシュボード）を再抽出
• タブから離れると停止
• setIntervalを使用 — ユーザーがアクティブに閲覧しているためChrome Alarmは不要

タブオープンモード

Chrome Alarms APIを使用したバックグラウンド定期キャプチャ：

• サイトルールパターンにマッチするすべての開いているタブをスキャン
• 設定可能なポーリング間隔（分〜時間）
• タブがバックグラウンドにあっても実行

共通機能：重複排除

両モードともSHA-256コンテンツハッシュとルールごとに設定可能な重複排除ウィンドウを使用し、未変更コンテンツの送信を防止。

プラットフォームアダプター

ライブ配信アダプターはMutationObserverを使用してリアルタイムでチャットをキャプチャ：

• Twitch: ネイティブ + 7TV + FFZ DOM バリアント、bits、サブスク、raid
• YouTube: ライブチャット、スーパーチャット/ステッカー、メンバーシップ、VODトランスクリプト
• 30秒バッチ集約、優先度サンプリング（課金 > モデレーター > ランダム）
• スライディングウィンドウ重複排除（10秒）

技術スタック

レイヤー	技術
拡張機能フレームワーク	WXT（Viteベース）
UI	React 19 + TailwindCSS v4
コンテンツ抽出	Defuddle
テンプレートエンジン	ASTベース
フォーマッター	Biome
言語	TypeScript（strictモード）
ターゲット	Chrome MV3