Webアプリを開発していて、Claudeにブラウザを操作させて動作確認やエラー確認、フォーム入力を任せたい人向け
料理ブログやWebアプリを開発していて、コードを直したあとに自分でブラウザを開いてフォーム送信やエラー確認をする往復が面倒なときに使う。起動時に「claude --chrome」と書き足すか、会話の途中で「/chrome」と打って有効にし、あとは「localhost:3000 を開いてログインフォームに不正なデータを入れて送信し、エラーが正しく出るか確認して」のように日本語でそのまま頼む
Webアプリを作っていると、コードを直したあとに必ずブラウザを開いて、ボタンを押したりフォームに入力したりして「ちゃんと動くか」を確かめます。Claude in Chrome は、その確認作業をClaude Codeから直接Chromeにやらせる仕組みです。Claudeが新しいタブを開いて、人間と同じようにクリックや文字入力をして、エラーがあれば自分でコードに戻って直すところまでつなげます。
これまで「Claudeがコードを書く → 私がブラウザで確認する → 戻って報告する」と画面を行き来していた往復が、まるごとClaudeの中で完結する感じです。
噛み砕くと
新しく入った同僚に「このページ、ログインまわりが怪しいから一回触って報告して」と頼む場面を想像してみてください。その同僚があなたのパソコンのChromeをそのまま使い、目の前で実際にタブを開いて操作し、変な挙動を見つけたらコードまで遡って直す。Claude in Chrome がやるのはこれです。
大事なのは「あなたのChromeのログイン状態をそのまま借りる」という点。だからGmailでもNotionでも、あなたが普段ログイン済みのサービスにそのまま入れます。便利な反面、ここがちょっと怖いところでもあります。後半でちゃんと触れます。
操作は目に見えるChromeのウィンドウでリアルタイムに進むので、Claudeが今どこを触っているか横で見ていられます。裏でこっそり動くわけではないです。
大事な前提：これは「Chrome か Edge」でしか動かない試験段階の機能
Claude in Chrome は現時点でベータ、つまり試験提供中の段階です。動くブラウザは Google Chrome と Microsoft Edge の2つだけ。Brave や Arc など他のChromium系ブラウザでは、見た目が似ていても動きません。WSLでも非対応です。
さらに、4つの条件を全部満たさないと使えません。順に挙げます。
- Google Chrome または Microsoft Edge を使っていること
- 「Claude in Chrome」拡張機能の v1.0.36 以上が入っていること。Chrome ウェブストアで配布されていて、両ブラウザに対応しています
- Claude Code が v2.0.73 以上であること
- Anthropic と直接契約した有料プランであること。Pro / Max / Team / Enterprise のどれかなら使えます
最後の有料プラン条件には注意点があります。Amazon Bedrock や Google Cloud Vertex AI、Microsoft Foundry といった他社サービス経由でClaudeを使っている場合は、この機能は使えません。その経由でしかClaudeを触っていない人は、別途 claude.ai のアカウントが必要になります。
「料理ブログのログインフォーム」を例に、実際の手順を見る
料理ブログを開発中で、手元のパソコンで localhost:3000 にログイン画面が表示できる状態だとします。やりたいのは「メールアドレス欄にわざと変なデータを入れて送信し、エラーメッセージがちゃんと出るか」の確認です。これを手作業でやると地味に面倒なので、Claudeに丸ごと任せます。
ステップ1: 前提がそろっているか確認する
まず Chrome（または Edge）に「Claude in Chrome」拡張機能が入っていて、Claude Code も新しいバージョンになっているかを見ます。バージョンの確認はターミナルで次の1行です。
$ claude --version表示された番号が 2.0.73 以上ならClaude Code側はOK。拡張機能のほうは Chrome の chrome://extensions の画面で有効になっているかを見ておきます。
ステップ2: ブラウザ操作を有効にしてClaude Codeを起動する
起動時に --chrome を付けて立ち上げます。これが「今回はブラウザも触っていいよ」というスイッチです。
$ claude --chromeもうClaude Codeを起動済みなら、会話の途中で /chrome と打てば同じように有効化できます。/chrome はいつでも打てて、つながっているかの確認や、つなぎ直しにも使います。
ステップ3: 日本語でそのまま頼む
難しい書き方はいりません。やってほしいことを普通の文で書きます。
localhost:3000 を開いて、ログインフォームのメールアドレス欄に
不正なデータ（@がないアドレスや空欄）を入れて送信して。
エラーメッセージが正しく表示されるか確認して、結果を教えて。ステップ4: Chromeのウィンドウが動くのを見る
すると目の前でChromeの新しいタブが開き、Claudeが localhost:3000 にアクセスします。フォームに文字を打ち込んで送信ボタンを押す動きが、リアルタイムで見えます。ここがゲームの自動プレイを眺めているみたいで、初めて見るとちょっと面白いです。
ステップ5: コンソールとDOMを読んで報告してくる
Claudeは画面の見た目だけでなく、ブラウザのコンソールに出ているエラーや、ページの内部構造であるDOMの状態まで読みます。「エラーメッセージは出ているが赤字になっていない」「@なしのアドレスを通してしまっている」といった具体的な指摘が返ってきます。問題があれば、そのままコード側を直す提案までつながります。
ステップ6: ログイン画面やCAPTCHAが出たら止まる
ここで初心者が勘違いしがちなのが「Claudeが何でも自動で突破する」という期待です。実際は逆で、本物のログイン画面やCAPTCHAにぶつかると、Claudeはいったん手を止めて「ここはあなたがやってください」と人間に渡してきます。安全のための仕様で、勝手に認証情報を入れたりはしません。
なお、触らせたくないサイトがあるときは、Chrome拡張機能の設定画面で「どのサイトを触っていいか」を個別に絞れます。ログイン状態を共有する機能なので、ここは最初に見ておくと安心です。
結局 Claude in Chrome は何ができるのか
- やってくれる: 目に見えるChromeのタブを開いてクリック・入力・送信し、コンソールのエラーやページの内部状態を読んで報告・修正する。ログイン済みのGmailやNotionなどにもそのまま入れる
- やってくれない: ログイン画面やCAPTCHAの自動突破はしない。止まって人に渡す。ブラウザの外、つまりパソコンのネイティブアプリの操作もしない。そちらは computer use の担当です
- 意味が薄い場面: ブラウザを一切使わない作業では出番がない。例えばコードの整理だけ、文章だけの作業です。むしろ常時オンにするとClaudeの記憶領域を圧迫するだけになる
使いどころ3シナリオ（具体題材で再現）
シナリオ1: 家計簿アプリの入力チェックをまとめて潰すとき
家計簿アプリを作っていて、金額欄にマイナス値や文字を入れたときの動きが不安だとします。「金額欄に -500、abc、空欄、99999999 を順に入れて送信して、それぞれどう弾かれるか報告して」と頼めば、Claudeが4パターンを連続でブラウザ上で試して結果を一覧で返してくれます。自分で4回打ち直す手間がまるごと消えます。私はこの「例外パターンの総当たり」が一番ラクになった用途だと感じています。
シナリオ2: Figmaのデザイン通りに作れているか見比べるとき
デザインカンプ、つまり完成見本をもとにUIを組んだあと、「ブラウザで開いて、ボタンの色と余白が見本とずれていないか確認して」と頼めます。Claudeが実際の表示を読み、「ボタンの上下の余白が見本より狭い」といった見た目のズレを指摘してくれます。コードと見た目を両方見られるのが効きます。
シナリオ3: ログイン済みのNotionから情報を抜いて手元に保存するとき
すでにログインしているNotionのページから、表になっている情報を整理して取り出したいとき。「このNotionページの表を読んで、商品名と価格をCSVにして保存して」のように頼めます。ログイン状態を共有するので、わざわざ連携設定を組まなくても、あなたが見えているページにそのまま触れます。ここは便利すぎて逆に怖いくらいです。
初心者が踏みやすい落とし穴
- プラン条件を他の機能と取り違える。Claude in Chrome は Pro / Max / Team / Enterprise の全有料プランで使えます。一方 computer use は Pro / Max 限定、Code Review は Team / Enterprise 限定で、3つとも条件がバラバラ。「あっちが使えたからこれも」は通じません
- Chrome と Edge 以外では動かない。Brave も Arc も他のChromium系もベータ段階では未対応。WSLも不可です。ブラウザを変えれば直る、と粘っても無駄です
- 拡張機能とバージョンが古いと "Extension not detected" で止まる。拡張は v1.0.36 以上、Claude Code は v2.0.73 以上。検出されないときは
chrome://extensionsで有効か確認し、Chromeを再起動して/chromeでつなぎ直します。初回は内部の連絡用の設定ファイルが作られる関係で、Chrome再起動が要ることがあります - ログイン状態を共有する＝触らせたくないサイトにも届く。強力な反面リスクもあるので、Chrome拡張機能の設定でサイトごとの許可を絞っておく。ログイン画面やCAPTCHAは自動突破せず止まりますが、油断は禁物です
- 「標準でオン」にすると記憶領域を食う。
/chromeから「Enabled by default」を選ぶと毎回ブラウザ操作の道具が読み込まれ、Claudeが一度に覚えていられる量を圧迫します。必要なときだけ--chromeを付けて起動するほうが軽いです - computer use と混同する。ブラウザでできることはこちら、ブラウザの外のネイティブアプリ操作は computer use。Claudeはブラウザ作業ではChromeのほうを優先します。そのほうが正確に操作できるためです
- 長時間の作業中に接続が切れる。裏で待機している部品である service worker が一定時間アイドルになると切れることがあります。
/chromeから Reconnect でつなぎ直せば復帰します - ブラウザが固まって反応しない。ページ側の警告ダイアログ、つまり alert や confirm などのポップアップが表示を止めていることがあります。手動で閉じてから続けます
書き方
claude --chromeやってみるとこうなる
入力
claude --chrome
（または起動中のセッションで）/chrome出力例
目に見えるChromeの新しいタブが開き、Claudeが指定したページにアクセスしてクリックや入力を実行。コンソールのエラーやページの内部状態を読み取り、「@なしのアドレスを通してしまっている」など具体的な指摘と修正提案を返す。ログイン画面やCAPTCHAにぶつかると自動では突破せず、人間に操作を渡して一時停止するこのページに出てきた言葉
- ベータ
- まだ開発の途中で「試しに使ってみてください」と公開されている段階。仕様が変わったり動かない場面が残っていたりする
- 拡張機能
- ブラウザに後から追加して機能を足す小さなプログラム。広告ブロックや翻訳補助などでおなじみのもの
- コンソール
- ブラウザが裏で出している動作ログやエラーが流れる画面。開発者向けの「裏のメモ」のようなもの
- DOM
- ディーオーエム。ブラウザがページをどう組み立てているかの内部の骨組み。見た目の裏にある部品の一覧表
- CAPTCHA
- キャプチャ。「私はロボットではありません」のチェックなど、人間かどうかを判定する仕組み
- computer use
- コンピュータユース。Claudeにパソコン画面そのものを操作させる別の機能。ブラウザの外のアプリを動かしたいときに使う
- MCP
- エムシーピー。Claudeに外部の道具をつなぐ共通の仕組み。Claude in Chrome も <code>claude-in-chrome</code> という名前でこの上に乗っている
- WSL
- ダブリューエスエル。Windowsの中でLinuxという別のシステムを動かすための仕組み。Claude in Chrome は非対応