mcpField
R
remote-browser

remote-browser

github.com/shawnpanaエージェントワークフロー264 回インストール30 週間前に更新
リポジトリ

remote-browser について

remote-browserは、クラウドVM、CI、コーディングエージェントなどの隔離されたリモート環境からヘッドレスブラウザーを操作するエージェントスキルです。`browser-use`でページの確認や操作、セッション管理を行い、トンネル経由でローカル開発サーバーにも接続できます。

主な機能

  1. 01`browser-use`でヘッドレスブラウザーを操作
  2. 02ページと要素のインデックスを確認
  3. 03移動、クリック、入力、スクリーンショット
  4. 04クラウドまたはCDP経由で接続
  5. 05ローカル開発サーバーへのトンネル作成
  6. 06複数エージェントでタブを共有

活用シーン

  1. 01リモートの隔離環境でブラウザー操作を自動化
  2. 02ローカル開発サーバーをテスト
  3. 03エージェント間でブラウザーを共有
  4. 04Webページを確認して操作

インストール

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

$npx skills add https://github.com/shawnpana/browser-use --skill remote-browser

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

詳細

サンドボックス化されたエージェント向けブラウザー自動化

このスキルは、ヘッドレスブラウザーを操作する必要があるサンドボックス化されたリモートマシン(クラウド VM、CI、コーディングエージェント)上で実行されるエージェント向けです。

前提条件

browser-use doctor    # Verify installation

セットアップの詳細については、https://github.com/browser-use/browser-use/blob/main/browser_use/skill_cli/README.md を参照してください。

基本的なワークフロー

  1. 移動:browser-use open <url> — 必要に応じてヘッドレスブラウザーを起動します
  2. 確認:browser-use state — クリック可能な要素とそのインデックスを返します
  3. 操作:state のインデックスを使用します(browser-use click 5、browser-use input 3 "text")
  4. 検証:browser-use state または browser-use screenshot で確認します
  5. 繰り返し:コマンド間でブラウザーは開いたままです
  6. クリーンアップ:完了したら browser-use close を実行します

ブラウザーモード

browser-use open <url>                                    # Default: headless Chromium
browser-use cloud connect                                 # Provision cloud browser and connect
browser-use --connect open <url>                          # Auto-discover running Chrome via CDP
browser-use --cdp-url ws://localhost:9222/... open <url>  # Connect via CDP URL

コマンド

# Navigation
browser-use open <url>                    # Navigate to URL
browser-use back                          # Go back in history
browser-use scroll down                   # Scroll down (--amount N for pixels)
browser-use scroll up                     # Scroll up
browser-use tab list                      # List all tabs with lock status
browser-use tab new [url]                 # Open a new tab (blank or with URL)
browser-use tab switch <index>            # Switch to tab by index
browser-use tab close <index> [index...]  # Close one or more tabs

# Page State — always run state first to get element indices
browser-use state                         # URL, title, clickable elements with indices
browser-use screenshot [path.png]         # Screenshot (base64 if no path, --full for full page)

# Interactions — use indices from state
browser-use click <index>                 # Click element by index
browser-use click <x> <y>                 # Click at pixel coordinates
browser-use type "text"                   # Type into focused element
browser-use input <index> "text"          # Click element, then type
browser-use keys "Enter"                  # Send keyboard keys (also "Control+a", etc.)
browser-use select <index> "option"       # Select dropdown option
browser-use upload <index> <path>         # Upload file to file input
browser-use hover <index>                 # Hover over element
browser-use dblclick <index>              # Double-click element
browser-use rightclick <index>            # Right-click element

# Data Extraction
browser-use eval "js code"                # Execute JavaScript, return result
browser-use get title                     # Page title
browser-use get html [--selector "h1"]    # Page HTML (or scoped to selector)
browser-use get text <index>              # Element text content
browser-use get value <index>             # Input/textarea value
browser-use get attributes <index>        # Element attributes
browser-use get bbox <index>              # Bounding box (x, y, width, height)

# Wait
browser-use wait selector "css"           # Wait for element (--state visible|hidden|attached|detached, --timeout ms)
browser-use wait text "text"              # Wait for text to appear

# Cookies
browser-use cookies get [--url <url>]     # Get cookies (optionally filtered)
browser-use cookies set <name> <value>    # Set cookie (--domain, --secure, --http-only, --same-site, --expires)
browser-use cookies clear [--url <url>]   # Clear cookies
browser-use cookies export <file>         # Export to JSON
browser-use cookies import <file>         # Import from JSON

# Python — persistent session with browser access
browser-use python "code"                 # Execute Python (variables persist across calls)
browser-use python --file script.py       # Run file
browser-use python --vars                 # Show defined variables
browser-use python --reset                # Clear namespace

# Session
browser-use close                         # Close browser and stop daemon
browser-use sessions                      # List active sessions
browser-use close --all                   # Close all sessions

Python の browser オブジェクトでは、次の操作を行えます:browser.url、browser.title、browser.html、browser.goto(url)、browser.back()、browser.click(index)、browser.type(text)、browser.input(index, text)、browser.keys(keys)、browser.upload(index, path)、browser.screenshot(path)、browser.scroll(direction, amount)、browser.wait(seconds)。

トンネル

Cloudflare トンネルを使って、ローカルの開発サーバーをブラウザーに公開します。

browser-use tunnel <port>                 # Start tunnel (idempotent)
browser-use tunnel list                   # Show active tunnels
browser-use tunnel stop <port>            # Stop tunnel
browser-use tunnel stop --all             # Stop all tunnels

コマンドの連結

コマンドは && で連結できます。ブラウザーはデーモンを介して開いたままになるため、連結しても安全で効率的です。

browser-use open https://example.com && browser-use state
browser-use input 5 "[email protected]" && browser-use input 6 "password" && browser-use click 7

中間出力が不要な場合は連結してください。インデックスを特定するために state を解析する必要がある場合は、個別に実行してください。

よくあるワークフロー

ローカル開発サーバーの公開
python -m http.server 3000 &                      # Start dev server
browser-use tunnel 3000                            # → https://abc.trycloudflare.com
browser-use open https://abc.trycloudflare.com     # Browse the tunnel

トンネルはブラウザーセッションとは独立しており、browser-use close の後も維持されます。

マルチエージェント(--connect モード)

--connect を使うと、複数のエージェントで 1 つのブラウザーを共有できます。各エージェントにはそれぞれ独自のタブが割り当てられるため、他のエージェントが干渉することはありません。

セットアップ:一度登録し、すべての --connect コマンドでインデックスを渡します。

INDEX=$(browser-use register)                    # → prints "1"
browser-use --connect $INDEX open <url>          # Navigate in agent's own tab
browser-use --connect $INDEX state               # Get state from agent's tab
browser-use --connect $INDEX click <element>     # Click in agent's tab
  • タブのロック:エージェントがタブを変更(クリック、入力、移動)すると、そのタブは当該エージェント専用にロックされます。他のエージェントが同じタブを変更しようとすると、エラーになります。
  • 読み取り専用アクセス:state、screenshot、get、wait コマンドは、ロックの状態に関係なく、どのタブでも実行できます。
  • エージェントセッションの有効期限は、操作がない状態で 5 分です。新しいインデックスを取得するには、browser-use register を再度実行してください。

グローバルオプション

オプション説明
--headedブラウザーウィンドウを表示します
--connectCDP 経由で実行中の Chrome を自動検出します
--cdp-url <url>CDP URL(http:// または ws://)経由で接続します
--session NAME名前付きセッションを対象にします(デフォルト:「default」)
--jsonJSON 形式で出力します

ヒント

  1. 最初に必ず state を実行し、利用可能な要素とそのインデックスを確認してください
  2. セッションは維持されます — ブラウザーは閉じるまでコマンド間で開いたままです
  3. トンネルは独立しています — browser-use close の後も維持されます
  4. tunnel は冪等です — 同じポートに対して再度呼び出すと、既存の URL が返されます

トラブルシューティング

  • ブラウザーが起動しない場合:browser-use close を実行してから再試行してください。browser-use doctor を実行して確認します。
  • 要素が見つからない場合:browser-use scroll down を実行してから browser-use state を実行してください
  • トンネルが機能しない場合:which cloudflared で確認し、browser-use tunnel list でアクティブなトンネルを確認してください

クリーンアップ

browser-use close                         # Close browser session
browser-use tunnel stop --all             # Stop tunnels (if any)

コメント