Claude Code と Codex から Chrome を動かす ― Claude in Chrome と Chrome DevTools MCP の設定
AI にブラウザを操作させて、ブログの表示崩れを確かめたり、画面を見ながら作業したりできるようにしました。Claude Code と Codex では仕組みが違い、Claude Code は Chrome の拡張機能「Claude in Chrome」、Codex は Google 公式の「Chrome DevTools MCP」を使います。Mac mini での設定のしかたと、使ってみて分かったことをまとめます。
複数の AI を Orca でまとめて使っている話は、前の記事に書きました。今回はその続きです。
全体の構成
| Claude Code | Codex | |
|---|---|---|
| 使うもの | Claude in Chrome（Chrome の拡張機能） | Chrome DevTools MCP（Google 公式。拡張機能は不要） |
| つなぎ方 | 拡張機能にログインして /chrome | codex mcp add で登録 |
| 動かす Chrome | ふだん使っている Chrome | 専用の Chrome（ふだんの Chrome にもつなげる） |
MCP は、AI に外部の道具を使わせるための共通のつなぎ方です。Claude in Chrome は Claude 専用なので、Codex からは使えません。
1. Claude Code から Chrome を動かす
- Chrome ウェブストアで「Claude」（提供元は Anthropic）を探して追加する
- 拡張機能のアイコンを押し、Claude Code と同じアカウントでログインする
- Claude Code で
/chromeと入力し、有効にする（毎回自動で有効にする設定も選べる）
つながらないときは、Claude Code を claude --chrome で起動し直します。会話を続けたいときは claude --chrome --continue です。
試しに「このブログのトップページを開いて表示崩れを確認して」と頼むと、Claude が新しいタブでページを開き、画像の読み込み・横へのはみ出し・ブラウザのエラー表示を順に確かめて、結果をまとめてくれました。ログイン中だけに出る管理バーが記事の文字と重なることも見つけています。確認が終わると、使ったタブも閉じてくれます。
2. Codex から Chrome を動かす
Codex には、Google の Chrome DevTools MCP を登録します。
codex mcp add chrome-devtools -- npx -y chrome-devtools-mcp@1.12.0
--usageStatistics=false --performanceCrux=false- 版を固定：
@latestにせず、確かめた版（1.12.0）を書いておく。勝手に新しい版に変わらないようにするため --usageStatistics=false：Google への利用状況の送信を止める--performanceCrux=false：表示速度を調べるときに、開いた URL を Google の速度データ（CrUX）に問い合わせる機能を止める
Orca から起動する Codex は設定フォルダが別になるので、前の記事と同じく、Orca の専用フォルダにも CODEX_HOME=… codex mcp add … で同じものを登録しました。登録したら Codex を起動し直します。
確認として、codex exec で「このブログを開いてタイトルだけ答えて」と頼むと、専用の Chrome が開いてページのタイトルを返してきました。
3. Codex の Chrome は「専用」と「ふだん」を選べる
- 専用の Chrome（何も付けない）：Codex 用のプロファイルで別の Chrome を開く。ふだんのログイン状態やタブは見えない。専用の Chrome で一度ログインしたサイトは、次もログインしたまま
- ふだんの Chrome（
--autoConnect）：Chrome でchrome://inspect/#remote-debuggingを開いて接続を許可すると、いま使っている Chrome につながる。ログイン中のサイトや開いているタブも読めるようになる
今回は、表示の確認ができれば十分なので、専用の Chrome にしました。ログインが必要な画面を Codex に見せたくなったら、そのときだけふだんの Chrome につなぐ予定です。
4. 使うときの決まり
ブラウザを動かせるということは、ログインしているサイトで AI が操作できるということです。使うときは、次のことを守るようにしています。
- 購入・送信・投稿・削除の前は、必ず人に確認する
- パスワードの入力やログインは、人が行う
- 確認に使ったタブは、終わったら閉じる
- ネットバンクなど大事なサイトを開いたまま、ふだんの Chrome に Codex をつながない
つまずいたところ
/chrome の前に空白が入ると、ただの文になる
貼り付けたときに先頭に空白が入り、/chrome がコマンドではなく普通の文として AI に届きました。スラッシュで始まるコマンドは、行の先頭から入力します。
登録したのに、開いている会話では使えない
Claude Code でも Codex でも、道具（MCP）は起動したときに読み込まれます。登録したら、新しいウィンドウで試すか、起動し直します。
スマホの幅が確かめにくい
Claude in Chrome では、ふだんの Chrome のウィンドウの大きさを変えられず、Claude はページの中にスマホ幅の枠を作って確かめていました。この方法ではスクロールバーの分だけ幅がずれることがあるので、最後は実際のスマホで確かめるのが確実です。
まとめ
- Claude Code は拡張機能「Claude in Chrome」で、ふだんの Chrome を動かせる
- Codex は Google 公式の Chrome DevTools MCP を登録すると、Chrome を動かせる
- Codex は専用の Chrome から始め、必要なときだけ
--autoConnectでふだんの Chrome につなぐ - Orca から使う Codex は、Orca の専用フォルダにも登録する
- 購入・送信・投稿・削除の前は、必ず人が確認する