Claude Codeにブラウザを触らせると、APIキーなしで動かせる範囲が一気に広がります。画像生成が月額の中で終わるのはその一例で、本質は「人が手でできることは、そのまま全部できる」ことのほうです。
つなぎ方は4つあり、それぞれ何と何をつないでいるのかが違います。ここを知らずに1つだけ試して詰まると、原因が分からないまま半日が消えます。
AIに何かを自動でやらせようとすると、まずAPIキーを探しに行くと思います。そして2つの壁にぶつかります。ひとつは料金。画像生成のように1回が重い処理は、試し刷りを繰り返すだけで請求が積み上がります。
もうひとつは、そもそもAPIが用意されていないこと。世の中のサービスの大半は、外から叩ける入口を公開していません。
ブラウザにつなぐという手は、この2つを同時に外します。すでに払っている月額のアカウントを、人の代わりに操作するだけだからです。
まず結論：4つのつなぎ方と、その正体
- ①Claude in Chrome ― Chrome拡張機能を通して画面を触る。ポート不要／Claude Codeの常駐は要る／まず1回動かすのに向く
- ②Chrome DevTools MCP ― MCPサーバーがCDPを喋る。ポート要る／常駐は要る／他のツールと混ぜるのに向く
- ③CDP直結 ― 自分のコードが直接CDPを喋る。ポート要る／常駐は要る／量を回す・本番向き
- ④Playwright ― 独立したブラウザ自動化。ポート不要／Claude Codeの常駐は要らない／定期実行・組み込み向き
先に一番大事なところを言うと、②と③は同じものを喋っています。CDP（Chrome DevTools Protocol）というChromeの操作用の口が1つあって、②はそれをMCPサーバーというラッパー越しに使い、③はラッパーを外して直接話しかけます。
別々の技術に見えて、下の層は同じもの。
この構造を知っているかどうかで、詰まったときの動き方が変わります。②が繋がらない状況でも、③なら普通に動きます。
なぜブラウザにつなぐのか
理由1：APIキーを持つと、使った分だけ請求が積み上がる
APIキーは便利ですが、動かした回数がそのまま金額になります。文章の生成なら数円で済むところも、画像は1枚が重い。試し刷りを10枚、20枚と回して、月末に金額を見て手が止まる。これはよくある話です。
これは私の感覚ではなく、OpenAIの料金ページの建て付けそのものです。APIの画像生成は「出力した画像トークンの量」に応じた従量課金で、1枚あたりいくらになるかは専用の計算ツールで見積もってください、という書き方になっています。
つまり、自分で枚数を数えていない限り、金額は請求が来るまで見えません。
（出典: OpenAI API Pricing ページ。画像生成の見積もりは image generation guide の calculator を使うよう案内されています）
ブラウザ経由なら、課金の入口はすでに払っている月額だけです。人が手でChatGPTに「この画像を作って」と打ち込むのと同じ扱いなので、追加の請求そのものが発生しません。
理由2：APIが無いサービスは、そもそも連携できない
これがもっと効きます。APIを公開しているサービスは、世の中のごく一部です。日常的に使っている管理画面や社内ツールに、外から叩ける入口が用意されていることのほうが珍しい。
ブラウザ経由なら、この制約が消えます。画面が表示されていて、人がマウスとキーボードで操作できるなら、それはそのまま自動化の対象になります。
人が手でできることは、そのまま全部できます。
逆に言うと、人が手でできないことはできません。
この1行が、ブラウザ接続でできることの境界線です。画像生成はその代表例にすぎません。SNSへの投稿も、管理画面への入力も、画面の前に座って手で押している操作なら、同じ土俵に乗ります。
何ができるかを考えるときは、「自分がその画面の前に座って、10分あれば終わる作業か」を基準にすると外しません。
⚠ ただし、操作する先のサービスの規約は必ずご自身で確認してください。自動的なアクセスを禁止しているサービスや、公式のAPIを使うよう案内しているサービスがあります。技術的にできることと、やっていいことは別です。**自己責任でお願いします。
**この記事では、私が自分のアカウントで自分の作業を代わりにやらせている範囲だけを扱います。
理由3：つなぎ方を間違えると、エラーが出ないまま半日溶ける
そして、ここが本題です。
この手の詰まり方には特徴があって、エラーメッセージが出ません。動いているように見えて何も起きない、あるいは無言で終了コードだけ返ってくる。だから原因に辿り着けず、環境のせいだと思って調べ直し、半日が消えます。
私が実際に踏んだものは後半に全部書きます。先に4つの中身から見てください。
①Claude in Chrome ― 拡張機能。まず1回動かすならこれ
Chrome拡張機能を入れるだけで、Claude Codeからブラウザの画面を触れるようになります。
ポートの設定も、専用プロファイルの用意も要りません。セットアップは拡張機能を入れるだけです。Claude Codeから拡張機能に話しかけ、拡張機能がタブを操作します。
会社の端末でChromeの起動オプションを触りたくない、デバッグ用のポートを開けたくない、という事情がある人にとっては、これが唯一の入口です。
※ Claude Codeのターミナルで「いま開いているタブを読んで、要点を3行で教えて」と送ったところ。開いていたのはChatGPTのホーム画面で、拡張機能が呼ばれてから9秒ほどで、画面の要点が3行で返ってきました。
※ 続けて「chatgpt.comを新しいタブで開いて、画像を1枚作って」と送ったところ。拡張機能を何度も呼びながら、プロンプトの入力、送信、生成待ちを進めています。途中で送信されずに入れ直しているのも、そのままの記録です。
※ その結果のChrome側の画面。画面下の「Claude is active in this tab group」が、拡張機能がこのタブを動かしている印です。
正直に書くと、私はこれを日常では使っていません。②③より遅いからです。1回の操作ごとに、拡張機能が画面を読み取って返す往復が挟まります。「このタブを読んで」と送ってから中身が返るまでで10秒ほど、画像を1枚作らせると40〜50秒ほどかかります。
ただ「遅いから使っていない」だけで、動かないわけではありません。1日に数枚しか作らない、1日に数回しか操作しない、という使い方なら、この遅さは体感でほとんど問題になりません。
接続の面倒さと速度を交換していると考えると、位置づけが分かりやすいと思います。
②Chrome DevTools MCP ― ツールとして扱える。ただし繋がらない時がある
Claude CodeにChrome DevToolsのMCPサーバーを登録して、ブラウザ操作を「ツール」として呼ぶやり方です。
※ Chrome DevToolsのMCPだけを使って、デバッグ用のChromeでChatGPTを開き、①と同じ指示で画像を1枚作らせたところ。画像が出るまで30秒ほどで、①より速いです。
普段使いとは別のプロファイルなので、ブックマークも拡張機能も入っていません。
素直で、他の作業と混ぜやすいのが利点です。ページを開く、要素をクリックする、スクリーンショットを撮る、といった操作がそれぞれツールとして並ぶので、Claude Codeが自分で判断して使い分けてくれます。
問題は接続のタイミングです。Chrome DevToolsのMCPは、Claude Codeの起動時にChromeへ接続しにいきます。つまり、Claude Codeを立ち上げた後にデバッグ用のChromeを起動しても、MCP側はもう繋がりません。
この状態で「MCPが繋がらない」と悩むと詰みます。Claude Codeを再起動すれば繋がりますが、作業中のセッションを捨てることになります。私はここで何度か時間を溶かしました。
そして、この状況の逃げ道が次の③です。
③CDP直結 ― 本番で毎日回しているのはこれ
MCPを介さず、Chromeのリモートデバッグポートへ直接話しかけます。
※ 専用Chromeのデバッグポートに1回問い合わせると、このようにChromeのバージョンとWebSocketの口が返ってきます。これが返れば繋がっています。
やっていることは②と同じです。同じCDPを喋り、同じChromeを操作します。違うのはラッパーを外していることだけ。そのぶん、②の制約から自由です。
- Claude Codeの起動タイミングに縛られない。セッションの途中でChromeを立ち上げても、その場から繋がる
- Claude Codeの再起動が要らない
- 自分のスクリプトの中に組み込める。繰り返しの処理も、途中から再開する仕組みも自分で書ける
速さも数字で持っています。ChatGPTに画像を作らせる場合、1枚あたり47〜62秒。6枚を順に回すと6分20秒、2本並列にすると2分55秒（2026年8月の実測）。1枚の生成時間は並列にしても落ちないので、並列にしたぶんだけ素直に縮む計算です。
量を回すならこれ一択です。私は「やりたいことの一覧」を1つのファイルに書いて渡し、まだ終わっていないものだけを拾って続きから走らせる形にしています。途中で止めても、もう一度走らせれば続きから。
何十件も処理する作業だと、これがあるのと無いのとでは復旧の手間が桁で変わります。
※ この記事の画像3枚を、CDP直結で一括生成したときの実際のログです。1枚ごとに新規チャットへ移って、生成→保存が流れています。
実際の使い分けは、普段は②で書いて、詰まった日だけ③に落ちる。下の層が同じなので、乗り換えのコストがほとんどかかりません。
④Playwright ― Claude Codeがいなくても動く
ここだけ毛色が違います。Claude Codeを介さず、スクリプト単体でブラウザを動かす道です。
※ Claude Codeを開かず、PowerShellからスクリプトを1本走らせただけのログです。ログイン済みのプロファイルを流用して、この記事の下書きを5秒ほどで開き、見出しと画像の数を読み取っています。
Playwright（および派生のPatchright）でブラウザを起動し、ログイン済みの状態を流用して画面を操作します。①〜③と違って、Claude Codeが常駐していなくても動きます。
定期実行したい、他のツールに組み込みたい、サーバーの上で回したい ―― そういう要件ならこれになります。
そのかわり、画面の構造が変わるたびに自分で直す責任も自分に来ます。サービス側の画面は平気で変わります。動かなくなったときに自分で直せる人向けです。
①〜③が「AIに操作させる」なのに対し、④は「自分で操作を書く」。ここが分かれ目です。
実際に詰まった5カ所
4つとも試した中で、エラーが出ないまま時間だけ溶けたところを挙げます。どれも、知ってさえいれば1分で片づきました。
1. 普段使いのChromeを指定すると、デバッグ接続が拒否される
最近のChromeは、普段使っているプロファイルをデバッグ用に指定すると接続を受け付けません。加えて、自動操作の途中で自分がタブを触ると両方が壊れます。専用のプロファイルを別に用意するのが、結局いちばん速い道です。
2. プロファイルのフォルダ名に空白を入れると、別のChromeを掴む
フォルダ名に空白があると、起動オプションの値がそこで分割されます。すると狙ったプロファイルではない別のChromeが立ち上がり、余った文字列がURLとして開かれます。症状は「ポートが応答しない」。原因が名前だとは思わないので、ここは長く溶けます。
3. 専用のChromeは、途中で落ちる
落ちた状態で処理を回すと、全部が0秒で空振りして、終了コードは0で返ってきます。成功したように見えるのに、何もできていない。処理に入る前に接続が生きているか1回確認する、を癖にしてください。
4. ウィンドウを最小化すると、急に遅くなる
Chromeは、見えていないウィンドウの処理を自動で節電します。裏で回しているつもりが、最小化した瞬間に激遅になる。私の環境では、画像1枚に30分以上かかっていたものが、節電を切ったら59秒になりました。
起動オプションで節電を切っておけば解決しますが、Chromeを立ち上げ直さないと効きません。動いているChromeに後から足すことはできません。
5. 同時に走らせすぎると、まとめて止まる
速くしようとして並列数を増やすと、サービス側から「リクエストが多すぎます」と返ってきて全部止まります。私はこれで、アカウントを一時的に制限されました。
2本までは素直に速くなりますが（実測で約2.2倍）、3本以上に増やすと、速くなるどころかゼロになります。
人が手でやる速度を大きく超えない、を目安にしてください。ブラウザ経由の自動化は、人の代わりに操作しているだけです。人が絶対にやらない速さで動かせば、当然そう扱われます。
結局どれを選ぶか
判断はこの順で降りていくと、まず外しません。
- 端末のポートを開けられない、Chromeの起動オプションを触れない → ①Claude in Chrome
- Claude Codeが動いていない時にも実行したい（定期実行・サーバー上）。壊れたら自分で直せる → ④Playwright
- 量を回す。途中で止まっても続きから再開したい → ③CDP直結
- 上のどれでもない → ②Chrome DevTools MCP
ほとんどの人は最初4に着地します。そして量が増えてきたら3に移る、というのが自然な流れです。
今日はこれだけやってみてください
ここまで読んで「自分の環境で動くのか」が分からないままだと、結局何も変わりません。5分で終わる確認だけ先にやってしまうのがおすすめです。
① Chrome拡張機能「Claude in Chrome」を入れる
インストールするだけです。ポートも設定も要りません。
>
② 適当なページを開いて、Claude Codeに「このタブを読んで」と1行送る
>
③ 中身が返ってきたら、もう繋がっています
ここまで来たら、あとは何をやらせるかだけの話です。画面が見えていて、人が手で操作できることなら、同じ仕組みで動きます。
そのうえで「もっと量を回したい」となったら、②③に進んでください。①で一度動かしておくと、②③で詰まったときに「繋ぎ方の問題なのか、やらせ方の問題なのか」が切り分けられるようになります。これが地味に効きます。
よくある質問
Q. APIキーは本当に一切要りませんか。
ブラウザ経由で動かす限りは要りません。すでに払っているアカウントを使うためです。APIキーが必要になるのは、他の人に配るツールを作るときです。その場合は自分の枠を他人に使わせないよう、利用者ごとにキーを持ってもらいます。
Q. ②と③は、結局どちらを覚えればいいですか。
両方です。下の層が同じなので、覚えるコストは2倍にならない。使い方としては、②で書いて、②が繋がらない場面だけ③に落ちる。②だけ知っていると、繋がらない日に手が止まったままになる。
Q. リモートデバッグポートを開けるのは危なくないですか。
接続を受けるのはその端末の中だけです。ただしChromeが動いている間は、同じ端末の中からは触れる状態になります。作業が終わったら専用のChromeを落とす運用にしておけば十分です。ポート自体を開けたくないなら、拡張機能を使う①を選びます。
Q. どのサービスでも動きますか。
技術的には、ブラウザで表示できてログインできるなら動きます。ただしサービス側の規約で自動的なアクセスが禁止されていることがあります。必ずご自身で確認してください。公式のAPIが用意されているサービスは、そちらを使うほうが安全で、たいてい速いです。
Q. 画面の作りが変わったら壊れますか。
①〜③は、画面を見て判断させるぶん、多少の変更には耐えます。④は自分で書いた手順どおりに動くので、変わればその場で止まります。壊れたときに自分で直す前提かどうかで選んでください。
おわりに
ブラウザにつなぐ、と一言で言っても、実際には何と何をつないでいるかが4通りある、という話でした。
- ①拡張機能を通す ―― いちばん手前。まず1回動かす
- ②MCPサーバーを通す ―― ツールとして扱える。起動タイミングに縛られる
- ③CDPに直接話しかける ―― 本番向き。量を回すならここ
- ④独立して動かす ―― Claude Codeがいなくても動く
そして全部に共通するのが、人が手でできることは、そのまま全部できるという原理です。何に使うかは、たぶんこの記事を読みながらもう思い浮かんでいると思います。
画像生成に絞った実例（ChatGPTを繋いで回す手順と、実際に詰まった4カ所）は、別の記事に分けています。画像を押すと開きます。
こういう「調べても整理された情報が出てこない」ところを、実際に手を動かしながら教えるスクールもやっています。Claude Codeを仕事で使えるところまで持っていきたい方は、こちらをご覧ください。
