Chrome で Claude Code を使用する

​

機能

• ライブデバッグ：コンソールエラーと DOM 状態を直接読み取り、それらを引き起こしたコードを修正します
• デザイン検証：Figma モックから UI をビルドしてから、ブラウザで開いて一致することを確認します
• Web アプリテスト：フォーム検証をテストし、ビジュアルリグレッションをチェックするか、ユーザーフローを検証します
• 認証済み Web アプリ：API コネクタなしで、ログインしている Google Docs、Gmail、Notion、またはその他のアプリと対話します
• データ抽出：Web ページから構造化情報を取得してローカルに保存します
• タスク自動化：データ入力、フォーム入力、またはマルチサイトワークフローなどの反復的なブラウザタスクを自動化します
• セッション記録：ブラウザインタラクションを GIF として記録して、何が起こったかを文書化または共有します

​

前提条件

• Google Chrome または Microsoft Edge ブラウザ
• Claude in Chrome 拡張機能 バージョン 1.0.36 以上（Chrome Web Store で両方のブラウザで利用可能）
• Claude Code
• 直接 Anthropic プラン（Pro、Max、Team、または Enterprise）

​

CLI で開始する

claude --chrome

Go to code.claude.com/docs, click on the search box,
type "hooks", and tell me what results appear

​

Chrome をデフォルトで有効にする

​

サイト権限を管理する

​

ブラウザツールをプランモードで使用する

• 読み取り専用呼び出し: read_page、get_page_text、find、コンソールメッセージまたはネットワークリクエストの読み取り、およびスクリーンショットの撮影
• 状態変更呼び出し: クリック、入力、ナビゲーション、タブとウィンドウ管理、および GIF の記録

​

ワークフロー例

​

ローカル Web アプリケーションをテストする

I just updated the login form validation. Can you open localhost:3000,
try submitting the form with invalid data, and check if the error
messages appear correctly?

​

コンソールログでデバッグする

Open the dashboard page and check the console for any errors when
the page loads.

​

フォーム入力を自動化する

I have a spreadsheet of customer contacts in contacts.csv. For each row,
go to the CRM at crm.example.com, click "Add Contact", and fill in the
name, email, and phone fields.

​

Google Docs でコンテンツをドラフトする

Draft a project update based on the recent commits and add it to my
Google Doc at docs.google.com/document/d/abc123

​

Web ページからデータを抽出する

Go to the product listings page and extract the name, price, and
availability for each item. Save the results as a CSV file.

​

マルチサイトワークフローを実行する

Check my calendar for meetings tomorrow, then for each meeting with
an external attendee, look up their company website and add a note
about what they do.

​

デモ GIF を記録する

Record a GIF showing how to complete the checkout flow, from adding
an item to the cart through to the confirmation page.

​

トラブルシューティング

​

拡張機能が検出されない

1. Chrome 拡張機能が chrome://extensions にインストールされ、有効になっていることを確認します
2. claude --version を実行して Claude Code が最新であることを確認します
3. Chrome が実行されていることを確認します
4. /chrome を実行して「Reconnect extension」を選択し、接続を再確立します
5. 問題が解決しない場合、Claude Code と Chrome の両方を再起動します

• macOS：~/Library/Application Support/Google/Chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json
• Linux：~/.config/google-chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json
• Windows：Windows レジストリで HKCU\Software\Google\Chrome\NativeMessagingHosts\ を確認します

• macOS：~/Library/Application Support/Microsoft Edge/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json
• Linux：~/.config/microsoft-edge/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json
• Windows：Windows レジストリで HKCU\Software\Microsoft\Edge\NativeMessagingHosts\ を確認します

​

ブラウザが応答しない

1. モーダルダイアログ（alert、confirm、prompt）がページをブロックしているかどうかを確認します。JavaScript ダイアログはブラウザイベントをブロックし、Claude がコマンドを受け取るのを防ぎます。ダイアログを手動で閉じてから、Claude に続行するよう伝えます。
2. Claude に新しいタブを作成して再度試すよう依頼します
3. chrome://extensions で拡張機能を無効にしてから再度有効にして Chrome 拡張機能を再起動します

​

長いセッション中に接続が切れる

​

Windows 固有の問題

• 名前付きパイプの競合（EADDRINUSE）：別のプロセスが同じ名前付きパイプを使用している場合、Claude Code を再起動します。Chrome を使用している他の Claude Code セッションを閉じます。
• ネイティブメッセージングホストエラー：ネイティブメッセージングホストがスタートアップ時にクラッシュする場合、Claude Code を再インストールしてホスト設定を再生成してみてください。

​

一般的なエラーメッセージ

​

関連項目

• コンピュータ使用：ブラウザでタスクを実行できない場合にネイティブ macOS アプリを制御します
• VS Code で Claude Code を使用する：VS Code 拡張機能でのブラウザ自動化
• CLI リファレンス：--chrome を含むコマンドラインフラグ
• 一般的なワークフロー：Claude Code を使用するその他の方法
• データとプライバシー：Claude Code がデータを処理する方法
• Chrome で Claude を使い始める：ショートカット、スケジューリング、権限を含む Chrome 拡張機能の完全なドキュメント