Claude Code で Chrome ブラウザを操作

Claude Code の Chrome 統合機能を使用すると、コマンドライン（CLI）または VS Code 拡張機能から直接ブラウザを操作できます。Claude は以下のことが可能です：

  • ウェブページを開く、ボタンをクリックする、フォームに入力する
  • ブラウザコンソールログの読み取り（コンソールエラー、ネットワークリクエスト、DOM 状態）
  • ログイン済みのあらゆるウェブサイトと連携（Gmail、Notion、Google Docs など）
  • ブラウザ操作を GIF ファイルとして録画
  • 複数のタブ間での連携作業

主な利点：Claude がブラウザのログイン状態を共有するため、追加の API キーや再認証は不要です。

この機能は現在ベータ版で、ターミナル（CLI）または VS Code で自然言語の指示を使用して、Claude に Chrome ブラウザを直接操作させることができます。ナビゲーション、クリック、入力、デバッグ、データ抽出などの操作を、手動でウィンドウを切り替えることなく実行できます。

インストールと準備

前提条件

この機能を使用するには、以下の要件を満たしている必要があります：

条件 説明
Claude Code バージョン v2.0.73 以上
Chrome 拡張機能バージョン Claude in Chrome v1.0.36 以上
Anthropic アカウント 必要直接支払いプラン（Pro、Max、Teams、または Enterprise）
サポート対象外のチャネル Amazon Bedrock、Google Vertex AI、Microsoft Foundry 経由でアクセスするユーザー利用不可

インストール手順

1. ブラウザ拡張機能をインストール：

  • Chrome/Edge を開き、次にアクセスChrome Web Store - Claude。
  • 「Chrome に追加」をクリックしてインストールします。
  • インストール後はブラウザを再起動して、Native Messaging Host が正しく読み込まれることをお勧めします。

2. Claude Code のインストール/更新：

  • 公式クイックスタートに従って Claude Code（CLI または VS Code 拡張機能）をインストールします。

3. 権限と接続：

  • 初回実行時に、拡張機能が Native Messaging Host を自動的にインストールします。
  • 一般的なパス（macOS の例）：~/Library/Application Support/Google/Chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json

起動と接続方法

CLI での起動

  • 推奨方法：Chrome を直接指定して起動

    claude --chrome

  • または既存のセッションで有効化：

    /chrome

    その後、「有効化」または「再接続」を選択します。

  • デフォルトに設定（便利ですが、コンテキスト消費量が増加します）：
    に/chromeメニューで「Enabled by default」を選択します。

VS Code での使用

  • プロンプトボックスに入力@browser+ あなたの指示、例：

    @browser 打开 localhost:3000，检查控制台是否有错误

接続状態の確認

Claude Code セッションで次を入力/chromeを入力すると、ステータスの確認、権限の管理、拡張機能の再接続ができます。

基本的な使用方法

Claude Code は自然言語のプロンプトを使用してブラウザを操作するため、複雑なコードを書く必要はありません。Claude が指示を自動的に解析し、対応する操作を実行して、結果（スクリーンショット、コンソールログ、抽出したデータなど）を返します。

主な機能：

  • ナビゲーション：URL を開く
  • インタラクション：要素のクリック、テキスト入力、ページのスクロール
  • 読み取り：DOM、コンソールエラー、ネットワークリクエストの確認
  • 自動化：フォームへの入力、データ抽出、タブ間の操作
  • その他：GIF デモの録画、CSV の保存など

プロンプトのコツ：

  • 指示は明確に、段階的に記述します（例：「URL を開いて、検索ボックスをクリックし、XXX を入力して結果を教えてください」）。
  • ローカルファイルと組み合わせることも可能です（例：CSV を読み取って一括操作）。
  • 長いタスクの場合、Claude は段階的に実行して進捗を報告します。

実用的な例

例 1：簡単なナビゲーションと操作

去到 https://www.baidu.com，点击搜索框，输入 "python"，告诉我出现的搜索结果。

例 2：ローカルウェブページのテストとデバッグ

我刚更新了登录表单验证。请打开 localhost:3000，用无效数据提交表单，检查错误消息是否正确显示，并查看控制台日志。

例 3：フォーム自動化（ローカルファイルとの組み合わせ）

我有一个 contacts.csv 文件，里面有客户联系方式。对于每一行，打开 crm.example.com，点击“添加联系人”，填写姓名、邮箱和电话，然后提交。

例 4：Google Docs などのログイン済みサイトでの操作

根据最近的 Git 提交，起草一份项目更新，并添加到我的 Google Doc（网址：docs.google.com/document/d/abc123）。

例 5：データの抽出と保存

打开产品列表页面，提取每个商品的名称、价格和库存状态，保存为 CSV 文件。

例 6：デモ GIF の録画

录制一个 GIF，展示从购物车添加商品到结账确认的完整流程。

例 7：複数サイトのワークフロー

明日のカレンダーを確認し、外部参加者がいる各会議について、その会社のウェブサイトを調べてメモを追加します。
その他の拡張機能