はじめに
Claude Code って、ブラウザを「見る」だけじゃなくて「動かせる」んです。
chrome-devtools-mcp で接続したブラウザを、Claude Code に能動操作させてみます。ページを開いて、フォームに入力して、ボタンを押して、出てきた値を読む。普段こっちが手でポチポチやっている一連を、まるごと任せてしまおう、と。
題材は固定しません。ローカルで動かしている開発中アプリでも、ログインが要る自分の管理画面でも、手順は変わりません。とはいえ最初は、自分の管理下にある安全な画面で試すのが無難です。
この記事で分かること
- 接続済みブラウザを Claude Code に能動操作させる手順
-
chrome-devtools-mcpの主要な操作プリミティブ（遷移・入力・クリック・読み取り・スクリーンショット・コンソール取得） - 読み取り系と状態変更系を分ける権限設計の考え方
- 操作結果を Markdown レポートとして受け取るプロンプトの書き方
- ショートカット.app で Chrome 起動を Dock からワンクリックにする方法
全体像
流れはこうです。
自分でChromeを起動（Remote Debugging Port付き）
→ chrome-devtools-mcp は --browser-url で接続だけ行う
→ Claude Code に「遷移 → 入力 → クリック → 読み取り → 保存」を指示
→ 操作結果をMarkdownレポートで受け取る
準備：接続まで
MCP に新規起動させず、自分で Remote Debugging Port 付きの Chrome を立ち上げ、--browser-url で接続させます。macOS の例です。
open -na "Google Chrome" --args \
--remote-debugging-port=9222 \
--user-data-dir="$HOME/chrome-mcp-dev-profile" \
--no-first-run \
--no-default-browser-check
起動を確認します。
curl http://127.0.0.1:9222/json/version
既存接続用の MCP を登録します。
claude mcp add chrome-devtools-existing --scope user -- npx -y chrome-devtools-mcp@latest --browser-url=http://127.0.0.1:9222
claude mcp list
chrome-devtools-existing: npx -y chrome-devtools-mcp@latest --browser-url=http://127.0.0.1:9222 - ✓ Connected
すでに chrome-devtools-existing を登録済みなら、この準備は飛ばして構いません。
操作プリミティブをざっくり把握する
chrome-devtools-mcp は、ブラウザの基本操作をツールとして提供します。能動操作で使う主なものはこれくらいです。
| 種類 | できること | 分類 |
|---|---|---|
| ページ遷移 | 指定 URL を開く | 読み取り寄り |
| スナップショット取得 | ページの要素構造を取得 | 読み取り |
| テキスト入力 | フォームに値を入れる | 状態変更 |
| クリック | ボタンや要素を押す | 状態変更 |
| スクリーンショット | 画面を画像で取得 | 読み取り |
| コンソールログ取得 |
console.log などを読む |
読み取り |
操作は「読み取り系（見るだけ）」と「状態変更系（入力・クリックで画面を変える）」の 2 種類に分かれます。この区別が後の権限設計につながります。
Claude Code に能動操作させる
Claude Code を起動して、
claude
/mcp で chrome-devtools-existing ・ connected を確認したら、操作内容をプロンプトで渡します。ログイン → 値の読み取り → 保存、という流れの例です。操作対象の URL や入力値は、自分の画面に合わせて書き換えてください。
あなたはWebアプリの動作確認を担当するエンジニアです。
使用するMCPは chrome-devtools-existing のみ、操作対象は 127.0.0.1:9222 の既存Chromeのみです。
新しいブラウザを起動しないでください。Playwright MCPは使用しないでください。
以下の手順で操作してください。
1. 対象ページを開く（URLは指定のもの）
2. ログインフォームに指定の値を入力する
3. ログインボタンをクリックする
4. ログイン後の画面に表示された主要な数値・項目を読み取る
5. ページのスクリーンショットを撮る
6. コンソールログを取得し、エラーが出ていないか確認する
読み取った内容を Markdown のレポートとして ./report.md に保存してください。
ログイン以外の状態変更操作（ログアウト・再送信・削除など）は行わないでください。
127.0.0.1:9222 に接続できない場合は、代替手段を使わずに作業を停止してください。
これで Claude Code が「遷移 → 入力 → クリック → 読み取り → スクリーンショット → コンソール取得 → 保存」を順に実行します。人間がブラウザでやっていた一連の操作が、そのまま自動で流れます。
使うMCPを名指しして、許可する操作を絞っておくのがコツです。曖昧なプロンプトだと、Playwright MCP が入っている場合にそちらが選ばれて新規ブラウザが立ち上がることがあります。
権限設計：どこまで任せるか
ブラウザを能動操作させるとき、操作のやり方そのものより、どこまでをエージェントに任せ、どこから人間が握るかの線引きで詰まります。
読み取り系の操作（遷移・スナップショット・スクリーンショット・コンソール取得）は、何度やっても画面の状態が変わらないので任せても安全です。一方、状態変更系の操作（入力・クリック・送信）は、押した瞬間に元に戻せない結果を生むことがあります。
なのでプロンプト側で、許可する状態変更を明示的に絞ります。上の例では「ログインだけ許可、それ以外の状態変更は禁止」と書いています。これで、勝手にログアウトしたりフォームを再送信したりするのを防げます。
ログイン済みのブラウザセッションをエージェントに渡すときは、プロンプトインジェクションにも注意してください。操作対象のページに悪意ある指示が埋め込まれていると、意図しない操作を踏むことがあります。状態変更操作を絞っておけば、被害の範囲を小さく抑えられます。
実務では、段階を分けると扱いやすいです。
フェーズ1: 読み取りのみ許可（巡回・情報収集・レポート生成）
フェーズ2: 限定した状態変更を許可（ログイン、特定フォームの入力まで）
フェーズ3: 送信など不可逆操作は人間が最終確認
毎回の起動をワンクリックにする（ショートカット.app）
この方式では、先に Chrome を Remote Debugging Port 付きで起動しておく必要があります。chrome-devtools-existing は「起動する」設定ではなく「すでに起動している Chrome に接続する」設定なので、毎回コマンドを手で打つのは地味に面倒です。
そこで Chrome の起動だけを macOS 標準の「ショートカット」アプリにまとめ、Dock から 1 クリックで叩けるようにします。Claude Code 本体は対話型の CLI なので、ショートカットからは無理に動かさず、起動後に自分で claude と打ちます。準備だけワンクリック、あとはいつもどおり、という分担です。
1. ショートカットを作る
「ショートカット」アプリで新規ショートカットを作り、「シェルスクリプトを実行」アクションを追加します。シェルを zsh（または bash）にして、中身をこうします。
PROFILE_DIR="$HOME/chrome-mcp-dev-profile"
DEBUG_URL="http://127.0.0.1:9222/json/version"
mkdir -p "$PROFILE_DIR"
# すでに起動していれば何もしない
if curl -s "$DEBUG_URL" >/dev/null 2>&1; then
echo "Already running on 127.0.0.1:9222"
exit 0
fi
open -na "Google Chrome" --args \
--remote-debugging-port=9222 \
--user-data-dir="$PROFILE_DIR" \
--no-first-run \
--no-default-browser-check
open -na で Chrome をバックグラウンドに上げるだけなので、ショートカットとも素直に動きます。名前は Start Chrome (MCP) あたりにしておきます。
初回は「"ショートカット"が Google Chrome を操作することを許可しますか？」といった確認が出ることがあります。許可すれば次回以降は出ません。
2. Dock に置く
作ったショートカットを右クリックして「詳細を表示」を開き、「Dock に追加」を有効にします（macOS のバージョンによっては、Finder の「アプリケーション/Shortcuts」から Dock へドラッグ）。「メニューバーにピン固定」も合わせて有効にしておくと、メニューバーからも叩けます。
これで、アイコンをクリックするだけで Chrome が Remote Debugging Port 付きで立ち上がります。
3. 実際の流れ
Dockのショートカットをクリック
→ Chrome（MCP用プロファイル）が起動
ターミナルで claude を実行
→ /mcp で chrome-devtools-existing が connected を確認
Chrome の起動はクリック 1 回、Claude Code はターミナルで claude と打つだけ。ログインが要る画面でも、初回だけ手動でログインしておけば、--user-data-dir で固定したプロファイルに状態が残るので、次回からは省けます。
まとめ
自分でChromeを起動 → --browser-url で接続だけさせる
→ chrome-devtools-mcp の操作プリミティブを Claude Code に渡す
→ 読み取り系と状態変更系を分けて権限設計する
→ 操作結果はMarkdownレポートで受け取る
→ Chromeの起動はショートカット.appでワンクリック化
見るだけだったブラウザを、入力やクリックまで含めて任せられると、動作確認や管理画面の巡回みたいな地味で繰り返しの多い作業がごっそり片付きます。まずは自分の管理下にある画面で、軽く触ってみてください。思ったより素直に動きます。
参考リンク
このシリーズの歩き方
Claude Code実務運用シリーズ ― 暴走させない、から仕組みにするまで。
- ◀ 前の記事: 新規Chromeを起動させるな：Claude Codeをログイン済みChromeへ接続するMCP調査手順
- ▶ 次の記事: 【第1弾】Claude Code × Firebase Crashlytics でクラッシュログを直接取得する方法
- 🔍 あわせて読む: 【コピペで完了】Claude Codeの最初に入れる安全設定2つ：「危険コマンド」と「機密ファイル」を拒否する ― 操作を任せる前の安全設定
- 🗺 シリーズ全記事の地図(親記事)