Gemma 4 Browser Assistantとは?オンデバイスAIブラウザ拡張の仕組みと使い方を徹底解説

押さえておきたいポイント
  • 完全オンデバイス動作で、外部APIにデータを送らずブラウザAI機能を利用可能
  • タブ管理・ページ理解・履歴検索を自然言語で操作できるChrome拡張機能
  • GitHubからクローンすれば、UIやプロンプトボタンなどを自分好みにカスタマイズ可能

2026年4月、エンジニアNico Martinから新たなChrome拡張機能が公開されました。

今回登場した「Gemma 4 Browser Assistant」は、GoogleのモデルGemma 4とブラウザ向けAI推論ライブラリTransformers.jsを組み合わせた、完全オンデバイス動作のAIブラウザアシスタントです。すべての推論がデバイス上で完結するため、データが外部サーバーに送られることなくAI機能を利用できます。

これまでのブラウザAIツールでは、「データがクラウドに送信される」「オフライン環境では利用できない」「使うたびにAPIコストが発生する」といった課題がありました。

一方でGemma 4 Browser Assistantは、WebGPUを活用してすべての推論をローカルで実行。外部通信なしにタブ管理・ウェブページ理解・閲覧履歴のセマンティック検索まで、幅広い機能を利用できます。

しかし、新しいAI拡張機能が登場するたびに、「どのような仕組みで動いているのか」「実際にどんな作業を任せられるのか」「既存のブラウザAIツールと何が違うのか」といった疑問を感じる方も多いのではないでしょうか。

そこで本記事では、Gemma 4 Browser Assistantの概要や仕組み、特徴を整理しながら、具体的な使い方・活用シーンについて詳しく解説します。

最後までお読みいただくことで、Gemma 4 Browser Assistantがどのように設計され、どのような場面で力を発揮するのかが理解できるはずです。

\生成AIを活用して業務プロセスを自動化/

Gemma 4 Browser Assistantとは

Gemma 4 Browser Assistantは、エンジニアNico Martinが2026年4月に公開した、オンデバイスAIエージェント型のChrome拡張機能です。

参考:https://chromewebstore.google.com/detail/transformersjs-gemma-4-br/dhaknnnkcdkjhcclchmnfdhddoehoool

ブラウザをプライベートなオンデバイスAIアシスタントに変える」というコンセプトのもと開発されており、GoogleのGemma 4 E2BモデルとTransformers.jsを組み合わせてWebGPU上で動作します。

タブの横断検索・ウェブページの自然言語理解・閲覧履歴のセマンティック検索といった機能をすべてローカルで処理。外部APIへのデータ送信が一切発生しない点が、他のブラウザAIツールとの大きな違いです。

GitHubで公開されており、2026年4月時点で600以上のスターを獲得。TypeScriptで実装された拡張機能として、Chromeウェブストアからもインストール可能です。

スクロールできます
比較項目Gemma 4 Browser Assistant一般的なブラウザAI拡張
推論場所完全ローカル(WebGPU)クラウドAPI経由
データ送信なし外部サーバーへ送信
APIコスト不要使用量に応じて課金
オフライン利用モデル読み込み後は可能不可
プライバシー完全デバイス内完結サーバー側にデータが残る可能性あり
Gemma 4 Browser Assistantと一般的なブラウザAI拡張の比較(2026年4月時点)

Gemma 4 Browser Assistantの仕組み

Gemma 4 Browser Assistantは、Manifest V3(MV3)準拠の3層アーキテクチャを採用しています。それぞれの役割が明確に分離されているため、重い推論処理がUIの応答性を損なわない設計です。

3層の役割はそれぞれ以下のとおりです。

項目内容
背景スクリプト(Background Script)AIエンジンの中枢。モデルの読み込み・推論実行・ツール実行・特徴量抽出を担当
サイドパネル(Side Panel)ユーザーとの対話レイヤー。チャットUI・ストリーミング出力・設定コントロールを担当
コンテンツスクリプト(Content Script)ページとのブリッジ。DOMの抽出とハイライト操作を担当
Gemma 4 Browser Assistantの役割一覧表

すべての推論は背景スクリプト側で実行されます。2つのモデルが用途に応じて使い分けられており、テキスト生成はGemma 4 E2B(q4f16量子化ONNX形式)が担い、セマンティック検索用の埋め込み生成はall-MiniLM-L6-v2(fp32)が担います。

リクエストフローは以下のとおりです。

  1. サイドパネルがユーザー入力を受け取り、背景スクリプトへAGENT_GENERATE_TEXTメッセージを送信する
  2. 背景スクリプトが会話履歴に追記し、Gemma 4モデルを使って推論・ツール呼び出しを実行する
  3. ツール実行が必要な場合(ask_websiteなど)、コンテンツスクリプトへ指示を送信してDOMを抽出する
  4. 背景スクリプトがMESSAGES_UPDATEを発行し、サイドパネルがチャット画面を更新する
  5. ツール呼び出しがなくなるまで2〜4を繰り返し、最終的な回答を完成させる

会話履歴は背景スクリプト側のメモリに保持されるため、複数タブを横断しても一貫した対話コンテキストが維持されます。

Gemma 4 Browser Assistantの特徴

Gemma 4 Browser Assistantの最大の強みは、プライバシーを犠牲にせずブラウザ操作をAIエージェントに委ねられる点です。ここでは主な特徴を詳しく見ていきます。

自然言語でブラウザのタブを操作できる

AIエージェントがタブの列挙・切り替え・新規オープン・クローズを自然言語の指示だけでこなします。

利用できるタブ操作ツールは4種類。

get_open_tabsで全タブのタイトル・URL・説明を取得し、go_to_tabで特定タブへの切り替え、open_urlでバックグラウンドまたはフォアグラウンドでの新規オープン、close_tabで不要タブを閉じることが可能です。

今開いているタブの中から〇〇に関するページを探して」といった曖昧な指示にも、AIが内容を理解した上で適切なタブを提示します。

RAGでウェブページを意味的に理解・ハイライトできる

Retrieval-Augmented Generation(RAG)を活用し、現在開いているページの内容をAIが理解して回答することも可能です。

コンテンツスクリプトがページの見出し・段落・リストを構造的に抽出し、all-MiniLM-L6-v2でベクトル埋め込みを生成。クエリとの類似度が高いセクションを返すため、長文ページでも必要な情報だけを的確に取り出せます。

さらにhighlight_website_elementツールにより、AIが回答の根拠となった箇所をページ上で視覚的にハイライト。該当箇所へ自動スクロールするため、情報の確認が直感的です。

閲覧履歴をセマンティック検索できる

IndexedDBにページタイトル・説明・URLのベクトル埋め込みを蓄積し、自然言語クエリで閲覧履歴を検索できます。

従来のブラウザ履歴検索ではURLや完全一致のキーワードしか使えませんでしたが、find_historyツールは「先週調べた機械学習の記事」のような曖昧な問いかけにも対応。時刻フィルタリングと組み合わせた意味的な絞り込みが可能です。

完全ローカル処理でプライバシーを担保できる

すべてのAI推論がデバイス上で完結する点は、このツールの根幹をなす設計です。

Chromeウェブストアのプライバシーポリシーにも「開発者はデータを収集または使用しない」と明記。APIキーの管理も不要で、月額コストを気にせず使い続けられます。

参考:https://chromewebstore.google.com/detail/transformersjs-gemma-4-br/dhaknnnkcdkjhcclchmnfdhddoehoool

ただし、モデルの初回読み込みにはダウンロードが必要です。Gemma 4 E2BモデルはONNX量子化形式でも一定のサイズがあるため、初回セットアップには時間がかかる点には注意が必要です。

OpenAIの新エージェント機能であるWorkspace Agentsについて、詳しく知りたい方は以下の記事も参考にしてみてください。

Gemma 4 Browser Assistantの安全性・制約

Gemma 4 Browser Assistantは、プライバシーとセキュリティを設計の中心に置いた拡張機能です。

開発者のNico Martinは、Chromeウェブストア上で「データを収集または使用しない」ことを公式に宣言。ユーザーのデータが第三者に販売されたり、拡張機能の中心機能と関係のない目的に使用されたりすることはありません。

スクロールできます
安全性・制約項目内容
データ送信外部サーバーへの送信なし。すべてローカル処理
開発者のデータ宣言収集・使用・第三者販売なし(Chromeウェブストアで宣言済み)
必要パーミッションsidePanel・activeTab・storage・scripting・tabs・host_permissions(最小限)
WebGPU対応ブラウザChrome 113以上が必要(旧バージョンでは動作しない)
GPU要件WebGPU対応のモダンGPUが必要(統合GPUでは動作が遅い場合あり)
サービスワーカーの制約MV3仕様により一時停止・再起動が発生する可能性がある
Gemma 4 Browser Assistantの安全性・制約一覧(2026年4月時点)

取得するパーミッションは必要最小限に絞られており、各パーミッションには明確な理由があります。

sidePanelはチャットUIの表示用、storageはツール設定のセッション間保持用、tabs・scriptingはタブ操作とページアクション用です。

ただし、host_permissionsでhttp(s)://*/*(全ウェブサイト)へのアクセス権限を持っています。これはウェブページのコンテンツ抽出・ハイライト機能に必要なものですが、インストール前に把握しておくことが大切です。

Gemma 4 Browser Assistantの料金

Gemma 4 Browser Assistantは完全無料で利用できます。

Chromeウェブストアからの拡張機能インストールも無料で、月額費用・API利用料・トークン課金は一切発生しません。すべての推論がローカルで完結するため、使用量に関わらず追加コストが発生しない点は大きな魅力です。

スクロールできます
項目内容
拡張機能本体無料(Chromeウェブストアより入手)
APIコストなし(外部API不使用)
月額費用なし
トークン課金なし
Gemma 4 Browser Assistantの料金一覧(2026年4月時点)

有料のAI APIを使わずにエージェント機能を試したい開発者にとって、コストゼロで始められる点は非常に魅力的といえるでしょう。

NotionでAIエージェントを動かすClaude Managed Agents in Notionについて、詳しく知りたい方は以下の記事も参考にしてみてください。

Gemma 4 Browser Assistantのライセンス

Gemma 4 Browser Assistantはオープンソースとして公開されており、GitHubリポジトリでソースコードを確認できます。

ただし、リポジトリに明示的なライセンスファイルは確認できませんでした。商用利用・改変・再配布を検討する場合は、事前に開発者への直接確認が必要です。

本拡張機能が使用するGemma 4モデル自体にはGoogleのGemmaライセンスが適用されます。商用利用の際はGemmaの利用規約も合わせて確認してください。

強化されたAIエージェントであるClaude Codeについて、詳しく知りたい方は以下の記事も参考にしてみてください。

Gemma 4 Browser Assistantの使い方

Gemma 4 Browser Assistantは、Chromeウェブストアからのインストールと、GitHubからのビルドの2通りの方法で利用できます。ここでは両方の手順を紹介します。

動作にはWebGPUに対応したChrome 113以上と、WebGPU対応のモダンGPUが必要です。古い環境では正常に動作しない場合があります。

Chromeウェブストアからインストールする(簡単)

まずはChromeウェブストアから直接インストールする方法を紹介します。

STEP
Chromeウェブストアで検索

Chromeウェブストアで「Transformers.js Gemma 4 Browser Assistant」を検索し、「Chromeに追加」をクリック。

参考:https://chromewebstore.google.com/detail/transformersjs-gemma-4-br/dhaknnnkcdkjhcclchmnfdhddoehoool
STEP
拡張機能のアイコンをクリック

拡張機能のアイコンをクリックすると、画面右側にサイドパネルが開くので、モデルのダウンロードをします。

参考:https://chromewebstore.google.com/detail/transformersjs-gemma-4-br/dhaknnnkcdkjhcclchmnfdhddoehoool
STEP
ダウンロード完了後に指示を出す

ダウンロード完了後、チャットUIから自然言語でAIエージェントに指示を出すことができます。

処理速度はやや遅めかもしれないのと、URLを自動で取得してくれるのかと思ったのですが、そういうわけではなさそうでした。

GitHubリポジトリからビルドして使う(開発者向け)

ソースコードをカスタマイズして利用したい方向けの手順です。

STEP
GitHubリポジトリをクローンする

まずはGitHubリポジトリからクローンをします。

git clone https://github.com/nico-martin/gemma4-browser-extension.git
cd gemma4-browser-extension
STEP
依存パッケージのインストール

クローンできたら依存パッケージをインストールします。

pnpm install
STEP
ビルドの実行

パッケージのインストールが終わったらビルドを行い、Chromeの拡張機能として読み込ませます。

pnpm run build

ビルドを行うことで、Chromeで読み込めるdistフォルダが生成されます。

STEP
デベロッパーモードの有効化

Chromeの拡張機能を開いて、デベロッパーモードを有効化します。

その後「パッケージ化されていない拡張機能を読み込む」からdistフォルダを選択。正常に読み込まれると、拡張機能の画面に追加されるのがわかります。

TypeScriptで実装されているため、型安全性を保ちながら独自ツールの追加やUIのカスタマイズを進められます。

【業界別】Gemma 4 Browser Assistantの活用シーン

Gemma 4 Browser Assistantが特に力を発揮するのは、複数のウェブページを横断して情報を整理したり、機密性の高い業務でAIを活用したりする場面といえるでしょう。ここでは業界別に活用シーンを紹介します。

リサーチ・コンサルティング

大量のウェブページを読み込んで情報収集する業務では、Gemma 4 Browser Assistantが大きな効率化をもたらす可能性があります。

現在開いている競合サイトのタブから価格情報だけを抽出して」「先週調べた市場調査レポートをまとめて」といった指示を自然言語で与えるだけで、AIが複数タブを横断して情報を集約。手動コピペ作業の削減が期待できます。

法務・医療・金融

機密性の高い情報を扱う業種では、データを外部サーバーに送信しないオンデバイス処理が特に大きな価値を持ちます。

クラウドAIサービスではセキュリティポリシーや規制の観点から利用が制限されることも多いですが、Gemma 4 Browser Assistantはすべてローカルで完結するため、情報漏洩リスクを最小化しながらAI活用を実現できると考えられます

エンジニア・開発者

ドキュメントやStack Overflow、GitHubのイシューページを複数タブで開きながら作業する開発者にとって、ページ横断の情報検索は日常的なタスクです。

このドキュメントページの〇〇に関する記述を探して」「先週見たエラーの解決策を履歴から探して」といった操作をAIに任せることで、タブ間の切り替えや手動検索の手間を削減できるでしょう。また、オープンソースの拡張機能として独自のエージェントツールを追加実装する素材としても活用できます。

教育・学習

教材や論文を読みながらAIに質問できる環境は、学習効率の向上につながると考えられます。

この論文の研究手法を要約して」「この用語が使われている箇所をハイライトして」といった使い方が可能です。

インターネット接続が不安定な環境でも、一度モデルを読み込めばオフラインで動作する点は、フィールドワーク中の学習シーンでも力を発揮するでしょう。

Gemma 4 Browser Assistantを使ってみた

GitHubリポジトリからクローンしたGemma 4 Browser Assistantを少しカスタマイズしてみたいと思います。

今回はチャット画面に「よく使うプロンプトボタンを追加する」というカスタマイズをしてみます。

src/sidebar配下のChat.tsxに下記のコードを追加します。

追加コードはこちら
/**
 * @file サイドバーのチャット UI。メッセージ一覧・入力・ツール選択・スラッシュコマンドを提供する。
 * @remarks バックグラウンドの AGENT_GENERATE_TEXT で推論を実行。よく使うプロンプトをワンタッチ送信できる。
 * @limitations モデル未準備時は App 側で本コンポーネントを表示しない。
 */

// (ファイル先頭の import の直後、interface FormParams の前)

/** 入力欄からワンタッチで送るよく使うプロンプト(ページコンテキスト前提の日本語文言)。 */
const quickPromptLabels: readonly string[] = [
  "このページを3行で要約して",
  "このページの重要ポイントを教えて",
  "このページで注意すべき点を教えて",
];

// (handleKeyDown の後、return の前)

  /**
   * プロンプト文字列をバックグラウンドへ送信し、応答待ち状態を制御する。
   * @param prompt - ユーザーまたはクイックボタンから渡された送信テキスト
   */
  const sendPrompt = (prompt: string) => {
    setIsLoading(true);
    chrome.runtime.sendMessage(
      {
        type: BackgroundTasks.AGENT_GENERATE_TEXT,
        prompt,
      },
      (resp) => {
        if (resp.status === ResponseStatus.ERROR) {
          alert(
            `sendPrompt: 引数 prompt="${prompt}", エラー詳細: ${resp.error ?? "不明"}`
          );
        }
        setIsLoading(false);
      }
    );
  };

  /**
   * フォーム送信時に入力をクリアし、{@link sendPrompt} でメッセージを送る。
   * @param data - react-hook-form の入力値
   */
  const onSubmit = (data: FormParams) => {
    reset();
    inputRef.current?.focus();
    sendPrompt(data.input);
  };

// (ChatToolsModal の直後、form の直前)

        <div
          className="flex flex-wrap gap-2 mb-3"
          aria-label="よく使うプロンプト"
        >
          {quickPromptLabels.map((label) => (
            <Button
              key={label}
              type="button"
              color="secondary"
              variant="outline"
              size="sm"
              disabled={isLoading}
              className="max-w-full shrink-0 text-left whitespace-normal h-auto min-h-[2rem] py-1.5 leading-snug"
              onClick={() => {
                inputRef.current?.focus();
                sendPrompt(label);
              }}
            >
              {label}
            </Button>
          ))}
        </div>

コードを修正したのち、再ビルドを行い、拡張機能として読み込みます。

変更前のUIは下記です。

再度読み込ませると、下記のようにUIが変わっていることがわかります。

Chromeのストアからインストールするとカスタマイズが難しいので、Gemma 4 Browser Assistantを自分好みにカスタマイズしたい場合には、GitHubからクローンするのが良いでしょう

【課題別】Gemma 4 Browser Assistantが解決できること

Gemma 4 Browser Assistantが解決できる代表的な課題を紹介します。ブラウジング中に感じる非効率な作業を中心に、どのようなアプローチで改善できるかを考えてみます。

多数のタブを手動で切り替えずに目的の情報にたどり着ける

リサーチ中に大量のタブが溜まり、どこに何の情報があるか把握できなくなる、そんな状況はよくあるのではないでしょうか。

Gemma 4 Browser Assistantはget_open_tabsとgo_to_tabを組み合わせ、自然言語の指示だけで必要なタブを特定・切り替えできます。「Pythonのドキュメントが開いているタブに切り替えて」といった曖昧な指示にも対応可能です。

長文ページから必要な情報だけを即座に抽出できる

長い技術ドキュメントや論文から特定の情報を探すのに時間がかかる課題を解決します。

ask_websiteツールがページ全体をベクトル化し、クエリと最も類似度の高いセクションを返します。さらにhighlight_website_element該当箇所が視覚的にハイライトされるため、情報の所在確認まで一貫して完結します。

キーワードが思い出せない過去の閲覧履歴を意味的に検索できる

あの記事をまた見たいけど、タイトルやURLが思い出せない」という場面で力を発揮します。

find_historyツールが閲覧履歴のベクトルデータベースを検索するため、曖昧な内容の記憶から該当ページを見つけ出せます。時刻フィルタリングと組み合わせれば「先月見た〇〇の比較記事」といった検索も可能です。

Mac miniで24時間365日稼働するAIエージェントであるPerplexity Personal Computerについて、詳しく知りたい方は以下の記事も参考にしてみてください。

Gemma 4 Browser Assistantのよくある質問

ここではGemma 4 Browser Assistantのよくある質問について回答していきます。Gemma 4 Browser Assistantの使用を検討している場合には、ぜひ参考にしてみてください。

Gemma 4 Browser AssistantはMacやWindowsどちらでも使えますか?

WebGPUに対応したChrome 113以上が動作する環境であれば、MacおよびWindowsの両方で利用できます。ただし、動作にはWebGPU対応のモダンGPUが必要です。

モデルのダウンロードは毎回必要ですか?

初回使用時のみダウンロードが必要で、2回目以降はキャッシュが利用されます。モデルは拡張機能のオリジン(chrome-extension://)配下にキャッシュされ、インストール全体で共有されます。ただし、拡張機能を削除するとキャッシュも消えるため、再インストール後は再度ダウンロードが必要です。

独自のツールを追加することはできますか?

GitHubからソースコードを取得してビルドすることで、独自ツールを追加できます。ツールはname・description・inputSchema・executeの4要素で定義するインターフェースを実装するだけで拡張可能です。TypeScriptで実装されているため、型安全に開発を進められます。

商用利用は可能ですか?

拡張機能のリポジトリに明示的なライセンスは確認できませんでした。商用利用を検討する場合は、開発者への直接確認が必要です。

Gemma 4 Browser Assistantでブラウジングの常識を変えよう

Gemma 4 Browser Assistantは、Gemma 4とTransformers.jsをChrome拡張として組み合わせた、完全オンデバイス動作のAIブラウザエージェントです。タブ管理・ページ理解・履歴検索といった日常的な操作を、自然言語の指示だけで処理できる新しいブラウジング体験を提供します。

単なるページ要約ツールではなく、Gemma 4 Browser Assistantは「ブラウザを一つのAIエージェント実行環境にする」というコンセプトで設計されています。

外部APIへの依存をゼロにしながらエージェント機能を実現した点は、プライバシーとAI活用を両立したい組織・開発者にとって注目すべきアーキテクチャといえるでしょう。

今後は、WebGPUの普及とデバイス性能の向上に伴い、ブラウザ上でのオンデバイスAI活用はさらに広がっていくと考えられます。Gemma 4のような軽量マルチモーダルモデルの進化と合わせて、ローカルで動くAIエージェントという領域は急速に成熟していくでしょう。

ぜひ皆さんも本記事を参考にGemma 4 Browser Assistantを使ってみてください!

最後に

いかがだったでしょうか?

Gemma 4 Browser Assistantを活用することで、タブ管理やページ情報の抽出・履歴検索といったブラウジングの非効率をAIに任せながら、データを外部に出さないセキュアな環境を維持できます。一方で、WebGPU対応環境の確保やモデルの初回セットアップなど、導入時の要件確認も重要な選択肢です。

株式会社WEELは、自社・業務特化の効果が出るAIプロダクト開発が強みです!

開発実績として、

・新規事業室での「リサーチ」「分析」「事業計画検討」を70%自動化するAIエージェント
・社内お問い合わせの1次回答を自動化するRAG型のチャットボット
・過去事例や最新情報を加味して、10秒で記事のたたき台を作成できるAIプロダクト
・お客様からのメール対応の工数を80%削減したAIメール
・サーバーやAI PCを活用したオンプレでの生成AI活用
・生徒の感情や学習状況を踏まえ、勉強をアシストするAIアシスタント

などの開発実績がございます。

生成AIを活用したプロダクト開発の支援内容は、以下のページでも詳しくご覧いただけます。
➡株式会社WEELのサービスを詳しく見る。

まずは、「無料相談」にてご相談を承っておりますので、ご興味がある方はぜひご連絡ください。
➡︎生成AIを使った業務効率化、生成AIツールの開発について相談をしてみる。

生成AIを社内で活用していきたい方へ
無料相談

「生成AIを社内で活用したい」「生成AIの事業をやっていきたい」という方に向けて、生成AI社内セミナー・勉強会をさせていただいております。

セミナー内容や料金については、ご相談ください。

また、サービス紹介資料もご用意しておりますので、併せてご確認ください。

タイトルとURLをコピーしました