Agent Chrome

agentchrome

コーディングエージェントが、いつもの Chrome を使えるようにします。

インストール · エージェントにインストールさせる · できること · ツール · セキュリティ

Agent Chrome は Chrome 拡張機能と MCP サーバーで、コーディングエージェントが、実際にサインインしている Chrome プロファイルを使えるようにします。Claude Code、Codex、Gemini CLI、Antigravity、Grok、Muse、Cursor、opencode など、あらゆる MCP クライアントで動作します。エージェントごとに専用のタブグループで作業し、青い枠線とアニメーションカーソルで動作を表示します。スクリーンショットの撮影や動画クリップの録画ができ、複数の Chrome プロファイルを同時に接続できます。サーバーは Cloudflare 上、またはお使いのマシン上で実行されます。

_{エージェントの作業中に表示される画面です。この動画は拡張機能自体で録画しました（MP4）。}

役に立った場合は、ぜひリポジトリにスターを付けてください。ほかの人にも見つけてもらいやすくなります。

インストール

Node.js 18 以降と Google Chrome が必要です。

1. インストーラーを実行する

curl -fsSL https://agentchrome.dev/install | sh

インストーラーは、次の処理をまとめて実行します。

1. アカウントを作成し、chmod 600 を設定してキーを ~/.config/agentchrome/config.json に保存します。
2. 検出した各エージェントの ユーザーレベル の設定（下表）に、agentchrome という名前の MCP サーバーを追加します。
3. agentchrome スキルを ~/.agents/skills/agentchrome に一度だけ書き込み、各エージェントのスキルフォルダーに シンボリックリンク を作成します。
4. 拡張機能を ~/.agentchrome/extension に展開します。
5. ペアリングコードを表示し、クリップボードにコピーします。

クラウドを一切使わず、すべてをマシン上で完結させるには、--local を追加してください。ローカルモードを参照してください。

2. Chrome プロファイルごとに一度、拡張機能を読み込む

インストーラーが chrome://extensions を開き、Finder でフォルダーを表示します。

1. chrome://extensions で デベロッパーモード をオンにします。
2. パッケージ化されていない拡張機能を読み込む をクリックし、~/.agentchrome/extension を選択します。agentchrome extension --path を実行すると、フルパスを表示できます。
3. Agent Chrome をピン留めしてクリックし、ペアリングコードを貼り付けて 接続 を押します。

別のプロファイル（仕事用、個人用、クライアント用）を追加するには、そのプロファイルに切り替え、同じフォルダーを読み込んでから、新しいコードを取得するために agentchrome pair を実行します。各プロファイルは list_browsers で個別のブラウザーとして表示されます。

3. 使ってみる

エージェントに次のように依頼します。

agentchrome を使って news.ycombinator.com を開き、スクリーンショットを撮影して、トップページをスクロールする短い動画クリップを録画してください。

または、エージェントにインストールさせる

次の内容を Claude Code、Codex、またはほかのコーディングエージェントに貼り付けてください。

https://github.com/ShadowWalker2014/agentchrome/blob/main/AGENT_INSTALL.md に従って、agentchrome をインストールしてください。

エージェントがインストーラーを実行し、その後、Chrome での拡張機能の読み込みとコードの貼り付けという、あなたにしかできない唯一の手順を案内します。

Claude.ai または ChatGPT から利用する

このサーバーは OAuth に対応した標準のリモート MCP サーバーなので、チャットアプリからコネクターとして利用できます。コマンドラインツールは必要ありません。

Claude（claude.ai、Claude Desktop、Cowork）：Customize > Connectors > Add custom connector を開き、https://agentchrome.dev/mcp を入力して Connect を押します。

ChatGPT：Settings > Apps & Connectors > Advanced で Developer mode を有効にし、同じ URL を使ってコネクターを作成して OAuth を選択します。

サインインページが開きます。アカウントキーを貼り付けるか、持っていない場合は Create an account を押してください。その後、チャットで 「Chrome に接続して。」 と依頼します。アシスタントが pairing_code を呼び出し、拡張機能の読み込みとコードの貼り付けを案内します。

エージェントごとの設定場所

エージェント	設定の書き込み先（ユーザーレベル）	形式
Claude Code	claude mcp add --scope user（~/.claude.json）	Authorization ヘッダー付きの http
Codex	~/.codex/config.toml	url と http_headers を含む [mcp_servers.agentchrome]
Gemini CLI	~/.gemini/settings.json	httpUrl と headers
Antigravity	agy mcp add と ~/.gemini/antigravity/mcp_config.json	serverUrl と headers
Grok	grok mcp add --scope user（~/.grok/config.toml）	ヘッダー付きの http
Muse	~/.config/muse/settings.json	type: "streamable-http"
Cursor	~/.cursor/mcp.json	url と headers
opencode	~/.config/opencode/opencode.json	type: "remote"
Windsurf	~/.codeium/windsurf/mcp_config.json	serverUrl と headers

インストーラーは、編集するすべての JSON または TOML ファイルを <file>.bak-agentchrome としてバックアップします。スキルは ~/.claude/skills、~/.codex/skills、~/.gemini/skills、~/.gemini/antigravity/global_skills、~/.cursor/skills、~/.config/opencode/skills にリンクされます。

Gemini CLI に関する注意： Gemini は、信頼済みでないフォルダー内のすべての MCP サーバーを無効にするため、その場所では gemini mcp list に「Disabled」と表示されます。Gemini 内で /permissions を使ってフォルダーを信頼すると、サーバーが有効になります。

エージェントを選ぶ、またはキーの代わりに OAuth を使う

agentchrome install claude codex grok   # only these agents
agentchrome install --oauth             # no secret in config files; each agent signs in through the browser

OAuth を使うと、MCP サインインに対応したエージェント（Claude Code、Codex、Gemini CLI など）は初回利用時にサインインページを開きます。アカウントキーを一度貼り付けると（agentchrome key で確認できます）、エージェントは有効期間が短いトークンを受け取り、90 日間更新されます。

手動で追加する

claude mcp add --scope user --transport http agentchrome https://agentchrome.dev/mcp \
  --header "Authorization: Bearer $(agentchrome key)"

codex mcp add agentchrome --url https://agentchrome.dev/mcp --bearer-token-env-var AGENT_CHROME_MCP_KEY

Streamable HTTP に対応する MCP クライアントであれば、どれでも動作します。ベアラーキーを使って https://<server>/mcp を指定するか、URL を指定して OAuth の検出機能に任せてください。

機能

エージェントの動作を確認できます。ページの周囲に青い枠線が表示され、作業中のエージェントと停止ボタンを示すピルが表示されます。エージェント専用のカーソルが各対象へ滑らかに移動します。カーソルはリンク上では手の形に、テキスト上では I ビームに変わり、エージェントのロゴと名前が表示されます。ユーザー自身のマウスが動くことはありません。	録画では、人がページを操作しているように見えます。recordでは枠線、ピル、名前タグを表示せず、通常のカーソルを描画します（MP4）。インジケーターを表示するにはcursor: "agent"を、カーソルを表示しない場合は"hidden"を指定します。
各エージェントには、タスク名が付いた専用のタブグループが割り当てられます（例：「チェックアウトのバグを修正」）。ポップアップでは、アクティブなエージェントを確認し、個別に一時停止したり、すべて停止したりできます。	セットアップは 1 分で完了します。拡張機能を読み込み、インストーラーのコードを貼り付けると、プロファイルが接続されます。

また、ブラウザーエージェントで問題が起きがちな、実際のウェブサイトの操作にも対応しています。

• ドラッグ＆ドロップは、ネイティブの HTML5 ドラッグイベント（Trello 形式のボード、ファイルのドロップ領域）と、ポインターベースのスライダーや並べ替え可能なリストに対応しています。
• ファイルのアップロードでは、ネイティブのファイル選択ダイアログは開きません。エージェントは、コンピューター上の実際のファイルパスまたはファイルの内容を渡せます。クリックによってダイアログが開こうとした場合は、その操作を抑止し、入力するようエージェントに伝えます。
• alert、confirm、prompt、「サイトを離れますか？」ダイアログは、エージェントを停止させることなく、エージェントに報告されます。エージェントが要求したページ遷移で未保存のページを離れる場合は、その旨が通知されます。
• リンクから開いた新しいタブはエージェントのグループに加わり、ダウンロードはそれを発生させたクリックの結果として報告されます。
• **問題が発生したページについて説明します：**404 などの HTTP エラー、DNS の失敗、クラッシュしたタブ、拡張機能が操作できないchrome://ページ、権限が必要なfile://ページに対応しています。
• Chrome の「このブラウザーのデバッグを開始しました」というバーでキャンセルを押すと、すべてのエージェントが停止し、その理由が通知されます。

CLI

コマンド	機能
agentchrome setup [--server URL] [--key KEY] [--local]	アカウントを作成またはサインインし、エージェントにインストールして、スキルをリンクし、拡張機能を展開して、ペアリングコードを表示します
agentchrome pair	15 分間有効な、一度だけ使える新しいペアリングコードを表示します
agentchrome status	アカウント、ペアリング済みブラウザーのオンライン状態、設定済みのエージェントを表示します
agentchrome install [ids] [--oauth] / uninstall [ids]	MCP サーバーとスキルを追加または削除します
agentchrome revoke <browser-id>	ペアリング済みの Chrome プロファイルを削除します。接続は直ちに解除されます
agentchrome rotate-key	アカウントキーを置き換え、すべてのエージェント設定を書き換えます
agentchrome key	アカウントキーを表示します
agentchrome serve [--install]	ローカルサーバーを実行します。--installを指定すると、launchd によってログイン時に起動します
agentchrome extension [--path]	拡張機能を展開し、読み込み方法を表示します

ツール

ツール名は Claude in Chrome と一致しているため、Claude in Chrome 向けに書かれたプロンプトやスキルをそのまま使用できます。

ツール	機能
tabs_context	このセッションのタブグループとタブを一覧表示します。タブグループがない場合は、タブを含むグループを作成します。all: true を指定すると、すべてのタブを一覧表示します
tabs_create / tabs_close / tabs_select	セッションのグループ内でタブを開く、閉じる、切り替える操作をします。adopt を指定すると、ユーザーのタブをグループに取り込みます
tab_groups	Chrome のタブグループを一覧表示、作成、名前変更、色変更、折りたたみ、移動、またはグループ解除します
navigate	URL を読み込み、完了するまで待機します。back、forward、reload にも対応しています
computer	screenshot、left_click、right_click、middle_click、double_click、triple_click、hover / mouse_move、left_click_drag（HTML5 とポインタードラッグ。start_ref または start_coordinate を指定）、type、key（cmd+a などの組み合わせ）、scroll、scroll_to、wait、zoom を実行します。座標または要素参照に加え、modifiers も指定できます
screenshot	ビューポートをキャプチャします。fullPage: true を指定すると、ページ全体を1枚の長い画像としてキャプチャします。遅延読み込み画像を読み込むため、事前にスクロールします。また、Gmail、Notion、ダッシュボードなど、パネル内をスクロールするアプリの画像をつなぎ合わせます。JPEG または PNG に対応しています。save: true を指定すると、ダウンロードリンクを返します
read_page	ref_N ハンドルを含むアクセシビリティツリーを返します。filter: "interactive"、ref_id によるサブツリーの読み取り、viewportOnly に対応しています
find	自然言語による説明から要素を検索し、座標付きの参照を返します
form_input	参照を使って、入力欄、セレクト、チェックボックス、ラジオボタン、contenteditable フィールドに値を設定します
get_page_text	記事またはメインコンテンツの読み取り可能なテキストを返します
javascript_tool	ページ内で JavaScript を実行し、最後の式の値を返します。await に対応しており、厳格な CSP の環境でも動作します
read_console_messages / read_network_requests	コンソールのログとエラー、ステータスとタイミングを含むリクエストを返します。レスポンス本文を含めることもできます
file_upload / upload_image	ネイティブのファイル選択ダイアログを使わず、ローカルファイルパス、base64 データ、URL、またはスクリーンショットを使って、ファイル入力欄やドロップゾーンにデータを入力します。クリックによって開いたファイル選択ダイアログに入力する場合は、ref を省略してください
record	タブをMP4 または WebM のクリップとして録画し、リンクを返します。cursor は natural（デフォルト。表示インジケーターなし）、agent、hidden を指定できます。showClicks を指定すると、クリック時の波紋を表示します。action: "scroll" を指定すると、1回の呼び出しでページ全体を滑らかにスクロールする動画を作成します
gif_creator	アニメーション GIF を録画し、インラインで返します
wait_for	テキストの表示・非表示、CSS セレクターの一致、または URL の一致を待機します
handle_dialog	alert、confirm、prompt ダイアログを承認または閉じます
resize_window	ブラウザーウィンドウのサイズを変更します
history_search	ポップアップで有効にした場合に限り、閲覧履歴を検索します
list_browsers / select_browser	ペアリング済みの Chrome プロファイルを一覧表示して選択します。すべてのツールで browser: "<name or id>" も指定できます

機能の比較

	Claude in Chrome	Codex Chrome extension	agentchrome
あらゆる MCP エージェントで動作	Claude のみ	Codex のみ	はい
エージェントのセッションごとにタブグループを作成	はい	はい	はい。エージェントが名前や色を変更できます
複数の Chrome プロファイルを同時に使用	一度に接続できるブラウザーは 1 つ	プロファイルは 1 つ	はい、すべて同時に使用できます
スクリーンショット	はい	はい	はい。ズームや、長いページ全体の画像にも対応します（スクロール可能なパネル内も含む）
動画録画	GIF	なし	MP4 または WebM に加え、GIF と 1 回の呼び出しで作成できるスクロール動画
コンソール、ネットワーク、JavaScript	はい	はい	はい
サイトごとの権限確認	はい	はい	はい。デフォルトではオフで、ブロックリストもあります
「エージェントが作業中」であることを示す表示	はい	はい	点滅する枠線、ステータスピル、停止ボタン
アニメーション付きエージェントカーソル	なし	はい	はい。エージェントのロゴ付きで、リンク上では手の形になります
インジケーターなしのクリーンな録画	なし	なし	はい
スクリプトからヘッドレスで実行（codex exec、claude -p）	なし	なし	はい。リモート MCP サーバーとして動作します
セルフホスト可能	いいえ	いいえ	はい：Cloudflare またはローカル

ローカルモード

curl -fsSL https://agentchrome.dev/install | sh -s -- --local
agentchrome serve --install    # starts the local server now and at every login (macOS)

サーバーは 127.0.0.1:47823 のみで待ち受け、Web ページからのリクエストを拒否します。接続する前に、拡張機能のポップアップでサーバーを開き、http://127.0.0.1:47823 に設定してください。スクリーンショットと録画は ~/.agentchrome/artifacts に保存されます。

Cloudflare でセルフホストする

git clone https://github.com/ShadowWalker2014/agentchrome && cd agentchrome
pnpm install
npx wrangler login
sh scripts/deploy-cloudflare.sh my-agentchrome

このスクリプトは D1 データベース、KV 名前空間、R2 バケットを作成し、マイグレーションを実行して、Durable Object とともに Worker をデプロイし、セッションシークレットを設定して、独自のインストールコマンド（curl -fsSL https://my-agentchrome.<you>.workers.dev/install | sh）を表示します。自分のアカウントを作成したら、ほかの人が登録できないように SIGNUP_MODE を "closed" に設定してください。

個人利用なら、Workers の無料プランで十分に動作します。Durable Objects は呼び出しの間は休止するため、アイドル状態の拡張機能の接続に料金はかかりません。

セキュリティ

• **キー：**アカウントキー（acm_sk_…）とデバイストークン（acm_dt_…）は、256 ビットのランダム値です。サーバーには SHA-256 ハッシュのみが保存されます。ローカル設定ファイルのパーミッションは chmod 600 に設定されています。
• **ペアリング：**ブラウザーがアカウントに参加するには、アカウントキーをすでに持っているユーザーが作成した、15 分で期限切れになる一度限りの 10 文字コードが必要です。各 Chrome プロファイルには専用のデバイストークンが割り当てられ、個別に取り消せます。
• **OAuth 2.1：**PKCE（S256）、動的クライアント登録、リフレッシュトークンのローテーション、RFC 9728 による検出に、@cloudflare/workers-oauth-provider を使用します。
• **分離：**各アカウントには専用の Durable Object が割り当てられます。MCP セッション ID は HMAC で署名され、アカウントに紐付けられるため、あるアカウントが別のアカウントのセッションを使用することはできません。
• **録画：**保存することを選んだスクリーンショットと動画は、推測困難な 144 ビットのリンクで保護された R2 に保存され、7 日後に削除されます。
• **ブラウザー内での制御：**ページ上またはポップアップ内の停止ボタンを押すと、すべてのエージェントを同時に一時停止します。サイトを訪れるたびに確認を求めたり、サイトをブロックしたり、デフォルトでオフになっている履歴へのアクセスをオフのままにしたりすることもできます。
• **レート制限：**登録、ペアリング、サインインページは、IP アドレスごとにレート制限されています。
• **信頼できないページ：**スキルとサーバーの指示では、Web ページ内にある指示に従わないようエージェントに伝えています。

脆弱性は、非公開の GitHub セキュリティアドバイザリから報告してください。

仕組み

Claude Code ─┐                    ┌──────────────────────────────┐        ┌─ Chrome "Work" profile
Codex ───────┤  MCP over HTTPS    │ Cloudflare Worker            │  WSS   │   (extension, paired)
Gemini ──────┼──────────────────► │  /mcp  OAuth 2.1 or API key  │ ◄────► ├─ Chrome "Personal" profile
Grok, Muse … ┘                    │  Durable Object per account  │        └─ …
                                  └──────────────────────────────┘

拡張機能はサーバーへの WebSocket 接続を 1 つ維持します。サーバーは Cloudflare Workers 上で動作し、アカウントごとに 1 つの Durable Object を使用します。各 MCP セッションには、ペアリング済みの各プロファイルで専用のタブグループが割り当てられます。ページを操作するツールは、入力、スクリーンショット、コンソール、ネットワークログに Chrome debugger protocol を使用します。小さなコンテンツスクリプトが、要素参照、アクセシビリティツリー、オーバーレイ、エージェントカーソルを提供します。

開発

pnpm install
pnpm --filter @agentchrome/server exec wrangler d1 migrations apply agent-chrome-mcp --local
pnpm dev:server                         # Worker on http://127.0.0.1:8787
node scripts/build-all.mjs              # extension, CLI and public assets
pnpm test:e2e                           # end-to-end tests: real Chromium, the extension and the MCP SDK client
node --test tests/e2e/edge.test.mjs     # drag and drop, file pickers, dialogs, new tabs, downloads, errors
ACM_SERVER=https://… pnpm test:e2e      # the same suite against a deployed server
sh tests/e2e/local.sh                   # the same suite against local mode

アーキテクチャと貢献者向けのルールについては、AGENTS.md をご覧ください。

スターの履歴

agentchrome によって時間を節約できた場合は、ぜひスターを付けてください。スターは、ほかの開発者がこのプロジェクトを見つける助けになります。

ライセンス

MIT