chromeflow

Chromeflow

AI コーディングエージェント（Claude Code または Codex CLI）に実際の Chrome を操作させましょう。クリック、フォーム入力、API キーの取得、.env への書き込みができます。

インストール · ツール · ウェブサイト · セキュリティ

---

問題点：Playwright、Browser Use、Puppeteer は起動するたびに新しい空のブラウザーを立ち上げます。Cookie もセッションもなく、2FA にも対応できません。そのため、AI エージェントは最初のログイン画面で行き詰まります。

Chromeflow：実際に使っている Chrome を操作します。Stripe、AWS、Supabase、Canvas、GitHub などにすでにログインした状態で使えます。エージェントが自動化できる操作（クリック、入力、アップロード、キーの取得）は自動化し、ユーザーの対応が必要な操作（パスワード、2FA、支払い）では一時停止します。MCP サーバー 1 つにブラウザーツール 30 個を備え、Claude Code と Codex CLI の両方で動作します。

実運用で検証済み：一般公開前に、実際のエージェントによるブラウザー操作を400 時間以上行って改良しました。React のセレクトボックス、isTrusted によって制限されるフォーム、Shadow DOM 内のクリック、ページの CSP による fetch の制限、通知されないリダイレクト、Cookie の漏洩、0×0 の非表示要素など、厄介なエッジケースすべてに対応するエラー処理の手順を用意しています。週末のハッカソンで作ったプロジェクトではありません。

Chromeflow を選ぶ理由

既存のブラウザー自動化ツール（Playwright、Browser Use、Puppeteer）は、新しい空のブラウザーを起動します。Cookie もセッションも拡張機能もありません。起動するたびにすべてのサービスからログアウトした状態になり、2FA にも対応できません。

Chromeflow は、Stripe、AWS、Supabase などにすでにログインしている実際の Chrome ブラウザーで動作します。Claude が自動化できる操作（ボタンのクリック、フォームへの入力、ファイルのアップロード）は自動化し、ユーザーの対応が必要な操作（パスワード、2FA、支払い情報）では一時停止します。

	Chromeflow	Playwright / Browser Use
ブラウザー	実際の Chrome（セッションを維持）	新しいインスタンス。すべてログアウトした状態
認証 / 2FA	対応済み。必要な場合は一時停止	対応不可。完全にブロック
ページの理解	DOM クエリ（高速、低コスト、信頼性が高い）	スクリーンショット＋ビジョンモデル（低速、高コスト）
人間の関与	ハイライト表示し、機密情報の入力時に一時停止	完全自動で、ユーザーとのやり取りなし
連携	Claude Code と Codex CLI 向けの MCP サーバー	単独で動作し、エージェントを認識しない
認証情報の取得	API キーを読み取り、.env に書き込み	この用途向けに設計されていない

検証済みのプラットフォーム 🟢

各リリース前に、稼働中のプラットフォームでエンドツーエンドのテストを実施しています。手順は tests/antibot/platforms/ にあり、chromeflow.run/validated の検証済みプラットフォーム一覧は、各実行時に tests/antibot/last-run.json から自動更新されます。

プラットフォーム	検証内容	ステータス
Reddit の投稿エディターの展開	CDP でクリックすると faceplate-* の投稿エディターが展開されます（PointerEvent の isPrimary=true）	🟢 動作確認済み（2026-05-25）
Reddit のコメント入力	type_text で Lexical に複数段落のテキストが入力され、<p> 構造が保持されます	🟢 動作確認済み（2026-05-25）
X / Twitter の投稿入力	type_text で isTrusted=true の CDP キー入力が Lexical に反映されます	🟢 動作確認済み（2026-05-25）
LinkedIn のフィード投稿エディター	click_element("Start a post") + Quill エディターへの type_text	🟢 動作確認済み（2026-05-25）
Facebook のフィード投稿エディター	投稿エディターのトリガーをクリック + Lexical モーダルへの type_text	🟢 動作確認済み（2026-05-25）
Instagram の React 入力欄	React 対応のネイティブ値セッター経由の fill_input	🟢 動作確認済み（2026-05-25）
Radix のポータルダイアログ	click_element(in_dialog=true) で開いているダイアログだけを一意に対象とします	🟢 動作確認済み（2026-05-25）
クローズド Shadow DOM	find_text は chrome.dom API 経由で Stencil のクローズド Shadow Root を探索します	🟢 動作確認済み（2026-05-25）
TipTap / ProseMirror	type_text で contenteditable に入力され、入力が無言で失敗した場合は自動復旧します	🟢 動作確認済み（2026-05-25）

送信時の引き継ぎ（設計上の仕様）。 Reddit、X、LinkedIn、Facebook、Instagram はすべて、ボット対策の一環として、実際に人間が行った isTrusted のジェスチャーがないと送信ボタンを有効にしません。Chromeflow は入力の処理（エージェントが実際に必要とする処理）を行い、その後 highlight_region + wait_for_click を使って、ユーザー自身が送信ボタンをクリックできるようにします。

これが大きな優位性となる理由。 Playwright、Puppeteer、browser-use、crawl4ai はいずれも、ログアウト状態の新しいブラウザーを起動します。これらはユーザーのセッションを参照できず、各プラットフォームの isTrusted を厳格に確認するチェックでは、標準の CDP クリックが拒否されます。Chromeflow は、ユーザーが実際にログインしている Chrome 上で、人間らしいベジェ曲線と PointerEvent isPrimary=true のクリックシーケンスを実行します。上記の検証済みプラットフォーム一覧で、実際に何ができるかをご確認ください。比較の詳細は /validated をご覧ください。

仕組み

Chromeflow は連携して動作する次の 2 つの要素で構成されています。

• MCP サーバー — コーディングエージェント（Claude Code または Codex）に、ブラウザーツール一式（open_page、click_element、fill_form、set_file_input、get_page_text、write_to_env など）を提供します
• Chrome 拡張機能 — それらのコマンドを受け取り、アクティブなタブを操作します（ハイライト表示、クリック、入力、ファイルのアップロード、スクリーンショットの撮影）

操作の流れは Claude が進めます。ログイン、パスワード、支払い情報、個人的な選択など、実際にユーザー自身の対応が必要な場合にのみ、ブラウザーを操作します。

セットアップ

Claude Code

1. プラグインをインストールします（マシン全体で一度だけ）：

/plugin marketplace add https://github.com/NeoDrew/chromeflow.git
/plugin install chromeflow

Claude Code 内でこれらを実行します。プラグインは MCP サーバーを登録し、Chromeflow のツールを事前承認し、使い方のスキルを提供します。プロジェクトごとのセットアップは不要です。

2. Chrome 拡張機能をインストールします（一度だけ）：

chromewebstore.google.com/detail/chromeflow/lkdchdgkbkodliefobkkhiegjdiidime — Add to Chrome をクリックします。

拡張機能は Chrome を再起動しても保持されます。これは一度だけ行えば完了です。

3. Claude Code を再起動します。

以上です。ブラウザー操作が必要なタスクでは、どのプロジェクトでも Claude が自動的に Chromeflow を使用します。プラグインの SessionStart フックは、初回実行時に、以前の npx chromeflow setup ベースのインストールで残った古い設定もクリーンアップします。

Codex CLI

1. プラグインをインストールします（マシン全体で一度だけ）：

codex plugin marketplace add https://github.com/NeoDrew/chromeflow.git

次に、Codex 内で以下を実行します。

/plugins install chromeflow

プラグインは MCP サーバーを登録し、Claude Code が使用するものと同じ使い方のスキルを Codex 向けに調整して提供します。

2. Chrome 拡張機能をインストールします（一度だけ）— 上記と同じ Web Store のリンクを使用します。拡張機能はホストに依存せず、1 回のインストールで Claude Code と Codex の両方に対応します。

3. Codex を再起動します。

Codex は、Claude Code と同じように、ブラウザー操作が必要なタスクで Chromeflow を使用します。

使い方

いつものように Claude に依頼するだけです。

「このプロジェクト用に Stripe を設定してください。月額と年額の料金で商品を作成し、価格 ID を .env に保存してください」

「Supabase にアクセスして、プロジェクトの anon key と service role key を取得してください」

「このアプリ用に SendGrid の Webhook を設定するのを手伝ってください」

Claude はページを移動し、手順を強調表示し、可能な操作をクリックします。機密性の高い操作では一時停止し、値を .env に自動で書き込みます。

Claude ができること

機能	ツール
ページを移動し、新しいタブを開く	open_page、list_tabs、switch_to_tab
ボタンやリンクをクリックする	click_element（重複がある場合は nth を指定）
単一のフィールドに入力する	fill_input（重複がある場合は nth を指定）
1 回の呼び出しで複数のフィールドに入力する	fill_form
ファイルをアップロードする（非表示の入力欄にも対応）	set_file_input
ページの内容をテキストとして読み取る	get_page_text（selector で範囲を指定）
すべてのフォームフィールドを確認する	get_form_fields
既知の要素までスクロールする	scroll_to_element
ユーザー向けに要素を強調表示する	highlight_region
ユーザーのクリックを待つ	wait_for_click
非同期の変更を待つ	wait_for
任意の JS を実行する	execute_script
ブラウザーのコンソール出力を読み取る	get_console_logs
認証情報を .env に保存する	get_page_text、write_to_env
スクリーンショット（デフォルトでは Claude のみ。共有するには copy_to_clipboard / save_to を指定）	take_screenshot
ターミナルウィンドウのスクリーンショットを撮る	capture_terminal

ファイルのアップロード

set_file_input は Chrome DevTools Protocol を使用して、ブラウザーによるファイル入力のスクリプト制限を回避します。これは Playwright や Puppeteer が使用するものと同じ仕組みです。<input type=file> がカスタムのドラッグ＆ドロップ領域の背後に隠れていても動作します。

set_file_input("Upload", "/Users/you/Downloads/task.zip")

ターミナルのスクリーンショット

capture_terminal はターミナルウィンドウ（Terminal、iTerm2、Warp、VS Code、Ghostty など）のスクリーンショットを撮り、PNG として保存します。これを set_file_input と組み合わせると、ターミナルの出力を Web フォームにアップロードできます。

Claude 専用ウィンドウ

Chromeflow 拡張機能のアイコンをクリックし、「Use this window for Claude」 を選択すると、Claude のブラウザー操作を特定の Chrome ウィンドウに固定できます。これにより、Claude に干渉されることなく、ほかの Chrome ウィンドウを自由に使えます。

複数のエージェントセッションを並行して実行する

Chromeflow は、最大 11 個のエージェントセッション（Claude Code、Codex、またはその組み合わせ）の並行実行に対応しており、それぞれが他のセッションに干渉することなく、別々の Chrome ウィンドウを自動操作します。

仕組み：

• 各エージェントセッションは専用の Chromeflow MCP サーバーを起動し、7878-7888 の範囲から空いているポートを自動検出します（最初のセッションは 7878、2 番目は 7879 など）。
• Chrome 拡張機能はポートごとに WebSocket 接続を維持し、ポートごとのウィンドウ割り当てを追跡します。
• すべてのブラウザツールの呼び出しは、リクエストを受信したポートに割り当てられた Chrome ウィンドウにルーティングされます。

セットアップ：

1. 最初のエージェントセッションを通常どおり起動します。Chromeflow はポート 7878 を使用します。
2. 別のターミナルで 2 つ目のエージェントセッションを起動します。Chromeflow は自動的にポート 7879 に切り替えます。
3. Chromeflow 拡張機能のアイコンをクリックします。ポップアップにはインスタンスごとに 1 行（ポート 7878、ポート 7879 など）が表示され、接続中のインスタンスには緑色の点が付きます。
4. Chrome のウィンドウ Aでポップアップを開き、ポート 7878 の横にある **「Use this window」**をクリックします。
5. ウィンドウ Bに切り替えてポップアップを開き、ポート 7879 の横にある **「Use this window」**をクリックします。

これで完了です。各セッションはそれぞれ専用の Chrome ウィンドウを操作します。一方のウィンドウで調査タスクを実行しながら、別のセッションで別のウィンドウの Stripe ダッシュボードに入力しても、競合は発生しません。

単一インスタンスでの使い方に変更はなく、完全な後方互換性があります。以前のウィンドウごとの割り当ては、初回読み込み時に自動で移行されます。

別のプロジェクトへの追加

特別な作業は必要ありません。上記のプラグインのインストールはマシン全体に適用されます。任意のプロジェクトを開けば、Chromeflow を使用できます。

アップグレード

Claude Code の場合：

/plugin update chromeflow
/reload-plugins

Codex の場合：

/plugins update chromeflow

その後、ホストを再起動して、プラグインに同梱されている新しい MCP サーバーバイナリを読み込みます。

以前の npx chromeflow setup の手順からの移行

以前に npx chromeflow setup で Chromeflow をインストールした場合、特別な作業は必要ありません。プラグインをインストールすると（上記のセットアップ手順 1）、プラグインの最初の SessionStart で次の項目が整理されます。

• ~/.claude.json にある古い mcpServers.chromeflow エントリ
• ~/.claude/CLAUDE.md に残っている ## Chromeflow セクション

プロジェクトごとの CLAUDE.md ファイルと .claude/settings.local.json の許可リストには手を加えません。残しておきたい内容が含まれている可能性があるため、プラグインはこれらを変更しません。各プロジェクトの CLAUDE.md にある # Chromeflow — Claude Instructions セクションは、都合のよいときに手動で削除できます（同じ内容がプラグインのスキルに含まれています）。そのまま残しておいてもかまいません。

開発

git clone https://github.com/NeoDrew/chromeflow
cd chromeflow
npm install
packages/plugin/scripts/build-server.sh   # bundle the MCP server into the plugin

MCP サーバーのソースは packages/mcp-server/src/ にあり、esbuild を使って packages/plugin/server/chromeflow.mjs にバンドルされます。これはプラグインに直接同梱される単一ファイルの ESM バイナリです。

このチェックアウトをプラグインに指定することで、ローカルで開発できます。Claude Code の場合：

/plugin marketplace add /absolute/path/to/this/repo
/plugin install chromeflow

Codex の場合：

codex plugin marketplace add /absolute/path/to/this/repo
/plugins install chromeflow

MCP サーバーのソースを編集した後はバンドルを再ビルドし、変更を反映するために /reload-plugins を実行する（Claude Code の場合）か、ホストを再起動します（Codex の場合）。

Chrome 拡張機能は packages/extension/ にあります。

npm run dev:ext   # watches extension

拡張機能を再ビルドした後、chrome://extensions から再読み込みします。

要件

• Claude Code または Codex CLI
• Chrome（または任意の Chromium ブラウザー）
• Node.js 22+