ジェマ ジェム：WebGPUを介したブラウザ自動化のためのオンデバイスAIエージェント

Gemma Gemは、オフスクリーンドキュメント内でWebGPUを介してGoogleのGemma 4モデル（2Bまたは4B）を読み込み、外部API呼び出しなしでブラウザ内で直接ウェブページと対話するツールを提供するChrome拡張機能です。

主な詳細

この拡張機能は、異なるコンテキストで実行されるいくつかのツールを提供します：

• read_page_content: ページまたはCSSセレクターのテキスト/HTMLを読み取る（コンテンツスクリプト）
• take_screenshot: 表示されているページをPNGとしてキャプチャする（サービスワーカー）
• click_element: CSSセレクターで要素をクリックする（コンテンツスクリプト）
• type_text: CSSセレクターで入力フィールドにテキストを入力する（コンテンツスクリプト）
• scroll_page: ピクセル単位でページを上下にスクロールする（コンテンツスクリプト）
• run_javascript: 完全なDOMアクセス権を持つページコンテキストでJavaScriptを実行する（サービスワーカー）

アーキテクチャは、以下の3つの主要コンポーネントを使用しています：

• オフスクリーンドキュメント: @huggingface/transformers + WebGPUを介してモデルをホストし、エージェントループを実行
• サービスワーカー: コンテンツスクリプトとオフスクリーンドキュメント間のメッセージをルーティングし、take_screenshotとrun_javascriptを処理
• コンテンツスクリプト: ジェムアイコン + シャドウDOMチャットオーバーレイを注入し、DOMツールを実行

セットアップと使用方法

必要条件：

• WebGPUをサポートするChrome
• E2Bモデル用に約500MB、E4B用に約1.5GBのディスク容量（初回実行後にキャッシュ）

セットアップコマンド：

pnpm install
pnpm build

chrome://extensions（開発者モード）で.output/chrome-mv3-dev/から拡張機能を読み込みます。

使用方法：

1. 任意のページに移動
2. ジェムアイコン（右下隅）をクリックしてチャットを開く
3. モデルの読み込みを待つ（アイコンとチャットに進行状況が表示）
4. ページに関する質問やアクションのリクエストを行う

設定と構成

チャットヘッダーの歯車アイコンから利用可能な設定：

• モデル: Gemma 4 E2B（約500MB）とE4B（約1.5GB）を切り替え - 選択はセッション間で保持
• 思考: ネイティブGemma 4思考の切り替え
• 最大反復数: リクエストごとのツール呼び出しループの上限
• コンテキストのクリア: 現在のページの会話履歴をリセット
• このサイトで無効化: ホスト名ごとに拡張機能を無効化（保持）

開発とデバッグ

技術スタック：

• WXT — Chrome拡張機能フレームワーク（Viteベース）
• @huggingface/transformers — ブラウザML推論
• marked — チャット内のMarkdownレンダリング
• Gemma 4 E2B / E4B（onnx-community/gemma-4-E2B-it-ONNX, onnx-community/gemma-4-E4B-it-ONNX） — q4f16量子化、128Kコンテキスト

ビルドコマンド：

pnpm build        # 開発ビルド（ロギング、ソースマップ付き）
pnpm build:prod   # プロダクションビルド（ロギング無効化、ミニファイ）

デバッグ場所：

• サービスワーカーログ: chrome://extensions → Gemma Gem → "Inspect views: service worker"
• オフスクリーンドキュメントログ: chrome://extensions → Gemma Gem → "Inspect views: offscreen.html"
• コンテンツスクリプトログ: 任意のページでDevToolsを開く → Console
• すべての拡張機能ページ: chrome://inspect#other にすべての検査可能な拡張機能コンテキストがリスト表示

オフスクリーンドキュメントログには、モデルの読み込み、プロンプト構築、トークン数、生のモデル出力、ツール実行が表示されます。

技術的な注意点

agent/ディレクトリには依存関係がなく、スタンドアロンライブラリとして抽出可能なインターフェース（ModelBackend、ToolExecutor）を定義しています。この拡張機能には、作業中の連鎖的思考推論を表示する思考モードが含まれています。

Sourceによると、このエージェントは単純なページの質問やJavaScriptの実行には機能しますが、多段階のツールチェーンは信頼性が低く、ツールを完全に無視することがあるとのことです。