Claude Codeのブラウザ操作｜Chrome連携・Playwrightの設定と安全面

「Claude Codeにブラウザを操作させたい」と考えても、拡張機能を入れるのか、MCPサーバーを足すのか、どれが自分の用途に合うのか迷うところです。「ログインしたままのブラウザを動かして、本当に大丈夫なのか」と不安になる方もいるでしょう。

Claude Codeは、ブラウザでページを開く、クリックする、入力する、画面やコンソールのエラーを読むといった操作を、プログラムを書く作業と一続きで進められます。ただし、方法ごとにログイン状態を引き継ぐかどうかが違い、そこが安全面の分かれ目になります。

この記事では、方法の違いと選び方を最初に整理したうえで、Claude in ChromeとPlaywright MCPの設定手順、頼み方の例、ログイン済みのブラウザを任せるときの注意点、動かないときの対処までを解説します。内容は2026年10月時点の公式ドキュメントをもとにしています。更新が早い機能なので、設定の前には公式ページもあわせて確認してください。

ブラウザを操作させる4つの方法

Claude Codeからブラウザを扱う方法は、大きく4つあります。公式ドキュメントでは、Claudeが作業に使う道具を選ぶ順番として、専用のMCPサーバー、シェルコマンド、Claude in Chrome、コンピューター操作の順に、より狭く正確なものを先に使うと説明されています。

迷ったときの選び方は次のとおりです。

• ログイン済みのサービスを操作したい：Claude in Chrome
• 自分が作っている画面を確認したい：Desktopのブラウザ画面か、Playwright MCP
• ログイン情報を渡したくない：Desktopのブラウザ画面か、Playwright MCPに--isolatedを付ける
• ブラウザの外のアプリを動かしたい：コンピューター操作（研究プレビューの機能）

この記事では、使う人の多いClaude in ChromeとPlaywright MCPを中心に説明します。Desktopのブラウザ画面は、Claude Codeが開発用サーバーを起動し、できあがった画面をアプリの中のブラウザで確認する機能です。公式ドキュメントでは、スクリーンショットの撮影、画面の構造（DOM）の確認、クリックやフォーム入力まで、Claudeが自分で行うと説明されています。

Claude in Chromeで操作する

Claude in Chromeは、ブラウザに入れる拡張機能です。Claude Codeとつなぐと、Claudeがブラウザに新しいタブを開き、ふだん使っているブラウザのログイン状態を引き継いで操作します。操作は画面に見える形で進み、ログイン画面やCAPTCHA（人間かどうかを確かめる画面）が出ると、Claudeは止まって手動での対応を求めます。

使うための条件

次の場合は使えません。APIキーやclaude setup-tokenで作った長期トークンで認証している場合、Amazon Bedrock・Google Cloud・Microsoft Foundryなど外部のサービス経由でClaudeを使っている場合です。外部サービス経由のみの場合は、別途claude.aiのアカウントが必要と公式に書かれています。

設定の手順

1. 拡張機能を入れるChromeウェブストアで「Claude」の拡張機能を追加し、claude.aiのアカウントでサインインします。Claude Codeと同じアカウント・同じ組織にします。
2. Claude Codeを起動するターミナルでclaude --chromeを実行します。初回は、連携の説明と、サイトごとの許可の仕組みを示すダイアログが出るので、Enterで進みます。
3. つながっているか確認するClaude Codeで/chromeを実行し、「Status: Enabled」「Extension: Installed」と表示されていれば接続できています。
4. 依頼してみるたとえば「code.claude.com/docsを開き、検索ボックスに『hooks』と入力して、表示された結果を教えて」と頼みます。許可を求められたら、内容を見て承認します。

初めて連携を有効にすると、Claude Codeがブラウザとつなぐための設定ファイルを作ります。ブラウザはこれを起動時に読むので、拡張機能が検出されないときは、一度Chromeを再起動してください。拡張機能が未導入のまま依頼した場合は、Claude Codeが「Claude wants to use your browser」という案内を出し、導入の手順を案内します。

毎回のオプションを省く設定

/chromeを開いて「Enabled by default」を選ぶと、--chromeを付けなくても毎回つながります。VS Codeの拡張機能とも同じ設定を共有します。VS Codeでは、入力欄に@browserと書いても接続できます。

Playwright MCPで操作する

Playwright MCPは、Microsoftが公開しているブラウザ操作用のMCPサーバーです。MCPは、Claude Codeが外部の道具とつながるための共通の仕組みです。Claude in Chromeと違って拡張機能もAnthropicのアカウント契約も不要で、自分のパソコンの中で動きます。

追加するコマンド

動かすには、Node.js 18以降が必要です。ターミナルで次のコマンドを実行します。

claude mcp add playwright -- npx -y @playwright/mcp@latest

--より後ろが、サーバーを起動するコマンドです。追加後は、Claude Codeで/mcpを実行すると、つながっているかを確認できます。サーバーの追加と管理の基本は、「Claude CodeのMCP」の記事で解説しています。

プロファイルの扱い

Playwright MCPが使うブラウザには「プロファイル」（ログイン状態や設定の保存場所）があります。READMEでは、次のように説明されています。

これらのオプションは、追加コマンドのnpx -y @playwright/mcp@latestの後ろに付けます。ログイン不要のサイトの確認が中心なら、--isolatedを付けて、状態を残さない形で始めるのがおすすめです。

ブラウザ操作でできること

次の表は、Claude in Chromeの公式ドキュメントに載っている例です。Playwright MCPでも、ページの操作や、画面の構造の読み取りはできます。ただし、GIFの記録やファイルのアップロードなど、同じ機能がそろっているかは、サーバーごとの説明で確かめてください。

コンソールのエラーを調べるときは、「どんなメッセージを探すか」を伝えるのがコツです。公式ドキュメントも、ログは長くなりやすいので、全部ではなく見たいパターンを指定するよう勧めています。

ファイルのアップロードで知っておくこと

Claude Code v2.1.211以降では、手元のファイルをページの入力欄に添付できます。公式ドキュメントに書かれている制限は次のとおりです。

• 1回のアップロードは、合計10MBまで
• Claudeが読む権限のないファイルは、アップロードもできない（Readを拒否する設定は、アップロードも止める）
• 名前や置き場所が認証情報用のもの（.env、.pem・.keyのファイル、.sshの下など）は、Claudeが添付を拒否する（v2.1.293以降）

向いていない使い方

ブラウザ操作は便利ですが、確認の手間をなくすものではありません。次のような使い方は、避けるか、必ず人が確認してください。

• 送信・購入・削除など、取り消せない操作を、確認なしで任せる
• 取引先や社員の個人情報が並ぶ画面を、まとめて処理させる
• 会計・給与など、金額の間違いが許されない処理を、結果を見ずに回す

安全に使うための注意

ここが、この記事でいちばん大切な部分です。Claude in Chromeはログイン済みのブラウザをそのまま操作できるため、便利な反面、扱いを間違えると影響が大きくなります。

何が危ないのか

公式のヘルプは、ブラウザを使うAIの最大のリスクを「プロンプトインジェクション」としています。これは、Webページの中に、AIへの命令を悪意をもって仕込んでおく手口です。Claudeがそのページを読むと、あなたの意図とは違う操作をしてしまうおそれがあります。Anthropicは分類器（内容を判定する仕組み）で防ごうとしていますが、ヘルプには「リスクはゼロではない」と書かれています。

もうひとつは、画面に映った内容そのものです。ヘルプでは、Claudeはアクティブなタブの画面を撮影し、見えている機密情報だけを除くことはできないと説明されています。

公式が避けるよう案内している使い方

ヘルプでは、次の用途でClaude in Chromeを使うことを避けるよう案内しています。

• 金融口座や投資の管理
• 法的な文書や契約書の扱い
• 医療・健康に関する情報の処理
• 機密性の高い社内情報が入った業務アカウントの操作
• 他人の個人情報が載ったサイトの操作

なお、成人向けサイトや違法コピーのサイトには、Claudeはアクセスできません。金融系のサイトでは、アクセス前にClaudeが許可を求めます。

認証情報・個人情報を守る具体的な対策

次の対策を、導入の最初に決めておくことをおすすめします。

1. 作業専用のブラウザ環境を用意するヘルプは、銀行・医療・行政のアカウントにアクセスできない、別のブラウザプロファイルを使うよう勧めています。拡張機能は、その専用プロファイルだけに入れ、必要なサービスだけにログインします。
2. パスワード・APIキー・カード番号を、依頼文に書かないログイン画面で止まったら、画面上で自分で入力します。公式ドキュメントでも、ログインやCAPTCHAはClaudeが止まって人に任せる動きになっています。
3. 許可のダイアログは、中身を読んで承認する確認の画面には、そのサイトでの操作をセッションの間すべて許可する選択肢があります。初めて開くサイトや、信頼できないサイトでは選ばないでください。
4. 個人情報が映る画面を、開いたままにしない顧客名簿や給与の画面など、見えているだけで困るタブは、作業の前に閉じます。
5. 最初は、信頼できるサイトと簡単な作業から始めるヘルプも、信頼できるサイトから始め、見慣れないサイトやユーザーが書き込める投稿ページは避けるよう案内しています。
6. 不自然な動きがあれば、すぐ止める関係のない話をする、機密情報の入力を求めてくるなどは、インジェクションのサインかもしれません。そこで作業を止め、内容を確認します。
7. GIFの記録は、共有前に見直す公式ドキュメントでは、記録にはログイン中のページのアカウント情報も映ると注意されています。社外へ出す前に、映り込みを確認してください。

設定面の安全装置

うまくいかないとき

つながらない、途中で止まるといったときの原因と対処を、公式ドキュメントの内容にもとづいて整理します。

複数の組織に所属している場合は、/statusで「Organization」の行を見て、拡張機能のサインイン先をそれに合わせます。なお、拡張機能からログアウトすると、そこに保存したショートカットや定期実行の設定が消えると公式に注意されています。ログアウトする前に、ほかの対処を試してください。

よくある質問

まとめ

ブラウザ操作は、画面の確認や入力作業を省力化できる一方で、権限と画面に映る情報の扱いを決めないと、思わぬ形で情報が外に出るおそれがあります。まずは信頼できるサイトの簡単な作業から試し、任せる範囲を少しずつ広げてください。

社内で使うときは、どのブラウザ・どのアカウントで動かすか、どの操作を人が確認するかといったルール作りも必要になります。INTERCREATE JAPANでは、Claude Codeの導入から、社内で安全に使い続けるための設定とルールづくりまでをお手伝いしています。