自作のChrome拡張機能を、Claude Codeに操作させられる。これが一番の衝撃だった。

Chrome DevTools MCPの --autoConnect モードを使えば、普段使っているブラウザにそのまま接続できる。ログイン状態もCookieも拡張機能も、全部そのまま。つまり、自分が作ったChrome拡張機能がページに注入するDOM要素を、Claude Codeがクリックしたりテキストを入力したりできる。

実際に試してみた。マネーフォワードのホーム画面で、自作のスプレッドシート連携拡張（SSボタン）をClaude Codeにクリックさせたところ、サイドパネルが展開され、エクスポート・インポートのUIが全て操作可能な状態になった。

いつから使えるのか

2025年12月11日にChrome公式ブログで発表された。Chrome M144（当時Beta）で追加された機能で、現在はStableチャネルで利用可能。

従来のChrome DevTools MCPは、専用プロファイルでChromeを起動するか、--remote-debugging-port を指定して起動する必要があった。どちらも普段使いのブラウザとは別のセッションになるため、ログインし直したり、拡張機能が入っていなかったりと、実用上の制約が大きかった。

autoConnect の仕組み

--autoConnect を指定すると、MCP サーバーが実行中のChromeインスタンスに接続し、リモートデバッグセッションを要求する。

セキュリティ対策として:

• 接続時にChrome側で許可ダイアログが表示される（ユーザーが明示的に許可する必要がある）
• デバッグセッション中は「Chrome は自動テストソフトウェアによって制御されています」というバナーが表示される
• chrome://inspect/#remote-debugging で事前にリモートデバッグを有効化しておく必要がある

セットアップ

1. Chromeでリモートデバッグを有効化

chrome://inspect/#remote-debugging にアクセスし、リモートデバッグを有効にする。

2. MCP設定

Claude Codeの場合、.mcp.json に以下を追加:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--autoConnect"
      ]
    }
  }
}

Chrome M144がStableに到達済みなので、--channel=beta の指定は不要。

3. 接続テスト

Claude Codeで list_pages ツールを呼ぶと、開いているタブの一覧が返ってくる。初回接続時はChrome側で許可ダイアログが出るので承認する。

従来方式との比較

何ができるか

Chrome DevTools MCPが提供するツール:

• ページ操作: list_pages, new_page, navigate_page, select_page, close_page
• スクリーンショット: take_screenshot（ページ全体・要素単位）
• DOM操作: take_snapshot, click, fill, type_text, hover, drag
• JavaScript実行: evaluate_script
• ネットワーク: list_network_requests, get_network_request
• コンソール: list_console_messages, get_console_message
• パフォーマンス: performance_start_trace, performance_stop_trace, lighthouse_audit
• エミュレーション: emulate（ビューポート、ダークモード、ネットワーク速度など）

Chrome拡張機能の操作で広がる可能性

autoConnectの真価は、拡張機能との連携にある。

拡張機能がページに注入するDOM要素（ボタン、パネル、フォームなど）は、通常のページ要素と同じように take_snapshot でuid を取得し、click や fill で操作できる。

操作できるもの:

• 拡張機能がページに注入するUI要素（content script由来）
• ページ上のオーバーレイ、サイドパネル、フローティングボタン

操作できないもの:

• ツールバーアイコンクリックで開くポップアップウィンドウ
• chrome-extension:// で始まる拡張の設定ページ

つまり、業務で使っている拡張機能の操作を自動化したり、自作の拡張機能をClaude Codeに操作させてテストしたりできる。

スクリーンショットとDOMスナップショットの違い

Chrome DevTools MCPには take_screenshot と take_snapshot の2つがある。

• take_screenshot: ビジュアルな画像を返す。レイアウトの確認、ユーザーへの報告に使う
• take_snapshot: DOMのアクセシビリティツリーをテキストで返す。各要素にuidが振られ、click や fill の対象を特定するのに使う

自動操作が目的なら take_snapshot だけで十分なケースが多い。スクリーンショットは「人間が見て確認する」ための機能。

参考

• Chrome DevTools MCP でブラウザセッションをデバッグ（Chrome公式ブログ）
• chrome-devtools-mcp（GitHub）