Gemini CLIをChrome DevTools MCPに接続する

Gemini CLIでChromeを操作できますか？

プロジェクトが適切なツールを公開し、アカウントと承認ルールが認めていれば操作できます。Gemini CLIはMCPクライアントです。Chrome DevTools MCPはブラウザーを起動するか接続し、URLを開く操作やアクセシビリティスナップショットを提供します。モデル認証とブラウザー接続を別々に確認し、Connectedの後に既知のページを開いてください。 以前の Gemini CLI では別のクライアントで接続できた MCP サーバーに接続できなかったという報告があります。同じ症状なら、まず接続の段階を切り分けます。 GitHub #178

Gemini CLIの拡張機能一覧にもChrome DevTools MCPがあります。ここではサーバーをプロジェクトに明示し、バージョンと引数が分かる形にします。 Gemini CLI MCPガイド Chrome DevTools設定 ブラウザーで使うGemini

要点

• プロジェクトに Chrome DevTools MCP を登録し、独立したプロファイルで開始します。

• 接続は gemini mcp list、ツールは /mcp desc で確認します。

• ツールが返した最終 URL と見出しを、想定した内容と照合します。

• モデル認証、作業フォルダの信頼、ツール承認を個別に確認します。

検索とブラウザー操作で確かめられること

検索から発表を見つけても、そのタブのアカウントやクリック後の状態は分かりません。スナップショットは画面を確認できますが、そのページが最新の公式資料かを判断するものではありません。確かめたい事実に合わせてツールを選びます。 検索とブラウザー操作の違い AIエージェントの役割

小さなプロジェクトでバージョンを固定

公式ドキュメントをもとにした設定例です。Gemini CLI 0.67.0 と Chrome DevTools MCP 1.12.0 に固定しています。Node.js と Chrome の要件を確認し、ロックファイルを保存します。 Chrome DevTools MCP v1.12.0

mkdir browser-mcp-check
cd browser-mcp-check
npm init -y
npm install --save-exact @google/gemini-cli@0.67.0 chrome-devtools-mcp@1.12.0
./node_modules/.bin/gemini --version
./node_modules/.bin/chrome-devtools-mcp --version

以下をプロジェクトの .gemini/settings.json に追加します。パスはローカルの実行ファイルの絶対パスに置き換えます。既存の設定がある場合は、サーバーの項目だけを追加してください。

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "/absolute/path/browser-mcp-check/node_modules/.bin/chrome-devtools-mcp",
      "args": ["--headless", "--isolated", "--no-usage-statistics"],
      "includeTools": ["new_page", "take_snapshot", "list_pages", "close_page"],
      "trust": false
    }
  }
}

includeTools はGemini CLIが提供するツールのフィルターで、ドメインを制限しません。--isolated で一時プロファイルを使います。管理しているページや閲覧許可のあるページから試してください。既存セッションへの接続は別途設定し、アカウントを確認します。GoogleのCodelabはテストアプリ全体を扱いますが、起動の確認には既知の見出しとリンクがあるページで十分です。 既存ブラウザーへの接続 Google Codelab

作業フォルダを信頼すると、Gemini はプロジェクト設定を読み込めます。trust: false の場合も、ツールの呼び出しには現在のポリシーが適用されます。対話モードで始め、承認を求められたらサーバー名、操作、URL を確認します。非対話モードでは ask_user ルールに該当する呼び出しは拒否されます。URL を制限する場合は Chrome DevTools MCP 側で設定します。--allowed-url-pattern には Chrome 149 以降が必要です。 Gemini CLI のポリシー Chrome DevTools MCP の設定

接続と実際のページを順に確認

プロジェクトで ./node_modules/.bin/gemini mcp list を実行します。信頼済みの作業フォルダではプロジェクト設定を読み込めます。Gemini CLI の対話画面で /mcp desc を使い、ツールと引数を確認します。モデルへのアクセスは別に設定します。 認証方法

同じ条件で確認するには、別の端末でテストプロジェクトを開き、ローカルページを配信します。見出しは「MCP browser check」、リンク先は #details です。ツールの応答で両方を照合します。

mkdir -p fixture
cat > fixture/index.html <<'HTML'
<!doctype html>
<meta charset="utf-8">
<title>MCP browser check</title>
<h1>MCP browser check</h1>
<a href="#details">Details</a>
<p id="details">Local fixture</p>
HTML
python3 -m http.server 8765 --bind 127.0.0.1 --directory fixture

この例のバージョンでは、new_page が返した ID を pageId として take_snapshot に渡します。リダイレクト後は、実際に返された URL と見出しを確認します。 v1.12.0 のツール仕様

chrome-devtools MCP で http://127.0.0.1:8765/ を開きます。 ページID、最終URL、見出し、想定リンクを返します。取得したページIDでスナップショットを取ります。失敗したらエラーを返し、資格情報の入力、フォーム送信、変更は行わないでください。

どの段階で失敗したか調べる

登録に失敗したら、設定範囲、バージョン、トランスポートを確認します。古いGemini CLIでは接続できず、別クライアントでは接続できたという報告があります。別の利用者はApple SiliconでPATHからIntel版Nodeを使っていることを発見しました。どちらも個別事例です。実行ファイルとアーキテクチャを確認してから環境を変えます。 元のIssue 元のReddit投稿

ページを開けてもスナップショットが失敗した場合は、スキーマを読み、応答のページIDを使います。ログイン画面が出たらその作業を止め、必要な担当者操作を記録します。 ログイン済みセッションの確認

再現できる結果を残す

CLI、サーバー、ブラウザーの版、設定範囲、実行モード、ツール、URL、ページID、期待結果を保存します。失敗や承認が起きた段階を記録すると、再実行時に差を特定できます。 最初のブラウザー作業 接続方法の選び方 エージェント型ブラウザーとは

Gemini CLI で Chrome の表示を確認するなら、プロジェクトでサーバーを登録し、結果が分かっているページを一つ開きます。次のツールを追加する際も確認できる結果を決めておきます。

Secholar.L

Tabbit グロース&コンテンツ担当

Secholar.L は AI ブラウザとエージェントワークフローについて、実際の調査と検証可能な一次情報に基づく実践的なガイドを執筆しています。