TabbitBlog

Claude Code で Chrome を操作する方法

Claude in Chrome 拡張機能の設定、ターミナルでの接続確認、Desktop のプロファイルの違いを説明します。

この記事の内容
  1. 要点
  2. どちらのブラウザーを使うか
  3. 拡張機能とアカウントの条件を確認する
  4. ターミナルから接続する
  5. Desktop の Browser パネルを選ぶ場合
  6. 最初は読み取り用の課題を試す
  7. 接続表示と作業結果を分けて確認する
  8. 再試行の前に権限を確認する

Claude Code は Claude in Chrome 拡張機能を使い、許可されたブラウザーでページの読み取りやクリックを行えます。ターミナルでは claude --chrome で起動し、/chrome で接続を確認します。Claude Code Desktop の Browser パネルには独立したプロファイルがあります。

拡張機能をインストールして有効にし、再起動しても接続できなかったという報告があります。ログイン済みのサイトで作業する前に、/chrome でセッションの接続状態を確認しましょう。 Reddit

要点

  • 公式拡張機能の 1.0.36 以降を使い、対応する Anthropic の契約で /login からログインします。

  • ログイン済みのプロファイルには拡張機能、独立した環境でのプレビューには Desktop の Browser パネルを使います。

  • 対象のウィンドウとタブを確認し、最初は公開ページで結果を画面から確認します。

  • 接続後は実際のページで結果を確かめます。

どちらのブラウザーを使うか

経路ブラウザーのプロファイル用途
Claude in Chrome既存のプロファイルログイン済みのセッションが必要な場合
Desktop Browser独立したプロファイル公開ページやローカルプレビュー
公式資料に記載された Claude Code のブラウザー接続経路

拡張機能とアカウントの条件を確認する

公式ガイドでは拡張機能 1.0.36 以降と対象の Anthropic 直接契約プラン(Pro、Max、Ultra、Team、Enterprise)が必要です。/login でサインインします。API キーやセットアップトークンだけでは利用できません。組織のポリシーも確認します。

公式ガイドは Chrome と Edge に加え、Brave、Arc、Vivaldi、Opera での拡張機能の検出と接続設定にも触れています。WSL は対象外です。拡張機能と CLI で同じ Claude アカウントと組織を選びます。管理者がアクセスを制限している場合もあります。 Anthropic

Claude Code Docs · Chrome Web Store

Claude のブラウザー操作 · Claude Code と Tabbit

ターミナルから接続する

対応ブラウザーで拡張機能を有効にし、claude --chrome を実行して初回ダイアログを確認します。公式ガイドでは /chrome に Status: Enabled と Extension: Installed が表示されます。ブラウザーが複数ある場合は目的のものを選び、作業タブを確認します。

claude --chrome

VS Code では @browser を入力して接続します。Claude Code 2.1.287 以降で /chrome の Enabled by default を有効にすると、VS Code のセッション起動時に接続します。 Claude Code Docs

エージェント向けブラウザー · ブラウザーエージェント

Desktop の Browser パネルを選ぶ場合

Browser パネルは個人のログイン状態や履歴を引き継がない独立したプロファイルです。公開ページやローカルプレビューに向きます。許可済みのログイン状態が必要なら、公式ガイドの拡張機能を使います。パネルの外部サイトの許可はサブドメインごとに分かれます。

Claude Code Desktop Docs · ブラウザー自動化 · ブラウザー操作の安全性

最初は読み取り用の課題を試す

アカウント不要の練習ページを開きます。タイトルを読み、Show source details を一度クリックして表示された ID を返すよう依頼します。ボタンがない場合やログインが求められた場合は停止します。期待する表示は Source ID: DEMO-A01 です。

接続したブラウザーで [練習ページの URL] を開いてください。
見出しを読み、Show source details を一度クリックしてください。
タブの URL、見出し、表示された Source ID を返してください。
URL が予期せず変わる、ボタンが見つからない、ログインを求められる場合は停止してください。フォームの送信やファイルのアップロードは行わないでください。

練習ページを開く · AI エージェントでブラウザーを操作 · 既存のブラウザーに接続

接続表示と作業結果を分けて確認する

ウィンドウと練習ページの URL を確認し、回答にある ID とクリック後の表示を見比べます。一致しなければ、現在のタブを読み直すように頼みます。実際のサイトではクリックを繰り返すとデータを再送信する場合があります。

初回タスクの確認項目

再試行の前に権限を確認する

/chrome で検出されない場合は、プロファイルと拡張機能の状態、クライアントのバージョンを確認します。Reconnect extension を試します。必要なら対象ブラウザーを確認したうえで再起動します。組織のルールで接続やサイトが制限されることもあります。

現象確認
拡張機能を検出しない/chrome → Reconnect extension
別のブラウザーに接続目的のブラウザーを選ぶ
結果が表示されない表示された ID を読み直す
職場のサイトだけで失敗するサイトの権限と組織のコネクター設定を確認する。
再接続でページが開くだけClaude Code が 2.1.290 より前なら更新する。

Not connected と表示されたら Reconnect extension を選びます。2.1.290 より前はページを開くだけで、切断した接続を復旧しません。初回に拡張機能が見つからない場合は、ブラウザーを再起動してネイティブ メッセージングの設定を読み込ませます。職場のサイトだけで失敗する場合は、サイトの許可と組織のコネクター設定や IP 許可リストを確認します。 Claude Code Docs

複数の Chrome プロファイルと Edge を使っているユーザーは、Edge が選ばれることがあると報告しました。実際に開いたウィンドウを確認してください。 Reddit

ログイン済みの Chrome を使うなら claude --chrome、ローカルのプレビューなら Desktop の Browser パネルから始めます。まず公開ページで練習し、画面上の結果を確認しましょう。

よくある質問

Claude Code は Chrome でクリックできますか?

公式の拡張機能を使い、許可されたセッションで操作できます。

ターミナルではどのコマンドを使いますか?

claude --chrome で起動し、/chrome で接続を確認します。

API キーだけで接続できますか?

公式ガイドでは対象プランと /login によるサインインが必要です。

Desktop は個人用プロファイルを使いますか?

Browser パネルは独立した新しいプロファイルを使います。

拡張機能はログイン状態を引き継ぎますか?

接続したプロファイルを使い、サイトと組織の許可に従います。

拡張機能を検出しないときは?

プロファイル、有効化、バージョンを確認し、Reconnect extension を試します。

次のステップへ

Tabbit と一緒に仕事をしましょう。

タブをまたいで調査し、繰り返しのブラウザ作業を自動化し、あらゆる文脈を手の届くところに。