🐾 claw-stack
プラグイン OpenClaw エコシステム

Browser Control

AI エージェントへの完全な Chrome DevTools アクセス — あらゆるライブウェブページを自動化・デバッグ・分析

概要

Browser Control は Model Context Protocol を通じて AI エージェントとライブ Chrome インスタンスをブリッジします。Chrome DevTools と Puppeteer 上に構築され、6つのカテゴリーにわたる 26 のツールを提供 — クリック、タイプ、スクリーンショット、パフォーマンストレース、ネットワークトラフィック検査、ヘッドレススタブではなくリアルブラウザでの JavaScript 実行を可能にします。

機能

主な機能

信頼性の高い UI 自動化

Puppeteer バックドのクリック、フィル、ドラッグ、ホバー、キーボード操作、自動待機ロジック — 脆弱な sleep() ハックは不要。

アクセシビリティツリーのスナップショット

任意のページの完全な a11y ツリーをテキスト形式でキャプチャ。脆弱な CSS セレクターに依存せず、操作をまたいで安定した要素 UID をエージェントに提供。

パフォーマンストレーシング

DevTools トレースを記録し Core Web Vital スコア(LCP、CLS、FID)と実用的なパフォーマンスインサイトを抽出 — オプションで CrUX リアルユーザーデータも取得。

ネットワーク検査

ページ上のすべての HTTP リクエストとレスポンスを一覧・フィルタリング・検査 — ボディ、ヘッダー、エラーコード込み — 複数のナビゲーションをまたいで。

ライブスクリプト実行

ページコンテキスト内で任意の JavaScript 関数を直接実行し、JSON シリアライズ可能な結果を取得。状態のデバッグ、DOM クエリ、カスタムロジックのトリガーが可能。

スクリーンショット & エミュレーション

PNG/JPEG/WebP 形式でフルページまたは要素レベルのスクリーンショットをキャプチャ。ダークモード、デバイスビューポート、ジオロケーション、ネットワークスロットリング条件をエミュレート。

アーキテクチャ

仕組み

MCP サーバーが Chrome の Chrome DevTools Protocol (CDP) と Puppeteer を構造化 MCP ツールにラップします。エージェントは JSON-RPC でツールを呼び出し、サーバーが各呼び出しをライブ Chrome インスタンスへの WebSocket 経由の CDP コマンドに変換します。

AI Agent stdio または SSE の JSON-RPC でツール呼び出しを発行
MCP Server MCP ツールを Puppeteer / CDP コマンドに変換
CDP / WS Chrome ブラウザプロセスへの WebSocket チャネル
Chrome ライブブラウザ — ローカル起動または遠隔接続
26
MCP ツール
6
機能カテゴリー
CDP
プロトコルバックボーン
3
Chrome チャネル

ユースケース

できること

6つの機能グループがライブ Chrome ブラウザの全操作領域をカバー — ピクセルのクリックからペイントタイムラインの分析まで。

UI 自動化

  • ボタン、リンク、フォームコントロールをクリック
  • 入力フィールドとテキストエリアへの入力
  • ページ要素間のドラッグ&ドロップ
  • ブラウザダイアログとモーダルの処理
  • ファイル入力経由のファイルアップロード
  • ホバーしてツールチップをトリガー

ナビゲーション

  • プログラムでタブを開閉
  • URL、前へ、後へ、リロードでナビゲート
  • ページ上に特定テキストが表示されるまで待機
  • マルチタブオーケストレーションとページ選択
  • ページ読み込みとキャッシュ動作の制御
  • セッションをまたいだブラウザ履歴管理

デバッグ

  • フルページまたは要素のスクリーンショットをキャプチャ
  • 任意のページのアクセシビリティツリーのスナップショット
  • ブラウザコンソールメッセージの読み取りとフィルタリング
  • ページコンテキスト内で任意の JavaScript を実行
  • ネットワークリクエストとレスポンスボディの検査
  • Core Web Vitals でパフォーマンスをトレース

エミュレーション

  • ダークモードまたはライトモードのシミュレーション
  • CPU とネットワーク条件のスロットリング
  • ジオ対応アプリのジオロケーション上書き
  • カスタムビューポートとデバイスサイズのエミュレート
  • ユーザーエージェント文字列のスプーフィング
  • Slow 3G / Fast 4G ネットワークプロファイルでテスト

パフォーマンス

  • DevTools パフォーマンストレースを記録
  • Core Web Vitals(LCP、CLS、FID)を抽出
  • 特定のパフォーマンスインサイトを分析
  • CrUX API でリアルユーザーフィールドデータを測定
  • オフライン分析のためにトレースをディスクに保存
  • ページ読み込みシーケンスのボトルネックを特定

ネットワーク検査

  • 最後のナビゲーション以降のすべてのリクエストを一覧
  • リソースタイプでフィルタリング(XHR、fetch、メディア…)
  • リクエストとレスポンスボディの検査
  • ページナビゲーションをまたいでリクエストを保持
  • 失敗したリクエストとエラーコードの特定
  • 詳細分析のためにネットワーク HAR データをエクスポート

柔軟性

3つの接続方法

新鮮なヘッドレスセッションでも既存のブラウザタブへの接続でも、Browser Control が対応します。

自動起動

デフォルト

MCP サーバーが専用プロファイルで Chrome を自動起動。セットアップ不要 — MCP クライアントを設定するだけで使用可能。

永続的な user-data-dir を使用し、セッション間で状態を維持。

自動接続

Chrome ≥ 144

実行中の Chrome インスタンスにアタッチ。ログインセッションを失わずに手動とエージェント駆動のテストを混在させるのに最適。

chrome://inspect/#remote-debugging でリモートデバッグを有効にする必要あり。

リモートデバッグポート

上級

任意の --remote-debugging-port にサーバーを向けます。VM、コンテナ、ポートフォワーディング経由のサンドボックス環境で動作。

カスタム WebSocket エンドポイントと Authorization ヘッダーをサポート。

もうすぐリリース

ウェイトリストに参加

このプラグインのリリース時に最初にお知らせします。

ウェイトリストに参加