公開日: 最終更新:
執筆・編集：株式会社Nexa 編集部（下書きと機械検査はAI、公開前に人が確認）／約28分で読めます。公式ドキュメント・公式発表などの一次情報を確認したうえで執筆・更新しています。AIツールの仕様や料金は変わることがあるため、導入判断の前に各公式サイトの最新情報もご確認ください。記事の作り方と検査の方針
Claude Codeのブラウザ操作は、本記事で比較する6方式から、ログイン済みChromeなら公式連携、ヘッドレス実行ならagent-browserを選べます。
- 公式の方法は2つ: Chrome連携（Claude in Chrome）と、デスクトップアプリの内蔵ブラウザ
- 外部ツールは4つ: Playwright MCP、Playwright CLI、Chrome DevTools MCP、agent-browser。必要な実行環境は方式ごとに異なります
- 選び方: ログイン済みサイトの操作はChrome連携、軽量な定型操作はagent-browserかPlaywright CLI、表示速度や通信の調査はChrome DevTools MCP
対象読者：企業の業務自動化担当者。
今日やること: 下の早見表で方法を1つ選び、導入コマンドを実行して、ページを1つ開くところまで試す
確認日: 2026年10月2日に公式ページで確認（各公式ドキュメント・公式リポジトリ）
Claude Codeでブラウザを操作するには、ブラウザへの接続方法を選びます。本記事ではAnthropic公式のChrome連携・デスクトップアプリの内蔵ブラウザと、Playwright MCP・Playwright CLI・Chrome DevTools MCP・agent-browserの6方式を比較します。Claude Codeは、自然言語でコードの作成やツール操作を指示できるAnthropicの開発支援ツールです。
普段のChromeにログインした状態で操作したいなら、claude --chromeで起動する公式連携が候補です。ただし対応プランと/loginでの認証が必要です。画面を出さない定型操作はagent-browserやPlaywright CLI、表示速度や通信の調査はChrome DevTools MCPから検討します。
この記事では、まず6方式の利用条件と導入コマンドを早見表で確認し、その後にagent-browserの設定と業務での使い方を説明します。名称・仕様・コマンドは、2026年10月2日に公式ドキュメントと公式READMEで確認しました。記載の用途は選定の目安であり、処理速度や成功率を保証するものではありません。
Claude Codeでブラウザを操作する6つの方法（早見表）
まず「普段のログイン状態を使うか」「専用のブラウザで分離するか」を決めます。MCPはAIと外部ツールを接続する仕組み、CLIはコマンドでツールを操作する方式です。以下は本記事で扱う6方式で、利用できる全ツールを網羅した一覧ではありません。
| 方法 | 提供元・提供状況 | ログイン状態の扱い | 向いている用途 |
|---|---|---|---|
| Chrome連携（Claude in Chrome） | Anthropic公式。直接契約のPro・Max・Team・Enterpriseと/login認証が必要 |
普段使っているブラウザのログイン状態を共有する | ログインが必要なWebアプリの操作、開発中の画面の確認 |
| デスクトップアプリの内蔵ブラウザ | Anthropic公式。CodeタブのBrowserペインで外部サイトも閲覧・操作 | 普段のブラウザとは別のクリーンなプロファイル。保存済みログインを引き継がない | 開発中アプリのプレビュー、ドキュメントを開きながらの作業 |
| Playwright MCP | Microsoft。MCPサーバー | 既定で専用の永続プロファイルに保存。拡張機能経由で起動中のChrome／Edgeにも接続できる | 探索的な操作、自己修復型のテスト、長時間の自律実行 |
| Playwright CLI | Microsoft。CLIとスキル | 既定ではメモリ上のみ。--persistentでディスクに保存 |
コーディングエージェントからのE2Eテスト、画面確認 |
| Chrome DevTools MCP | Google（Chrome DevTools）。MCPサーバー。CLIも提供 | 既定で専用プロファイルのChromeを起動。--autoConnectで起動中のChrome（144以降）に接続 |
表示速度の計測、通信・コンソールの調査、Lighthouse監査 |
| agent-browser | Vercel Labs。Rust製のCLIとスキル | --profileでChromeのログイン状態を再利用 |
定型業務の軽量な自動操作、画面を出さない実行 |
2026年10月2日確認。導入にはClaude Code本体や各ツールの実行環境が必要です。出典: Claude Code公式ドキュメント（Chrome）、同（Desktop）、microsoft/playwright-mcp、microsoft/playwright-cli、ChromeDevTools/chrome-devtools-mcp、vercel-labs/agent-browser
導入コマンド一覧
それぞれの公式ドキュメント・READMEに記載された導入コマンドです。Claude Code本体は設定済みとし、npm・npxを使う方式ではNode.jsとnpmを用意します。Playwright MCP／CLIはNode.js 18以降、Chrome DevTools MCPはNode.jsのLTS版が公式の要件です。初回のブラウザ取得や権限承認は別途必要になる場合があります。
# 1. Chrome連携（Claude in Chrome）
# 事前にChromeウェブストアで拡張機能「Claude」（1.0.36以降）を追加
claude --chrome
# 2. デスクトップアプリの内蔵ブラウザ
# コマンド不要。Cmd+Shift+B（Windowsは Ctrl+Shift+B）で開く
# 3. Playwright MCP
claude mcp add playwright npx @playwright/mcp@latest
# 4. Playwright CLI
npm install -g @playwright/cli@latest
playwright-cli install --skills
# 5. Chrome DevTools MCP
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
# 6. agent-browser
npm install -g agent-browser
agent-browser install
npx skills add vercel-labs/agent-browser公式のChrome連携（Claude in Chrome）で押さえる点
Chrome連携は、Claude Codeが拡張機能「Claude in Chrome」を通じてブラウザを操作する公式機能です。公式の利用条件では、拡張機能1.0.36以降とAnthropicとの直接契約プラン、/loginでのサインインが必要とされています。
- 起動:
claude --chromeで起動する。セッション中は/chromeで接続状態の確認、権限の管理、再接続、既定で有効にする設定ができる - 対応ブラウザ: Google ChromeとMicrosoft Edge。Brave・Arc・Vivaldi・OperaなどのChromium系ブラウザでも拡張機能を検出して接続する。WSL（Windows Subsystem for Linux）は非対応
- 利用条件: Anthropicと直接契約したPro・Max・Team・Enterpriseプランで、
/loginでサインインしていること。APIキーやclaude setup-tokenで発行した長期トークンではChrome連携を有効化できない。Amazon Bedrockなど他社クラウド経由の利用も対象外 - 動き方: 画面に表示されたブラウザで新しいタブを開いて操作する。ログインページやCAPTCHAに当たると一時停止し、人が対応するのを待つ
- 注意: 既定で有効にするとブラウザ用のツールが常に読み込まれ、コンテキストの消費が増える。必要なときだけ
--chromeを付ける使い方も公式に案内されている
接続できない場合は、拡張機能が有効か、Chromeが起動中か、/loginで認証したかを確認します。/chromeの「Reconnect extension」で再接続でき、初回に拡張機能が検出されない場合はChromeの再起動も公式の対処手順に含まれます。APIキー認証のまま--chromeを付けるだけでは解決しません。
デスクトップアプリの内蔵ブラウザとの違い
Claudeデスクトップアプリ（Codeタブ）には、タブ型の内蔵ブラウザがあります。開発中のアプリをプレビューし、Claudeがスクリーンショットの取得、DOMの確認、クリック、フォーム入力を行えます。外部サイトも開けるため、ドキュメントの参照とアプリの確認を同じ画面で進められます。
内蔵ブラウザは、普段のブラウザとは切り離された専用プロファイルで動き、個人ブラウザのログイン情報や履歴を引き継ぎません。内蔵ブラウザ内で自分でサインインすることはできます。公式ドキュメントは、自分のアカウントで操作させたい場合はChrome連携を、アプリの開発・テストや本人確認が要らないサイトには内蔵ブラウザを使うよう案内しています。外部サイトでClaudeが初めて操作するときは許可を求めるカードが表示され、許可済みのサイトでも、商品の購入・アカウント作成・CAPTCHAの突破は人の入力なしにはおこないません。
ブラウザ操作の自動化でできること
ブラウザ自動化とは、人間が手でおこなうクリック・入力・ページ遷移といった操作を、プログラムやAIエージェントが代わりに実行する技術です。
SeleniumやPuppeteerは、コードでブラウザ操作を組み立てる代表的なツールです。Claude Codeとブラウザ連携を組み合わせると、人が自然言語で目的を伝え、AIがページを確認しながら操作を進める使い方ができます。
従来のRPA・Seleniumとの違い
コードで操作を指定する場合は、CSSセレクターなどで対象要素を特定します。たとえばdiv.button-primaryは要素を絞り込む指定です。画面や要素の識別方法が変わると修正が必要になるため、テスト対象に合わせた保守を考えます。
Claude Codeからブラウザを操作する場合は、「ログインボタンをクリックして」「メールアドレスの欄に入力して」と自然言語で指示します。Claude Codeがその時点のページ構造を読み取って操作対象を決めるため、変更後の画面で対象を探し直せます。ただし、操作の成功は保証されないため結果の確認が必要です。
一方、毎回同じ手順を実行する処理やCI（継続的インテグレーション）の回帰テストでは、スクリプト化して手順を固定する方法も候補です。AIに都度判断させる方法と比較し、再現性・保守性・実行時間を確かめて選びます。Claude Codeにテストスクリプトを書かせる使い方もできます。
Claude Codeでブラウザ自動化が注目される理由
Claude Codeからブラウザを操作する手段は、前の章の6つに加えてBrowser Useなどもあり、選択肢が広がっています。業務で自動化したい操作の多くは、ログインが必要なSaaSの管理画面や会員制サービスです。そのため、どの方法を選ぶ場合も「ログイン状態をどう扱うか」が最初の判断軸になります。
この記事の後半で扱うagent-browserは、軽量なCLIでありながら、Chromeのログイン状態を再利用した操作ができる点に特徴があります。公式のChrome連携が画面に表示されたブラウザで動くのに対し、agent-browserは画面を出さない実行（ヘッドレス）が既定のため、定期実行やサーバー上での実行に組み込みやすい方法です。
agent-browserとは？仕組みとメリット
agent-browserは、Vercel Labsが公開しているAIエージェント向けのブラウザ自動化CLIです。Rust製のネイティブCLIで、Apache-2.0ライセンスのオープンソースとして公開されています。Chromeをヘッドレス（画面表示なし）で操作し、--headedを付けると画面を表示できます。
Claude Codeからは「スキル」として使います。スキルとは、Claude Codeに特定のタスクをおこなわせるための設定ファイル群のことです。npx skills add vercel-labs/agent-browserを実行すると、.claude/skills/agent-browser/SKILL.mdに最小限の案内ファイルが置かれ、実際の手順は実行時にagent-browser skills get coreでCLIから読み込まれます。インストール済みのバージョンと手順書がずれないようにする仕組みです。（Claude Code Skillsの作り方はこちら →）
CLIとスキルで読み込む情報量を抑える
AIエージェントがブラウザを操作する際には、画面の情報をAIに渡す必要があります。このとき「どれだけのデータをAIに送るか」がコストと速度に直結します。
MicrosoftのPlaywright MCP公式READMEは、CLIとスキルの組み合わせについて、大きなツール定義や詳細なアクセシビリティツリーをモデルのコンテキストへ読み込まずに済むと説明しています。一方、ページ構造を継続的に検討する探索的な操作ではMCPにも利点があります。
agent-browserでは、snapshotで要素の参照番号を取得し、get textやevalで必要な内容を取り出せます。まず操作に必要な範囲を確かめ、不要なページ情報をモデルへ渡さない設計にすると、入力量を抑えやすくなります。
削減率は対象ページ、取得する情報量、利用モデル、手順によって変わります。本記事では未検証の倍率を採用せず、同じ作業で出力量と成功率を比較することをおすすめします。
他のブラウザ自動化ツールとの使い分け
| ツール | 形態 | 向いているユースケース |
|---|---|---|
| agent-browser | CLI＋スキル（MCPサーバーとしても起動可） | シンプルな操作・コンテンツ読み取り・スクリーンショット |
| Playwright CLI | CLI＋スキル | テスト自動化・多段階フロー |
| Browser Use | Pythonライブラリ・CLI・クラウド | 自律的な推論が必要・並列実行・複数サイト横断 |
| Playwright MCP | MCPサーバー | ページ構造を見ながらの探索的な操作・自己修復型テスト |
| Chrome DevTools MCP | MCPサーバー（CLIも提供） | 表示速度の計測・通信とコンソールの調査 |
| Claude in Chrome | 公式のChrome拡張機能連携 | 普段のブラウザのログイン状態を使う操作・画面を見ながらの確認 |
「画面を出さずにページを開いて内容を取得したい」「決まったフォームに入力したい」といった定型の自動化であれば、agent-browserはシンプルで扱いやすい選択肢です。
セットアップ手順 — ログイン済みChromeの準備
agent-browserは、Chromeのログイン状態を再利用できます。ただし認証の期限切れや追加認証があれば、人が再ログインする必要があります。ここでは公式READMEの3種類の接続方法を整理し、普段のプロファイルから分離して試す手順を説明します。
インストールする
# CLI本体（Homebrewなら brew install agent-browser）
npm install -g agent-browser
# 自動操作用のChrome（Chrome for Testing）を取得。初回のみ
agent-browser install
# Claude Code用のスキルを追加
npx skills add vercel-labs/agent-browseragent-browser installは、Googleが自動操作向けに提供しているChrome for Testingをダウンロードします。すでに入っているChromeやBraveも自動で検出されます。
ログイン済みChromeプロファイルを使う
Chromeは、プロファイルごとにクッキー・セッション情報・拡張機能を保持します。agent-browserでログイン状態を使う方法は、主に次の3つです。
| 方法 | コマンド例 | 特徴 |
|---|---|---|
| 既存プロファイルの再利用 | agent-browser --profile Default open https://example.com |
普段のプロファイルを一時ディレクトリにコピーして起動する。元のプロファイルは変更されない |
| 専用の永続プロファイル | agent-browser --profile ~/.chrome-agent-browser open https://example.com |
指定したディレクトリに状態を保存する。保存した状態を次回以降に利用する。期限切れ時は再ログインが必要 |
| 起動中のChromeに接続 | agent-browser --auto-connect snapshot |
リモートデバッグを有効にしたChromeを自動で探して接続する。ポート指定は--cdp 9222 |
業務用には、普段のプロファイルと分けた専用プロファイル（例: ~/.chrome-agent-browser/）を用意し、自動操作の対象サービスだけにログインしておく構成をおすすめします。操作できる範囲を必要なサービスに限定できるためです。利用できるプロファイル名はagent-browser profilesで一覧できます。Windowsで既存プロファイル名を指定する場合は、先にChromeを閉じておく必要があります。
専用プロファイルへ初めてログインする場合は、画面を表示して人が認証を済ませます。以下は本記事の構成例です。https://example.comを利用が許可された対象サイトへ置き換え、作業後はagent-browser closeで閉じます。
agent-browser --headed --profile ~/.chrome-agent-browser open https://example.comstart-agent-chrome.shで起動する
専用プロファイルのChromeを画面に表示した状態で起動しておき、そこへagent-browserを接続する方法もあります。ログインや二段階認証を人が済ませてから、続きをClaude Codeに任せたい場合に向いています。起動コマンドは毎回同じなので、start-agent-chrome.shのようなシェルスクリプトにまとめておくと便利です。このスクリプトはagent-browserに付属するものではなく、自分で用意します。
#!/bin/bash
# start-agent-chrome.sh（macOSの例）
# 専用プロファイルとデバッグポートを指定してChromeを起動する
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
--remote-debugging-port=9222 \
--user-data-dir="$HOME/.chrome-agent-browser"# 起動したChromeに接続して操作する
agent-browser --cdp 9222 open https://example.com
agent-browser --cdp 9222 snapshot注意点が2つあります。リモートデバッグ用のポートを開くと、同じパソコン上のどのプログラムからでもそのブラウザを操作できる状態になります。信頼できる端末でのみ使い、作業が終わったらChromeを閉じてください。また、agent-browser state saveで書き出す認証状態のファイルには、セッション情報が平文で含まれます。Gitの管理対象から外し、不要になったら削除します。
Claude Codeから接続する
スキルを追加済みであれば、Claude Codeに「agent-browserを使って◯◯のページを開いて」と指示するだけで、Claude Codeがコマンドを組み立てて実行します。スキルを入れていない場合でも、「agent-browserを使って。コマンドは agent-browser –help で確認して」と伝えれば動かせると、公式READMEに案内されています。
ポイント結果を安定させたい場合は、プロジェクトの
CLAUDE.mdに「ブラウザ操作にはagent-browserを使う」「接続先は--cdp 9222」のように書いておきます。起動中のChromeに接続する構成では、事前にブラウザを起動しておくことが前提条件です。共通の指示を書く前に、CLAUDE.mdの書き方と置き場所を確認してください。
実践ユースケース1 — コンテンツ収集・スクレイピング
ブラウザ自動化の用途の一つが、Webサイトからのコンテンツ収集です。ログインが必要な社内ポータルなどでは、認証済みのブラウザを通じて、閲覧を許可されたページの情報を読み取れます。まず公開ページやテスト用データで、取得する項目を絞って試します。
たとえば、閲覧と自動取得が許可された記事一覧から、タイトル・URL・更新日を集める作業が考えられます。Claude Codeには取得対象と保存項目を明示し、ページ数や取得件数を照合させます。これは利用方法の例であり、特定企業の導入実績ではありません。
agent-browser evalでDOMから直接取得する
agent-browserの基本は、snapshotコマンドでページの構造（アクセシビリティツリー）をテキストで取得し、要素に振られた参照番号（@e1など）を使って操作する流れです。本文のようにまとまったテキストだけが欲しい場合は、evalコマンドでJavaScriptを実行し、DOMから必要な部分だけを取り出せます。
# 本文テキストを直接取得する例
agent-browser eval "document.querySelector('.article-body').innerText"
# 参照番号を指定してテキストを取得する例
agent-browser get text @e1例の.article-bodyは仮のセレクターなので、対象ページのDOMを確認して置き換えます。必要な本文だけを取り出せば、ページ全体を渡すよりも入力を絞れます。対象要素が存在しない場合や、内容がまだ読み込まれていない場合は、先にページ状態を確認してください。
認証が必要なページは権限と利用規約を確認する
ログイン済みプロファイルは、自分に閲覧権限があるページの操作に利用できます。ただし、ログインしていれば必ず取得できるわけではありません。追加認証、ページの描画方式、自動化の制限などで取得に失敗することがあるため、対象サイトごとに許可範囲と動作を確認します。
| 記事タイプ | ペイウォール | 取得前に確認すること |
|---|---|---|
| 有料メンバーシップ記事 | あり | 契約上の閲覧権限と自動取得の許可。成功はサイト依存 |
| 無料公開記事 | なし | 公開範囲・利用規約・取得間隔を確認 |
| ログイン必須記事 | あり | 認証の有効期限と追加認証、対象データの権限を確認 |
取得できるのは、自分のアカウントで閲覧できる範囲に限られます。取得した内容の利用は、各サービスの利用規約と著作権法の範囲内にとどめてください。自動取得や再配布を禁止しているサービスでは使わないことが前提です。
AI導入に関するお困りごとは、株式会社NexaのAI顧問がサポートします。「何から始めればいいか分からない」という段階からご相談いただけます。
実践ユースケース2 — SaaS・Webサービスの自動操作
コンテンツ収集以上に企業の業務効率化に直結するのが、SaaSや業務Webサービスの操作自動化です。多くの企業ツールはAPIを提供していますが、すべての操作に対応しているわけではなく、Webインターフェースのみで実行できる処理も多く残っています。
管理画面の申請入力を補助する
たとえば、社内申請システムで入力項目を転記し、送信直前まで準備する作業が考えられます。まず利用規約と管理者の許可を確認し、テスト用アカウントで入力欄や確認画面を点検します。この例は操作設計の説明であり、特定サービスでの成功を保証するものではありません。
agent-browserを認証済みのブラウザに接続し、入力・確認・確定を分けて指示します。送信や承認など相手側の状態を変える操作は、人の確認を挟む運用にします。実行後は対象レコードを開き直し、入力値と反映結果が一致するかを確認します。
APIで取得できるデータはAPIも検討する
ダッシュボードの数値を定期収集する場合は、最初に公式APIやエクスポート機能の有無を確認します。必要な項目が提供されていれば、画面操作に依存せず取得する設計を検討できます。APIにも認証方式、利用上限、対象データの条件があるため、各サービスの公式仕様を確認します。
ブラウザ操作は、APIがない機能だけでなく、画面表示や入力フロー自体を確かめる用途にも使えます。データ取得が目的なのか、UIの検証が目的なのかを分けて選びます。APIがあるという理由だけで、必要な操作をすべて置き換えられるとは限りません。
Google WorkspaceなどのSaaSにも応用できる
SaaS操作の自動化は、さまざまな業務ツールに応用できます。特に以下のようなシナリオでagent-browserが有効です。
- 定型フォームへの一括入力: 請求書入力・申請フォーム・CRM更新など
- ダッシュボードのデータ収集: APIが提供されていない業務システムの画面からデータを取得
- 承認フロー操作: 権限と内容を確認したうえで、人の承認前までを準備
- 設定の一括変更: 対象と変更内容を列挙し、承認後に更新・再確認
ただし、利用規約でスクレイピングや自動操作が禁止されているサービスへの適用は避け、各サービスの規約を事前に確認することが重要です。
＼ AI活用の「次の一手」を一緒に考えませんか ／
AI顧問の無料相談はこちら実践ユースケース3 — フォーム入力・UI操作の自動化
繰り返しフォームに入力する作業は、agent-browserが特に得意とするユースケースです。
基本的な操作コマンド
agent-browserで使う主要なコマンドは以下の通りです（公式READMEの記載に基づく）。@e2のような参照番号は、snapshotの出力に表示されます。CSSセレクター（"#submit"など）での指定にも対応しています。
| コマンド | 用途 |
|---|---|
agent-browser open <URL> |
ブラウザを起動して指定URLを開く（別名: goto、navigate） |
agent-browser snapshot |
ページの構造を参照番号つきのテキストで取得する |
agent-browser click @e2 |
ボタン・リンクをクリックする |
agent-browser fill @e3 "入力値" |
入力欄を空にしてから入力する（追記はtype） |
agent-browser get text @e1 |
要素のテキストを取得する |
agent-browser screenshot page.png |
現在の画面をスクリーンショットで保存する |
agent-browser eval <JavaScript> |
JavaScriptを直接実行する |
agent-browser wait <条件> |
要素の表示・文字列の出現・ページの読み込みを待つ |
agent-browser close |
ブラウザを閉じる |
すべてのコマンドを暗記する必要はありませんが、Claude Codeが実行する対象URLと操作内容は確認してください。参照番号はページ状態の変化で使えなくなることがあるため、遷移後や見つからない場合はsnapshotを取り直して対象を確かめます。
複雑なUIフローへの対応
ページ遷移が複数回発生する処理や、前のステップの結果に応じて分岐する処理も、Claude Codeに全体の手順を説明すれば、ステップに分解して順に実行します。
たとえば「Aという管理画面の一覧を開き、条件を満たす項目を抽出して、変更案を報告する。保存は承認まで実行しない」と指示します。操作対象を絞ってから変更を承認し、反映後に再読込して確認することで、誤操作や二重実行を見つけやすくなります。
エラー時のリトライ処理
ネットワークの遅延や動的ロードなど、ブラウザ操作では想定外のエラーが起こります。エラーが出たらsnapshotやスクリーンショットで状態を取り直します。同意バナーやモーダルがボタンを覆っていないか、ログイン切れがないかを確認し、原因を特定してから再試行します。
「エラー時は現在のURLと画面状態を報告し、送信済みかを確認する」と指示しておきます。申請や購入の直後にエラーが出た場合は、無条件に送信を繰り返さないことが重要です。CAPTCHAや追加ログインは人へ引き継ぎ、認証が済むまで停止させます。
ツール選択ガイド — どの自動化ツールを使うべきか
用途に応じた適切なツール選択が、自動化の成否を左右します。冒頭の早見表を、判断の順番に沿って補足します。
普段のブラウザのログイン状態で操作するなら Claude in Chrome
Googleドキュメント、Gmail、Notionなど、ログイン済みのWebアプリを操作させたい場合は、公式Chrome連携が候補です。専用のデバッグポートを設定せず、画面に表示されたブラウザで操作できます。サイトごとの権限はChrome拡張機能で管理します。対応プランと認証方式も事前に確認してください。
業務で使う場合は、操作対象だけにアクセスできる専用アカウントやブラウザプロファイルを用意することをおすすめします。Webページ内の文章をユーザーの指示と混同せず、機密データの送信や設定変更を自動で承認しない運用にします。最小権限で試し、操作後は対象ページを開き直して結果を確認します。
画面を出さない定型操作なら agent-browser
「ページを開いてテキストを取得する」「フォームの入力案を作る」といった処理をヘッドレスで行うなら、agent-browserが候補です。--confirm-actionsによる操作の承認や--allowed-domainsによる接続先制限は明示的に有効にする機能です。ただし現行READMEでは、--allowed-domainsはCDP・auto-connect・Chromeプロファイル再利用などと併用できません。安全機能は接続方式ごとの条件を確認してください。
複雑な多段階フローなら Playwright CLI
テスト自動化や、多段階のUI操作をコーディングエージェントから進める場合は、Playwright CLIが候補です。MicrosoftはCLIとスキルの組み合わせを、コンテキスト内の情報量を抑えたい場面に向くと説明しています。既定はヘッドレスで、--headedを付けると画面を表示します。購入などの検証は本番ではなくテスト環境で行います。
同じMicrosoftのPlaywright MCPは、ページ構造を見ながら繰り返し判断する探索的な自動化や、長時間の自律実行など、ブラウザの状態を保ち続ける利点がトークンのコストを上回る場面に向くと説明されています。
表示速度や通信の調査なら Chrome DevTools MCP
Chrome DevTools MCPは、Chromeの開発者ツールの機能をClaude Codeから使えるようにするMCPサーバーです。パフォーマンスの計測、通信内容の確認、コンソールメッセージの確認、Lighthouse監査など、「操作する」よりも「調べる」用途に強みがあります。基本操作向けには--slimモードもあります。Lighthouse監査ツールはパフォーマンスを対象に含めないため、性能の計測にはパフォーマンストレースを使います。
公式に対応しているのはGoogle ChromeとChrome for Testingのみです。また、ツールの利用統計の収集が既定で有効になっており、--no-usage-statisticsを付けると無効にできます。性能分析のCrUX APIへの送信は別設定で、--no-performance-cruxで無効化できます。社内で導入する前に確認しておきたい点です。
自律的な推論が必要なら Browser Use
「複数のサイトを比較する」「ページを読んで次の操作を決める」といった作業では、Browser Useも候補です。公式READMEには、ホスト型クラウド、CLI、Pythonライブラリの利用経路が案内されています。本記事の6方式以外の補足候補として、自動化したい範囲や運用環境に合わせて検討します。
このほか、Claude Code CLIには画面全体を操作するcomputer useもあります。CLI版はmacOS向けのリサーチプレビューで、Pro・Maxプランの対話セッションが対象です。ブラウザ作業では、設定済みのChrome連携が優先されます。デスクトップアプリ版とは対応環境が異なるため、条件を混同しないようにします。
選択の基本指針:
- ログイン済みのWebアプリを、画面を見ながら操作する → Claude in Chrome
- 毎日繰り返す定型的な業務操作を、画面を出さずに実行する → agent-browser
- 品質保証・テスト自動化 → Playwright CLI（探索的な操作はPlaywright MCP）
- 表示速度・通信・コンソールの調査 → Chrome DevTools MCP
- 開発中アプリのプレビューと確認 → デスクトップアプリの内蔵ブラウザ
- 複雑な情報収集・調査タスク → Browser Use
よくある質問
Q. Claude Codeでブラウザを操作するには、まず何を入れればよいですか？
Chrome連携の対応プランを契約している場合は、公式拡張機能Claude in Chrome（1.0.36以降）を追加し、/loginでサインインしてからclaude --chromeで起動します。対象はAnthropicと直接契約したPro・Max・Team・Enterpriseです。APIキーや長期トークン認証では利用できません。ヘッドレス実行が必要ならagent-browserやPlaywright CLIを検討します。
Q. 認証が必要なサイトでも動作しますか？
認証状態を再利用できますが、動作はサイトの認証方式や制限に依存します。Chrome連携は普段のブラウザのログイン状態を共有し、agent-browserは--profileなどで状態を利用します。期限切れ・追加認証・CAPTCHAがあれば人が対応し、許可された範囲に限って続きを実行します。
Q. Claude in Chromeとagent-browserはどちらを使えばよいですか？
画面を見ながらログイン済みサイトで作業するならClaude in Chrome、ヘッドレスで定型操作を組むならagent-browserが候補です。Chrome連携には対応するAnthropicプランとログインが必要です。agent-browserはApache-2.0のオープンソースですが、Claude Codeの利用条件やモデルの利用費用まで無料になるわけではありません。
Q. SeleniumやPuppeteerはもう不要ですか？
不要にはなりません。手順を固定した回帰テストや反復処理には、SeleniumやPlaywrightなどでスクリプトを作る方法もあります。Claude Codeの対話的なブラウザ操作と比較し、再現性・保守性・実行時間を確認して選びます。AIにテストコードを書かせ、動作をブラウザで確かめる組み合わせもできます。
Q. Chrome拡張機能を使っているサイトでも操作できますか？
拡張機能の種類や動作条件によります。公式Chrome連携は普段のブラウザを利用し、agent-browserは--extensionで拡張機能を読み込む設定を備えています。ただし、すべての拡張機能の動作を保証するものではありません。対象環境で表示と入力を確認し、必要なら--headedで画面を表示して検証します。
Q. 操作中にCAPTCHAが出た場合はどうすれば良いですか？
CAPTCHAが出たら自動操作を止め、人が対応します。公式Chrome連携はログインページやCAPTCHAで一時停止して手動対応を求めます。内蔵ブラウザも、人の入力なしにCAPTCHAを突破しないとされています。agent-browserでも、同じ場面では停止して人へ引き継ぐ運用にします。
Q. WindowsやWSLでも使えますか？
公式Chrome連携はWindowsで利用できますが、WSL上では非対応です。agent-browserの公式READMEはmacOS・Linux・Windows向けのバイナリを案内しています。Playwright MCP／CLIはNode.js 18以降、Chrome DevTools MCPはNode.jsのLTS版と現行安定版以降のChromeが要件です。各OSや社内ポリシーで接続条件を確認してください。
まとめ
この記事では、Claude Codeでブラウザを操作する6つの方法と、agent-browserを使った自動化の手順を説明しました。
- 本記事で比較した方式は6つ: 公式のChrome連携とデスクトップアプリの内蔵ブラウザ、外部ツールのPlaywright MCP・Playwright CLI・Chrome DevTools MCP・agent-browser
- ログイン済みサイトには公式Chrome連携が候補:
claude --chromeで起動する。対応プランと/login認証、拡張機能が必要 - agent-browserは認証済みサイトを画面を出さずに操作できる:
--profileでChromeのログイン状態を再利用し、定型操作や定期実行に組み込める - 入力量と継続的な状態把握のバランスで選ぶ: MicrosoftはCLIとスキルの効率面を案内する一方、探索的な操作ではMCPの利点も説明している
- ツール選択が重要: テスト自動化はPlaywright CLI、表示速度や通信の調査はChrome DevTools MCP、複雑な推論タスクはBrowser Useと使い分ける
まずは早見表から1つ選び、シンプルなコンテンツ取得タスクで動作を確認することからはじめてみてください。成功体験を積んだ上で、より複雑な業務フローへと展開していくのが導入方法の一例です。
AI導入に関するお困りごとをサポートします
株式会社NexaのAI顧問は、ツール選定から業務への適用、社内定着までを月額制でサポートします。特定のツールに限らず、「AIをどう使えばいいか分からない」という段階からご相談いただけます。
この記事で参照した外部情報
- Claude Code公式ドキュメント（Chrome）code.claude.com
- 同（Desktop）code.claude.com
- microsoft/playwright-mcpgithub.com
- microsoft/playwright-cligithub.com
- ChromeDevTools/chrome-devtools-mcpgithub.com
- vercel-labs/agent-browsergithub.com
- 公式READMEgithub.com
- computer usecode.claude.com
本文中でリンクしている外部ページの一覧です（自動生成）。最終確認日は本記事の最終更新日 2026-10-02 で、リンク先の内容はその後変わることがあります。
AI導入を検討中の方へ
