Chrome-CDP-Skill: AI があなたのライブ Chrome タブにアクセス
March 25, 2026
カテゴリ:
実用的なオープンソースプロジェクト
Chrome-CDP-Skill: AI ブラウザ自動化を革新
あなたの AI エージェントに実際の Chrome ブラウザ—今開いているタブ、ログイン済みの Gmail/GitHub アカウント、現在のワークフローの状態—に目と手を与えることを想像してください。分離されたブラウザを起動する必要なし。サービスに再ログインする必要なし。クリーンな状態からのページ再読み込みなし。
🎯 Chrome-CDP-Skill がすべてを変える理由
Puppeteer や Playwright などの従来のツールは新しいブラウザインスタンスを起動します。chrome-cdp-skill は Chrome DevTools Protocol (CDP) を介してあなたのライブ Chrome に直接接続します。AI が確認できるのは以下の通りです：
- すでにログイン済みのページ (Gmail、GitHub、社内ツール)
- 作業中のアクティブタブ
- ワークフロー途中の実際のページ状態
2.6K GitHub スター が開発者がこのアプローチを愛している証です。
🚀 ゼロセットアップインストール
# pi skill として (最も簡単)
pi install git:github.com/pasky/[email protected]
# または skills/chrome-cdp/ をエージェントディレクトリにコピー
# Node.js 22+ のみ必要 (npm install 不要)
一度だけ有効化: chrome://inspect/#remote-debugging → トグルスイッチ。
⚡ 強力な CLI コマンド
cdp list # すべての開いているタブをリスト
cdp shot tab1 # 現在のタブのスクリーンショット
cdp snap tab1 # アクセシビリティツリー
cdp html tab1 ".main" # CSS セレクタの HTML
cdp click tab1 ".button" # セレクタでクリック
cdp type tab1 "Hello AI" # フォーカスされた要素にタイプ
cdp eval tab1 "window.title" # ページコンテキストで JS 実行
cdp loadall tab1 ".more" # 'Load More' を自動クリック
🛡️ chrome-devtools-mcp より優れている
| 機能 | chrome-cdp-skill | chrome-devtools-mcp |
|---|---|---|
| 永続接続 | ✅ タブごとのデーモン | ❌ コマンドごとに再接続 |
| "デバッグ許可" モーダル | ✅ タブごと一度だけ | ❌ 繰り返し表示 |
| 100+ タブ | ✅ 信頼性あり | ❌ ターゲットタイムアウト |
| 依存関係 | ✅ Node.js のみ | ❌ 重いスタック |
🎛️ マジックの仕組み
- Chrome のリモートデバッグポートへの直接 WebSocket
- タブごとに軽量デーモンを生成 (20分アイドル後に自動終了)
- タブごとの一度だけ「デバッグ許可」
- すべてのコマンドで接続を再利用 (静かに)
🌐 クロスプラットフォーム自動検出
✅ macOS: Chrome、Chromium、Brave、Edge、Vivaldi
✅ Linux: + Flatpak ブラウザ
✅ Windows/WSL: LOCALAPPDATA、CDP_HOST を使用
🚀 60秒で開始
- クローン:
git clone https://github.com/pasky/chrome-cdp-skill - 有効化:
chrome://inspect/#remote-debugging - 実行:
./scripts/cdp.mjs list
あなたの AI エージェントが本物のブラウザを制御します。 Amp、Claude Code、Cursor、または任意の Node.js エージェントに最適です。
元の記事:
オリジナルを見る