最近、Hugging FaceチームはTransformers.jsとGemma 4 E2Bを搭載したChrome拡張機能のデモを公開し、ウェブブラウジングを支援することを目的としています。構築中に、Manifest V3のランタイム、モデルロード、メッセージングに関する実践的な課題に直面し、貴重な知見を共有しています。
対象読者と構築内容 このガイドは、Manifest V3の制約下でChrome拡張機能にローカルAI機能を導入したい開発者を対象としています。最終的なアーキテクチャは、バックグラウンドサービスワーカー（モデルをホスト）、サイドパネルチャットUI、およびページ操作用のコンテンツスクリプトで構成されます。
MV3アーキテクチャ設計
拡張機能のmanifest.jsonは3つのエントリーポイントを定義します：バックグラウンドサービスワーカー（background.js）、サイドパネル（sidebar.html）、コンテンツスクリプト（content.js）。バックグラウンドは制御プレーンとして、エージェントのライフサイクル、モデル初期化、ツール実行を担当。サイドパネルはユーザーインタラクションを処理し、コンテンツスクリプトはDOM抽出とページハイライトを担当します。この分割により、モデルの重複ロードを回避し、UIの応答性を維持し、Chromeのセキュリティ境界を尊重します。
すべてのメッセージは型付きの列挙型で通信され、バックグラウンドが唯一のコーディネーターです。典型的なリクエストフローは、サイドパネルがAGENT_GENERATE_TEXTを送信し、バックグラウンドがメッセージを追加して推論を実行し、MESSAGES_UPDATEでサイドパネルを更新します。
Transformers.js統合の詳細
拡張機能は2つのモデルロールを使用します：gemma-4-E2B-it-ONNX（q4f16量子化）はテキスト生成、all-MiniLM-L6-v2-ONNX（fp32）は埋め込みベクトル生成に使用。すべての推論はバックグラウンドで実行され、複数タブでのモデル重複ロードを回避します。キャッシュは拡張機能オリジン下にあり、全セッションで共有。モデルライフサイクルはチェック/初期化（進捗付き）を含み、その後インスタンスを再利用。権限はsidePanel、storage、scripting、tabs、およびページ操作用のホスト権限を要求。
エージェントとツール実行ループ
ツール呼び出しは変換器フォーマットに基づき、モデル出力に特殊トークンが含まれます。プロジェクトは正規化レイヤーとパーサーを使用してモデル出力を決定論的なツール実行に変換。Agent.runAgentループは内部モデルメッセージとユーザー表示メッセージを分離：ユーザー入力をchatMessagesに追加、アシスタント返信をストリーム生成、ツール呼び出しを解析して実行、結果をモデルにフィードバック、ツール呼び出しがなくなるまで繰り返し。
データ永続化
状態はライフサイクルに応じて分割：会話状態はバックグラウンドメモリに保存、ツール設定はchrome.storage.local、セマンティック履歴ベクトルはIndexedDB、抽出されたページコンテンツはバックグラウンドキャッシュに保存。
ビルドとパッケージング Viteのマルチエントリービルドを使用し、各ランタイムに1つのアーティファクトを生成し、マニフェストが期待する場所に配置。
まとめ 明確な関心の分離がプロジェクトの核心：バックグラウンドが状態とモデル実行を所有し、UIは薄く保ち、コンテンツスクリプトがページアクセスを処理。同じアーキテクチャはポップアップ、サイドパネル、ハイブリッドUIにも拡張可能。