mcpField
B
browser-automation

browser-automation

github.com/different-aiエージェントワークフロー605111 回インストール24 週間前に更新
リポジトリ

browser-automation について

CDP を利用したブラウザー操作の手順を示すスキルです。ブラウザーの接続先を明示し、各操作後に状態を確認するため、再現可能なナビゲーション、操作、デバッグを行うエージェント向けです。

主な機能

  1. 01ブラウザーターゲットの確認
  2. 02ページへの移動
  3. 03スナップショットによる操作対象の特定
  4. 04スナップショット UID でクリックと入力
  5. 05スナップショットまたは評価による状態確認
  6. 06CLI ツールを使ったデバッグ

活用シーン

  1. 01ブラウザーの移動とフォーム操作の自動化
  2. 02操作後のページ状態の確認
  3. 03CDP 接続先やスナップショット問題の調査

MCP 対応

OpenCode Browser が提供するブラウザーツールの利用手順を説明します。ターゲットの一覧表示、移動、スナップショット、クリック、入力、評価、スクリーンショットが含まれます。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/different-ai/opencode-browser --skill browser-automation

インストール後、Claude Code で/browser-automationを入力して読み込まれたか確認します。

詳細

できること

  • CDP を利用したブラウジングタスクのために、安全で組み合わせ可能なワークフローを提供します
  • 明示的な browser_url の値を使用し、非表示のブラウザーシングルトンがあると想定しないでください
  • クリックや入力の操作には browser_snapshot の UID を使用します
  • 各操作の後、browser_snapshot または browser_eval で状態の変化を確認します

ベストプラクティスのワークフロー

  1. browser_list({ browser_url }) で対象を確認します
  2. target_id を選ぶか、省略して最初のページターゲットを使用します
  3. 必要に応じて browser_navigate で移動します
  4. browser_snapshot で候補を見つけます
  5. 最新のスナップショットにある UID を使ってクリックまたは入力します
  6. browser_snapshot または browser_eval で確認します

CLI を優先したデバッグ

  • 利用可能なツールをすべて一覧表示します：npx @different-ai/opencode-browser tools
  • ツールを直接実行します：npx @different-ai/opencode-browser tool browser_list --args '{"browser_url":"http://127.0.0.1:9222"}'
  • デフォルトのエンドポイントを設定します：OPENCODE_BROWSER_URL=http://127.0.0.1:9222 npx @different-ai/opencode-browser status

この方法は、OpenCode の完全なセッションを実行する前に、CDP エンドポイントやスナップショットの問題をすばやく再現するのに役立ちます。

利用可能なツール

  • browser_list
  • browser_navigate
  • browser_snapshot
  • browser_click
  • browser_fill
  • browser_eval
  • browser_screenshot

トラブルシューティング

  • browser_list が失敗する場合は、ブラウザーが --remote-debugging-port を指定して起動されていることを確認してください
  • browser_click または browser_fill で UID が見つからない場合は、先にスナップショットを更新してください
  • アクセシビリティツリーに表示されないページ固有の確認には browser_eval を使用します
  • 各操作の後に結果を確認してください

コメント

Markdown 対応