Chrome 拡張機能での Transformers.js の使用

Chrome 拡張機能での Transformers.js の使用

Hugging Face は、Chrome 拡張機能内でローカル AI 機能を実行する方法を示すため、Gemma 4 E2B を駆動するデモ ブラウザ拡張機能をリリースしました。実装は Manifest V3 の制約の下で Transformers.js を活用し、バックグラウンド サービス ワーカーがモデルのオーケストレーションを管理し、UI とコンテンツ スクリプトが薄いクライアントのままである分離されたアーキテクチャを利用しています。

Chrome Extension Architecture (Manifest V3)

コアなアーキテクチャ戦略は、UI の応答性を確保し、モデルの重複ロードを避けるため、3 つの主要な Chrome ランタイム コンテキスト間で関心事を分離することです。

ランタイム コンテキストとエントリポイント

As defined in the manifest.json, the extension utilizes three entry points:

  • バックグラウンド サービス ワーカー (background.js): エージェントのライフサイクル、モデルの初期化、ツールの実行のためのコントロール プレーンとして機能します。
  • サイドパネル (sidebar.html): チャットの入力/出力およびストリーミング アップデートのためのインタラクション レイヤーとして機能します。
  • コンテンツ スクリプト (content.js): DOM の抽出とハイライト アクションのためのページ ブリッジとして機能します。

メッセージングとオーケストレーション

これらのランタイムは隔離されているため、型付きメッセージ コントラクト（enum で定義）がアクションを調整します。バックグラウンド サービス ワーカーは単一の調整者として機能します：

  1. サイドパネルはリクエストを送信します（例: AGENT_GENERATE_TEXT）。
  2. バックグラウンド ワーカーはメッセージを会話履歴に追加し、推論を実行し、ツールを実行します。
  3. バックグラウンド ワーカーは、レンダリングのためにサイドパネルに更新を送信します（例: MESSAGES_UPDATE）。

Transformers.js の統合詳細

モデルの役割と責任

拡張機能は、推論と検索のバランスを取るために 2 つの異なるモデルを使用します：

  • テキスト生成 (LLM): onnx-community/gemma-4-E2B-it-ONNX (q4f16) は、推論とツール呼び出しの決定を処理します。
  • ベクトル エンベディング: onnx-community/all-MiniLM-L6-v2-ONNX (fp32) は、履歴とウェブサイト コンテンツにおける意味的類似性検索のためのエンベディングを生成します。

推論とキャッシュ

すべての推論は、バックグラウンド サービス ワーカー内で `pipeline(

Sources