Hugging Face が How to Use Transformers.js in a Chrome Extension をリリース ── Gemma 4を拡張機能で動かす最新アーキテクチャ
ブラウザ上でローカルAIを動かす「Transformers.js」をChrome拡張機能に組み込むための実践ガイドがHugging Faceから公開された。Gemma 4 E2Bを搭載したブラウザアシスタントを作るためのノウハウがギュッと詰まっている。Manifest V3の厳しい制約の中で、どうやってAIモデルを読み込み、UIと連携させるのか。その具体的な設計図がいよいよ明らかに。
▸何が変わったのか
今回はTransformers.jsと「Gemma 4 E2B」を用いたブラウザ拡張機能の開発ノウハウが公開された。最大のポイントは、Manifest V3（MV3）の制約に合わせたアーキテクチャ設計だ。具体的には、重い処理を担う`background.service_worker`、チャットUIを出す`side_panel`、ページ内のDOM抽出やハイライトを行う`content_scripts`の3つを明確に分離している。UIからのイベント（`AGENT_GENERATE_TEXT`など）をバックグラウンドで受け取り、会話履歴（`Agent.chatMessages`）もバックグラウンド側で一元管理するのが特徴。サイドパネルを使って永続的なチャット体験を実現しつつ、重いオーケストレーションをバックグラウンドに集約する設計が非常に興味深い。
◈前モデル / 競合との比較
従来のPopupベースのUIではなく、Side Panelを利用して永続的なチャット（Persistent Chat）を実現している点が大きな違い。また、UI側で状態を持ちがちな実装とは異なり、会話履歴を含む状態管理をすべてバックグラウンド側に集約しているのが特徴だ。
◈技術背景と意義
Chromeの拡張機能は現在「Manifest V3」というルールの下で動いており、リソースの使い方などに厳しい制限が設けられている。この制限の中でAIモデルをスムーズに動かすには、モデルの初期化や実行処理をバックグラウンドのサービスワーカーに任せ、画面側はチャットの入出力だけに専念させるのがベストプラクティスらしい。ブラウザのタブをまたいで状態を保持しやすくなるため、シームレスなAIアシスタント体験を提供できる。すべてローカルで完結するため、プライバシー面でも安心だ。
▸こんな人・用途に
Webページの内容を読み取って要約する、ブラウジングアシスタントを開発したい人。ユーザーのデータを外部サーバーに送らず、ローカル完結でAI機能を提供したい拡張機能開発者。Manifest V3環境でAIモデルをどう扱うべきか、具体的な実装パターンを知りたいフロントエンドエンジニア。
◆入手方法・リンク
完成品の拡張機能は実際にChrome Web Storeから試すことができる。実装の全貌は著者のNico Martin氏によるGitHubリポジトリ（github.com/nico-martin/gemma4-browser-extension）で公開されているので、ソースコードを直接参照可能だ。
SOURCE: Hugging Face (2026-04-24)
