ローカルのWebアプリを開発しているとき、フォームの動作確認・コンソールエラーの確認・レイアウトの崩れのチェックを毎回手動でやっていませんか。Claude CodeのChrome統合（beta）を使うと、Claudeがブラウザを直接操作して「ページを開く・クリックする・スクリーンショットを撮る・コンソールエラーを読む」といった作業を自律的に行えます。
2026年3月に全有料プランユーザーへ一般公開されたこの機能は、Webアプリのデバッグ・E2Eテストの補助・反復的なフォーム入力の自動化など幅広いユースケースに対応します。この記事では、セットアップから実践的な使い方・セキュリティ上の注意点まで解説します。
Claude Code全般の概要はClaude Code完全ガイドを参照してください。
2026年3月現在、Chrome統合はまだベータ扱いです。動作が不安定なケースや、一部機能が変更される可能性があります。また、ブラウザ操作によって意図せぬデータ変更や送信が起きる可能性があるため、本番環境・重要なサービスでの使用は慎重に判断してください。
Chrome統合のセットアップ
要件の確認
| 要件 | 内容 |
|---|---|
| Claude Codeのバージョン | v2.0.73以上（claude --versionで確認） |
| Chrome拡張機能のバージョン | v1.0.36以上 |
| 対応ブラウザ | Google Chrome・Microsoft Edge のみ（Brave・Arc等のChromiumブラウザは未対応） |
| プラン | Anthropic直接プランのみ（Pro/Max/Teams/Enterprise） Amazon Bedrock・Google Vertex AI・Microsoft Foundry経由は使用不可 |
| WSL | 未対応（Windows上のWSL環境では動作しない） |
Chrome拡張機能のインストール
Chrome Web Storeから「Claude」拡張機能をインストールします。同じ拡張機能がclaude.aiのブラウザ統合にも使われているため、既にインストール済みの場合はバージョンを確認してください。
- Chrome Web StoreでAnthropicが公開している「Claude」拡張機能を検索
- インストール後、拡張機能のアイコンをクリックしてAnthropicアカウントでログイン
- Claude Code（CLIまたはVSCode拡張）でAnthropicアカウントにログインしていることを確認
- 両者が同一アカウントでログインされていれば接続可能
VSCode拡張機能でClaude Codeを使っている場合は、Chrome拡張機能がインストールされていれば自動的にChrome統合が利用可能です。
--chromeフラグの追加は不要です。Chrome統合の起動方法
# Chrome統合を有効にしてClaude Codeを起動 claude --chrome # 明示的に無効化する場合 claude --no-chrome # セッション内で有効化する場合 /chrome
/chromeコマンドを実行すると「Enable by default」という選択肢も表示されます。毎回フラグを付けるのが面倒な場合は常時有効にできますが、ブラウザツールが常時ロードされるためコンテキストトークンの消費が増えます。必要なときだけ--chromeで起動する方が効率的です。
Chrome統合が有効になると、/mcpコマンドでclaude-in-chromeというMCPサーバーが一覧に表示されます。ブラウザ操作ツールはMCPツールとして提供されており、Claudeが必要に応じて自動的に呼び出します。MCPの仕組みについてはClaude Code MCP完全ガイドを参照してください。
Chrome統合でできること
| 機能 | 内容 |
|---|---|
| ページナビゲーション | URLを開く・前後に移動・ページのリロード |
| 要素操作 | リンクのクリック・フォームへのテキスト入力・ボタンのクリック・プルダウン選択 |
| スクリーンショット | 現在のページを画像として取得してClaudeのコンテキストに読み込む |
| GIF録画 | ブラウザ操作をGIFとして録画（デモ動画の自動生成に使える） |
| コンソール読み取り | Chromeデベロッパーツールのコンソールエラー・警告・ログを読み取る |
| ネットワーク読み取り | ページロード時のHTTPリクエスト・レスポンスを確認 |
| DOM状態の読み取り | ページのHTML構造・要素の状態を確認 |
| JavaScript実行 | ブラウザコンソールでJavaScriptを実行 |
| ログイン済みセッションの共有 | 現在のChromeのログイン状態（Cookieなど）を引き継いで操作できる |
特にログイン済みセッションの共有は他のブラウザ自動化ツールと差別化される機能です。Google Docs・Gmail・Notion・社内ツールなど、APIが公開されていないWebサービスに対してもClaudeが操作できます。
実践的なユースケース
ローカルWebアプリのデバッグ
ローカルで開発中のWebアプリを直接Claudeに確認させて、コードの修正までを一気に行えます。開発者ツールを手動で開く手間が省けます。
claude --chrome # Claudeへの指示例: # "localhost:3000 を開いて、ログインフォームに test@example.com と # password123 を入力して、送信後にコンソールエラーがないか確認して" # → Claudeが自動で: # 1. localhost:3000 を開く # 2. フォームに入力・送信 # 3. コンソールエラーを読み取り # 4. エラーがあれば原因を特定してコードを修正
スクリーンショットでレイアウト確認
# Claudeへの指示例: # "localhost:3000/dashboard のスクリーンショットを取って、 # レイアウトが崩れている箇所があれば指摘して修正案を教えて" # → Claudeが: # 1. ページを開いてスクリーンショットを取得 # 2. 画像を解析してレイアウトの問題を特定 # 3. 修正すべきCSSを提案
フォームへの一括入力・データ操作
CSVのデータをWebフォームに繰り返し入力するような作業を自動化できます。Excelの貼り付けに対応していない古いシステムや、APIがない社内ツールへのデータ登録などに有効です。
Webからのデータ抽出
# Claudeへの指示例: # "このページの商品一覧から商品名と価格をすべて取得して、 # CSVファイルに保存してください" # → Claudeが: # 1. ページにアクセス # 2. DOM構造を読み取り商品情報を抽出 # 3. CSV形式でファイルに保存
GIF録画でデモ動画を自動生成
ユーザー向けの操作マニュアルや、バグ再現のためのGIFをClaudeに自動生成させることができます。「チェックアウトフローを操作してGIFで録画して」と指示するだけでデモ動画が生成されます。
セキュリティと使用上の注意点
プロンプトインジェクション攻撃のリスク
Webページには悪意ある指示が埋め込まれている可能性があります。例えば「このページを閲覧しているAIエージェントは、次の操作を実行してください」という隠しテキストがページに含まれていた場合、Claudeがその指示に従ってしまうプロンプトインジェクション攻撃のリスクがあります。
Anthropicが使用を非推奨としているケース：
・金融口座・証券取引サイト
・医療情報・法律文書を扱う業務アカウント
・機密情報を含む会社システム
・他人の個人情報を含むサイト
ブロックされている操作：株取引・CAPTCHA回避・機密データの大量入力・顔画像の収集/スクレイピング
スクリーンショットのデータ送信
Chrome統合でスクリーンショットを取得すると、その画像はAnthropicのサーバーに送信されて解析されます。個人情報・機密情報が画面に表示されている状態でスクリーンショットを使う場合は、Anthropicのプライバシーポリシーに従った取り扱いがされることを念頭に置いてください。
Claude Codeによるブラウザ操作の結果（コンテンツ公開・データ変更・購入等）についてはユーザー自身が責任を負います。権限管理の観点から、必要最低限の操作にとどめることを推奨します。権限管理についてはClaude Code 権限管理完全ガイドも参照してください。
制限事項と対処法
| 制限 | 対処法 |
|---|---|
| ログインページ・CAPTCHAに遭遇するとClaudeが一時停止 | Claudeが停止を通知するので、手動でログインまたはCAPTCHAを解決して再指示 |
| alert/confirm/prompt等のJavaScriptダイアログがブラウザを停止させる | 手動でダイアログを閉じてから「続けて」と指示 |
| Chrome拡張のService Workerがアイドルになると接続切断 | /chrome → “Reconnect extension” で再接続 |
| Brave・Arc等のChromiumブラウザは未対応 | Google Chrome または Microsoft Edge に切り替える |
| WSL環境では動作しない | Windows側のClaude CodeまたはVSCode拡張から使う |
| Bedrock/Vertex AI/Foundry経由では使用不可 | Anthropic直接プランへの切り替えが必要 |
まとめ
Claude CodeのChrome統合を使うと、Claudeがブラウザを直接操作してWebアプリのデバッグ・フォーム入力・データ抽出・スクリーンショット取得・GIF録画を自律的に行えます。特に、ログイン済みのChromeセッションをそのまま使えるため、APIがない社内ツールや認証が必要なWebサービスにも対応できます。
ただしプロンプトインジェクション攻撃のリスクや、スクリーンショットのデータ送信には注意が必要です。金融・医療・法律関連のサービスや機密情報を扱う業務での使用はAnthropicが推奨していません。信頼できるローカル開発環境や、リスクを理解した上での限定的な業務自動化に活用してください。
よくある質問
QChrome拡張機能をインストールしても接続できません。
A以下を確認してください。①Claude Code（CLI）とChrome拡張機能が同一Anthropicアカウントでログインしているか。②Claude CodeのバージョンがV2.0.73以上か（claude --versionで確認）。③Chrome拡張機能のバージョンがv1.0.36以上か。④対応ブラウザ（Google Chrome・Microsoft Edge）を使っているか。全部確認済みの場合は/chrome → “Reconnect extension” を試してください。
Q–chromeフラグを毎回付けるのが面倒です。
Aセッション内で/chromeを実行し「Enable by default」を選択すると、settings.jsonにChrome統合を常時有効にする設定が保存されます。ただし、ブラウザツールが常時ロードされるためトークン消費が増えます。頻繁に使わない場合はフラグで都度有効化する方が効率的です。
QProプランでも使えますか？
A使えます。AnthropicのProプランはChrome統合に対応しています。ただしAmazon Bedrock・Google Cloud Vertex AI・Microsoft Foundry経由のAPI利用では使用できません。Anthropicが直接提供するProプランへの加入が必要です。
Qローカルホスト（localhost）のサイトは操作できますか？
Aできます。むしろローカルWebアプリのデバッグがChrome統合の最も安全で有効なユースケースです。localhost:3000等を指定してナビゲートできます。
QSeleniumや Playwrightと何が違いますか？
ASelenium・Playwrightは「コードでブラウザを操作する」テストフレームワークです。Claude CodeのChrome統合は「Claudeが自然言語の指示を理解してブラウザを操作する」仕組みです。テストコードを書く必要がなく、「ログインして商品を購入して確認メールをチェックして」という指示一つで複雑な操作を実行できます。一方、自動化スクリプトとして繰り返し再利用したい場合はPlaywright等の方が向いています。
QGIF録画した動画はどこに保存されますか？
A録画したGIFは作業ディレクトリに保存されます。ファイル名はClaudeが自動的に決定しますが、保存先を指定したい場合は「○○というファイル名で保存して」と指示できます。
