mcpField
A
agent-browser

agent-browser

github.com/julianromliエージェントワークフロー21351 回インストール4 日前に更新
リポジトリ

agent-browser について

agent-browserは、Chrome/Chromiumを自動操作するコマンドラインツールで、ウェブページの操作や情報収集を行うエージェント向けです。セッションや認証状態の保存、コマンドの一括実行、スナップショットを使った操作に対応します。

主な機能

  1. 01CDP経由でChrome/Chromiumを制御
  2. 02スナップショットから要素を特定して操作
  3. 03認証状態とセッションの保存・復元
  4. 04ブラウザーコマンドの一括実行
  5. 05スクリーンショット・テキスト取得・並列セッション

活用シーン

  1. 01ウェブフォームの自動入力と送信
  2. 02ログイン状態を再利用したサイトアクセス
  3. 03ページテキストや画像の取得
  4. 04複数のブラウザーセッションの並行操作

インストール

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

$npx skills add https://github.com/julianromli/ai-skills --skill agent-browser

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
authentication.md
commands.md
profiling.md
proxy-support.md
session-management.md
snapshot-refs.md
video-recording.md
templates/
authenticated-session.sh
capture-workflow.sh
form-automation.sh

詳細

agent-browser によるブラウザー自動化

この CLI は、CDP を介して Chrome/Chromium を直接使用します。npm i -g agent-browser、brew install agent-browser、または cargo install agent-browser でインストールします。Chrome をダウンロードするには、agent-browser install を実行します。最新バージョンに更新するには、agent-browser upgrade を実行します。

基本的なワークフロー

ブラウザー自動化はすべて、次のパターンに従います。

  1. 移動:agent-browser open <url>
  2. スナップショット:agent-browser snapshot -i(@e1、@e2 などの要素参照を取得)
  3. 操作:参照を使用してクリック、入力、選択を行います
  4. 再スナップショット:ページ遷移または DOM の変更後に、新しい参照を取得します
agent-browser open https://example.com/form
agent-browser snapshot -i
# Output: @e1 [input type="email"], @e2 [input type="password"], @e3 [button] "Submit"

agent-browser fill @e1 "[email protected]"
agent-browser fill @e2 "password123"
agent-browser click @e3
agent-browser wait --load networkidle
agent-browser snapshot -i  # Check result

コマンドの連結

1 回のシェル呼び出しで、&& を使ってコマンドを連結できます。バックグラウンドデーモンを介してブラウザーの状態がコマンド間で維持されるため、連結して実行しても安全で、個別に呼び出すより効率的です。

# Chain open + wait + snapshot in one call
agent-browser open https://example.com && agent-browser wait --load networkidle && agent-browser snapshot -i

# Chain multiple interactions
agent-browser fill @e1 "[email protected]" && agent-browser fill @e2 "password123" && agent-browser click @e3

# Navigate and capture
agent-browser open https://example.com && agent-browser wait --load networkidle && agent-browser screenshot page.png

連結する場合: 次の処理に進む前に中間コマンドの出力を確認する必要がない場合(例:ページを開く+待機する+スクリーンショットを撮る)は、&& を使用します。先に出力を解析する必要がある場合(例:スナップショットで参照を確認してから、その参照を使って操作する)は、コマンドを個別に実行します。

認証の処理

ログインが必要なサイトを自動化する場合は、状況に合った方法を選びます。

オプション 1:ユーザーのブラウザーから認証情報をインポート(単発タスクに最適)

# Connect to the user's running Chrome (they're already logged in)
agent-browser --auto-connect state save ./auth.json
# Use that auth state
agent-browser --state ./auth.json open https://app.example.com/dashboard

状態ファイルにはセッショントークンが平文で含まれています。.gitignore に追加し、不要になったら削除してください。保存時の暗号化には AGENT_BROWSER_ENCRYPTION_KEY を設定します。

オプション 2:永続プロファイル(定期的なタスクに最適)

# First run: login manually or via automation
agent-browser --profile ~/.myapp open https://app.example.com/login
# ... fill credentials, submit ...

# All future runs: already authenticated
agent-browser --profile ~/.myapp open https://app.example.com/dashboard

オプション 3:セッション名(Cookie と localStorage を自動保存・復元)

agent-browser --session-name myapp open https://app.example.com/login
# ... login flow ...
agent-browser close  # State auto-saved

# Next time: state auto-restored
agent-browser --session-name myapp open https://app.example.com/dashboard

オプション 4:認証情報ボルト(認証情報を暗号化して保存し、名前でログイン)

echo "$PASSWORD" | agent-browser auth save myapp --url https://app.example.com/login --username user --password-stdin
agent-browser auth login myapp

auth login は load でページに移動してから、ログインフォームのセレクターが表示されるまで待機して入力・クリックを行います。そのため、表示が遅い SPA のログイン画面でも、より確実に操作できます。

オプション 5:状態ファイル(手動で保存・読み込み)

# After logging in:
agent-browser state save ./auth.json
# In a future session:
agent-browser state load ./auth.json
agent-browser open https://app.example.com/dashboard

OAuth、2FA、Cookie ベースの認証、トークン更新のパターンについては、references/authentication.md を参照してください。

基本コマンド

# Navigation
agent-browser open <url>              # Navigate (aliases: goto, navigate)
agent-browser close                   # Close browser
agent-browser close --all             # Close all active sessions

# Snapshot
agent-browser snapshot -i             # Interactive elements with refs (recommended)
agent-browser snapshot -s "#selector" # Scope to CSS selector

# Interaction (use @refs from snapshot)
agent-browser click @e1               # Click element
agent-browser click @e1 --new-tab     # Click and open in new tab
agent-browser fill @e2 "text"         # Clear and type text
agent-browser type @e2 "text"         # Type without clearing
agent-browser select @e1 "option"     # Select dropdown option
agent-browser check @e1               # Check checkbox
agent-browser press Enter             # Press key
agent-browser keyboard type "text"    # Type at current focus (no selector)
agent-browser keyboard inserttext "text"  # Insert without key events
agent-browser scroll down 500         # Scroll page
agent-browser scroll down 500 --selector "div.content"  # Scroll within a specific container

# Get information
agent-browser get text @e1            # Get element text
agent-browser get url                 # Get current URL
agent-browser get title               # Get page title
agent-browser get cdp-url             # Get CDP WebSocket URL

# Wait
agent-browser wait @e1                # Wait for element
agent-browser wait --load networkidle # Wait for network idle
agent-browser wait --url "**/page"    # Wait for URL pattern
agent-browser wait 2000               # Wait milliseconds
agent-browser wait --text "Welcome"    # Wait for text to appear (substring match)
agent-browser wait --fn "!document.body.innerText.includes('Loading...')"  # Wait for text to disappear
agent-browser wait "#spinner" --state hidden  # Wait for element to disappear

# Downloads
agent-browser download @e1 ./file.pdf          # Click element to trigger download
agent-browser wait --download ./output.zip     # Wait for any download to complete
agent-browser --download-path ./downloads open <url>  # Set default download directory

# Network
agent-browser network requests                 # Inspect tracked requests
agent-browser network requests --type xhr,fetch  # Filter by resource type
agent-browser network requests --method POST   # Filter by HTTP method
agent-browser network requests --status 2xx    # Filter by status (200, 2xx, 400-499)
agent-browser network request <requestId>      # View full request/response detail
agent-browser network route "**/api/*" --abort  # Block matching requests
agent-browser network har start                # Start HAR recording
agent-browser network har stop ./capture.har   # Stop and save HAR file

# Viewport & Device Emulation
agent-browser set viewport 1920 1080          # Set viewport size (default: 1280x720)
agent-browser set viewport 1920 1080 2        # 2x retina (same CSS size, higher res screenshots)
agent-browser set device "iPhone 14"          # Emulate device (viewport + user agent)

# Capture
agent-browser screenshot              # Screenshot to temp dir
agent-browser screenshot --full       # Full page screenshot
agent-browser screenshot --annotate   # Annotated screenshot with numbered element labels
agent-browser screenshot --screenshot-dir ./shots  # Save to custom directory
agent-browser screenshot --screenshot-format jpeg --screenshot-quality 80
agent-browser pdf output.pdf          # Save as PDF

# Live preview / streaming
agent-browser stream enable           # Start runtime WebSocket streaming on an auto-selected port
agent-browser stream enable --port 9223  # Bind a specific localhost port
agent-browser stream status           # Inspect enabled state, port, connection, and screencasting
agent-browser stream disable          # Stop runtime streaming and remove the .stream metadata file

# Clipboard
agent-browser clipboard read                      # Read text from clipboard
agent-browser clipboard write "Hello, World!"     # Write text to clipboard
agent-browser clipboard copy                      # Copy current selection
agent-browser clipboard paste                     # Paste from clipboard

# Dialogs (alert, confirm, prompt)
agent-browser dialog accept              # Accept dialog
agent-browser dialog accept "my input"   # Accept prompt dialog with text
agent-browser dialog dismiss             # Dismiss/cancel dialog
agent-browser dialog status              # Check if a dialog is currently open

# Diff (compare page states)
agent-browser diff snapshot                          # Compare current vs last snapshot
agent-browser diff snapshot --baseline before.txt    # Compare current vs saved file
agent-browser diff screenshot --baseline before.png  # Visual pixel diff
agent-browser diff url <url1> <url2>                 # Compare two pages
agent-browser diff url <url1> <url2> --wait-until networkidle  # Custom wait strategy
agent-browser diff url <url1> <url2> --selector "#main"  # Scope to element

ストリーミング

各セッションでは、OS が割り当てたポートで WebSocket ストリームサーバーが自動的に起動します。バインドされたポートと接続状態を確認するには、agent-browser stream status を使用します。終了するには stream disable を使用し、特定のポートで再度有効にするには stream enable --port <port> を使用します。

一括実行

文字列配列の JSON 配列を batch にパイプすると、1 回の呼び出しで複数のコマンドを実行できます。これにより、複数の手順を含むワークフローを実行する際の、コマンドごとのプロセス起動のオーバーヘッドを回避できます。

echo '[
  ["open", "https://example.com"],
  ["snapshot", "-i"],
  ["click", "@e1"],
  ["screenshot", "result.png"]
]' | agent-browser batch --json

# Stop on first error
agent-browser batch --bail < commands.json

中間出力に依存しないコマンドの順序が決まっている場合は、batch を使用します。手順の合間に出力を解析する必要がある場合(例:スナップショットで参照を確認してから操作する)は、個別のコマンドまたは && による連結を使用します。

よくあるパターン

フォームの送信
agent-browser open https://example.com/signup
agent-browser snapshot -i
agent-browser fill @e1 "Jane Doe"
agent-browser fill @e2 "[email protected]"
agent-browser select @e3 "California"
agent-browser check @e4
agent-browser click @e5
agent-browser wait --load networkidle
認証情報ボルトを使った認証(推奨)
# Save credentials once (encrypted with AGENT_BROWSER_ENCRYPTION_KEY)
# Recommended: pipe password via stdin to avoid shell history exposure
echo "pass" | agent-browser auth save github --url https://github.com/login --username user --password-stdin

# Login using saved profile (LLM never sees password)
agent-browser auth login github

# List/show/delete profiles
agent-browser auth list
agent-browser auth show github
agent-browser auth delete github

auth login は、操作を開始する前にユーザー名、パスワード、送信ボタンのセレクターが表示されるまで待機します。タイムアウトはデフォルトのアクションタイムアウトに連動します。

状態の永続化による認証
# Login once and save state
agent-browser open https://app.example.com/login
agent-browser snapshot -i
agent-browser fill @e1 "$USERNAME"
agent-browser fill @e2 "$PASSWORD"
agent-browser click @e3
agent-browser wait --url "**/dashboard"
agent-browser state save auth.json

# Reuse in future sessions
agent-browser state load auth.json
agent-browser open https://app.example.com/dashboard
セッションの永続化
# Auto-save/restore cookies and localStorage across browser restarts
agent-browser --session-name myapp open https://app.example.com/login
# ... login flow ...
agent-browser close  # State auto-saved to ~/.agent-browser/sessions/

# Next time, state is auto-loaded
agent-browser --session-name myapp open https://app.example.com/dashboard

# Encrypt state at rest
export AGENT_BROWSER_ENCRYPTION_KEY=$(openssl rand -hex 32)
agent-browser --session-name secure open https://app.example.com

# Manage saved states
agent-browser state list
agent-browser state show myapp-default.json
agent-browser state clear myapp
agent-browser state clean --older-than 7
iframe の操作

iframe のコンテンツはスナップショットに自動的にインライン化されます。iframe 内の参照にはフレームのコンテキストが含まれるため、そのまま直接操作できます。

agent-browser open https://example.com/checkout
agent-browser snapshot -i
# @e1 [heading] "Checkout"
# @e2 [Iframe] "payment-frame"
#   @e3 [input] "Card number"
#   @e4 [input] "Expiry"
#   @e5 [button] "Pay"

# Interact directly — no frame switch needed
agent-browser fill @e3 "4111111111111111"
agent-browser fill @e4 "12/28"
agent-browser click @e5

# To scope a snapshot to one iframe:
agent-browser frame @e2
agent-browser snapshot -i         # Only iframe content
agent-browser frame main          # Return to main frame
データの抽出
agent-browser open https://example.com/products
agent-browser snapshot -i
agent-browser get text @e5           # Get specific element text
agent-browser get text body > page.txt  # Get all page text

# JSON output for parsing
agent-browser snapshot -i --json
agent-browser get text @e1 --json
並列セッション
agent-browser --session site1 open https://site-a.com
agent-browser --session site2 open https://site-b.com

agent-browser --session site1 snapshot -i
agent-browser --session site2 snapshot -i

agent-browser session list
起動済みの Chrome への接続
# Auto-discover running Chrome with remote debugging enabled
agent-browser --auto-connect open https://example.com
agent-browser --auto-connect snapshot

# Or with explicit CDP port
agent-browser --cdp 9222 snapshot

自動接続では、DevToolsActivePort と一般的なデバッグポート(9222、9229)を使って Chrome を検出します。HTTP ベースの CDP 検出に失敗した場合は、直接 WebSocket 接続にフォールバックします。

配色(ダークモード)
# Persistent dark mode via flag (applies to all pages and new tabs)
agent-browser --color-scheme dark open https://example.com

# Or via environment variable
AGENT_BROWSER_COLOR_SCHEME=dark agent-browser open https://example.com

# Or set during session (persists for subsequent commands)
agent-browser set media dark
ビューポートとレスポンシブ表示のテスト
# Set a custom viewport size (default is 1280x720)
agent-browser set viewport 1920 1080
agent-browser screenshot desktop.png

# Test mobile-width layout
agent-browser set viewport 375 812
agent-browser screenshot mobile.png

# Retina/HiDPI: same CSS layout at 2x pixel density
# Screenshots stay at logical viewport size, but content renders at higher DPI
agent-browser set viewport 1920 1080 2
agent-browser screenshot retina.png

# Device emulation (sets viewport + user agent in one step)
agent-browser set device "iPhone 14"
agent-browser screenshot device.png

scale パラメーター(第 3 引数)は、CSS レイアウトを変更せずに window.devicePixelRatio を設定します。Retina 表示のテストや、より高解像度のスクリーンショットの撮影に使用します。

ビジュアルブラウザー(デバッグ)
agent-browser --headed open https://example.com
agent-browser highlight @e1          # Highlight element
agent-browser inspect                # Open Chrome DevTools for the active page
agent-browser record start demo.webm # Record session
agent-browser profiler start         # Start Chrome DevTools profiling
agent-browser profiler stop trace.json # Stop and save profile (path optional)

環境変数で AGENT_BROWSER_HEADED=1 を設定すると、ヘッド付きモードを有効にできます。ブラウザー拡張機能はヘッド付きモードとヘッドレスモードの両方で動作します。

ローカルファイル(PDF、HTML)
# Open local files with file:// URLs
agent-browser --allow-file-access open file:///path/to/document.pdf
agent-browser --allow-file-access open file:///path/to/page.html
agent-browser screenshot output.png
iOS シミュレーター(モバイル Safari)
# List available iOS simulators
agent-browser device list

# Launch Safari on a specific device
agent-browser -p ios --device "iPhone 16 Pro" open https://example.com

# Same workflow as desktop - snapshot, interact, re-snapshot
agent-browser -p ios snapshot -i
agent-browser -p ios tap @e1          # Tap (alias for click)
agent-browser -p ios fill @e2 "text"
agent-browser -p ios swipe up         # Mobile-specific gesture

# Take screenshot
agent-browser -p ios screenshot mobile.png

# Close session (shuts down simulator)
agent-browser -p ios close

要件: Xcode を搭載した macOS、Appium(npm install -g appium && appium driver install xcuitest)

実機: 事前に設定されている場合、物理的な iOS デバイスでも動作します。xcrun xctrace list devices で確認できる UDID を使って --device "<UDID>" を指定してください。

セキュリティ

すべてのセキュリティ機能はオプトインです。デフォルトでは、agent-browser はナビゲーション、操作、出力に制限を設けません。

コンテンツ境界(AI エージェントに推奨)

--content-boundaries を有効にすると、ページ由来の出力がマーカーで囲まれ、LLM がツール出力と信頼できないページコンテンツを区別しやすくなります。

export AGENT_BROWSER_CONTENT_BOUNDARIES=1
agent-browser snapshot
# Output:
# --- AGENT_BROWSER_PAGE_CONTENT nonce=<hex> origin=https://example.com ---
# [accessibility tree]
# --- END_AGENT_BROWSER_PAGE_CONTENT nonce=<hex> ---
ドメイン許可リスト

信頼できるドメインへのナビゲーションを制限します。*.example.com のようなワイルドカードは、ベースドメインの example.com にも一致します。許可されていないドメインへのサブリソースリクエスト、WebSocket、EventSource 接続もブロックされます。対象ページが依存する CDN ドメインも含めてください。

export AGENT_BROWSER_ALLOWED_DOMAINS="example.com,*.example.com"
agent-browser open https://example.com        # OK
agent-browser open https://malicious.com       # Blocked
操作ポリシー

破壊的な操作を制限するには、ポリシーファイルを使用します。

export AGENT_BROWSER_ACTION_POLICY=./policy.json

policy.json の例:

{ "default": "deny", "allow": ["navigate", "snapshot", "click", "scroll", "wait", "get"] }

認証情報保管庫の操作(auth login など)は操作ポリシーの対象外ですが、ドメイン許可リストは引き続き適用されます。

出力制限

大きなページによるコンテキストの過剰な消費を防ぎます。

export AGENT_BROWSER_MAX_OUTPUT=50000

差分の確認(変更の検証)

操作後に diff snapshot を使い、意図した結果になったかを確認します。これは、現在のアクセシビリティツリーと、セッション内で最後に取得したスナップショットを比較します。

# Typical workflow: snapshot -> action -> diff
agent-browser snapshot -i          # Take baseline snapshot
agent-browser click @e2            # Perform action
agent-browser diff snapshot        # See what changed (auto-compares to last snapshot)

ビジュアルリグレッションテストやモニタリングには、次を使用します。

# Save a baseline screenshot, then compare later
agent-browser screenshot baseline.png
# ... time passes or changes are made ...
agent-browser diff screenshot --baseline baseline.png

# Compare staging vs production
agent-browser diff url https://staging.example.com https://prod.example.com --screenshot

diff snapshot の出力では、git diff と同様に、追加を +、削除を - で示します。diff screenshot は、変更されたピクセルを赤で強調表示した差分画像と、不一致率を出力します。

タイムアウトと読み込みの遅いページ

デフォルトのタイムアウトは 25 秒です。環境変数 AGENT_BROWSER_DEFAULT_TIMEOUT(ミリ秒単位)で変更できます。読み込みの遅いウェブサイトや大きなページでは、デフォルトのタイムアウトに頼らず、明示的な待機を使用してください。

# Wait for network activity to settle (best for slow pages)
agent-browser wait --load networkidle

# Wait for a specific element to appear
agent-browser wait "#content"
agent-browser wait @e1

# Wait for a specific URL pattern (useful after redirects)
agent-browser wait --url "**/dashboard"

# Wait for a JavaScript condition
agent-browser wait --fn "document.readyState === 'complete'"

# Wait a fixed duration (milliseconds) as a last resort
agent-browser wait 5000

読み込みが常に遅いウェブサイトでは、open の後に wait --load networkidle を使用すると、スナップショットを取得する前にページが完全に読み込まれるのを待てます。特定の要素の描画に時間がかかる場合は、wait <selector> または wait @ref でその要素を直接待ちます。

JavaScript ダイアログ(alert / confirm / prompt)

ページで JavaScript ダイアログ(alert()、confirm()、prompt())が開くと、ダイアログが閉じられるまで、ほかのブラウザーコマンド(スナップショット、スクリーンショット、クリックなど)がすべてブロックされます。コマンドが予期せずタイムアウトし始めた場合は、保留中のダイアログがないか確認してください。

# Check if a dialog is blocking
agent-browser dialog status

# Accept the dialog (dismiss the alert / click OK)
agent-browser dialog accept

# Accept a prompt dialog with input text
agent-browser dialog accept "my input"

# Dismiss the dialog (click Cancel)
agent-browser dialog dismiss

ダイアログが保留中の場合、すべてのコマンド応答にダイアログの種類とメッセージを示す warning フィールドが含まれます。--json モードでは、応答オブジェクト内の "warning" キーとして表示されます。

セッション管理とクリーンアップ

複数のエージェントや自動化を同時に実行する場合は、競合を避けるため、必ず名前付きセッションを使用してください。

# Each agent gets its own isolated session
agent-browser --session agent1 open site-a.com
agent-browser --session agent2 open site-b.com

# Check active sessions
agent-browser session list

プロセスが残るのを防ぐため、作業が終わったら必ずブラウザーセッションを閉じてください。

agent-browser close                    # Close default session
agent-browser --session agent1 close   # Close specific session
agent-browser close --all              # Close all active sessions

前のセッションが適切に閉じられていない場合、デーモンがまだ実行中のことがあります。agent-browser close でクリーンアップするか、agent-browser close --all ですべてのセッションを一度に終了してください。

非アクティブ状態が一定時間続いた後にデーモンを自動終了するには、次を使用します(エフェメラル環境や CI 環境に便利です)。

AGENT_BROWSER_IDLE_TIMEOUT_MS=60000 agent-browser open example.com

Ref のライフサイクル(重要)

Refs(@e1、@e2 など)は、ページが変化すると無効になります。次の操作の後は、必ずスナップショットを再取得してください。

  • ナビゲーションを伴うリンクやボタンのクリック
  • フォームの送信
  • 動的コンテンツの読み込み(ドロップダウン、モーダル)
agent-browser click @e5              # Navigates to new page
agent-browser snapshot -i            # MUST re-snapshot
agent-browser click @e1              # Use new refs

注釈付きスクリーンショット(ビジョンモード)

--annotate を使用すると、インタラクティブな要素の上に番号付きラベルを重ねたスクリーンショットを撮影できます。各ラベル [N] は参照 @eN に対応します。これにより参照もキャッシュされるため、別途スナップショットを取得せずにすぐ要素を操作できます。

agent-browser screenshot --annotate
# Output includes the image path and a legend:
#   [1] @e1 button "Submit"
#   [2] @e2 link "Home"
#   [3] @e3 textbox "Email"
agent-browser click @e2              # Click using ref from annotated screenshot

次のような場合は、注釈付きスクリーンショットを使用してください。

  • ラベルのないアイコンボタンや、視覚的にしか確認できない要素がページにある場合
  • 視覚的なレイアウトやスタイルを確認する必要がある場合
  • テキストスナップショットでは確認できないキャンバス要素やチャート要素がある場合
  • 要素の位置に関する空間的な推論が必要な場合

セマンティックロケーター(参照の代替)

参照が利用できない場合や信頼できない場合は、セマンティックロケーターを使用してください。

agent-browser find text "Sign In" click
agent-browser find label "Email" fill "[email protected]"
agent-browser find role button click --name "Submit"
agent-browser find placeholder "Search" type "query"
agent-browser find testid "submit-btn" click

JavaScript の評価(eval)

eval を使用すると、ブラウザーのコンテキストで JavaScript を実行できます。シェルのクォート処理によって複雑な式が壊れることがあります。問題を避けるには、--stdin または -b を使用してください。

# Simple expressions work with regular quoting
agent-browser eval 'document.title'
agent-browser eval 'document.querySelectorAll("img").length'

# Complex JS: use --stdin with heredoc (RECOMMENDED)
agent-browser eval --stdin <<'EVALEOF'
JSON.stringify(
  Array.from(document.querySelectorAll("img"))
    .filter(i => !i.alt)
    .map(i => ({ src: i.src.split("/").pop(), width: i.width }))
)
EVALEOF

# Alternative: base64 encoding (avoids all shell escaping issues)
agent-browser eval -b "$(echo -n 'Array.from(document.querySelectorAll("a")).map(a => a.href)' | base64)"

これが重要な理由: シェルがコマンドを処理すると、内部の二重引用符、! 文字(履歴展開)、バッククォート、$() によって、JavaScript が agent-browser に渡される前に壊れることがあります。--stdin フラグと -b フラグを使うと、シェルによる解釈を完全に回避できます。

使い分けの目安:

  • 1 行で、入れ子の引用符がない場合 → 通常の eval 'expression' で問題ありません
  • 入れ子の引用符、アロー関数、テンプレートリテラル、または複数行の場合 → eval --stdin <<'EVALEOF' を使用してください
  • プログラムで生成されたスクリプトの場合 → base64 を使って eval -b を使用してください

設定ファイル

プロジェクトのルートに agent-browser.json を作成すると、設定を永続化できます。

{
  "headed": true,
  "proxy": "http://localhost:8080",
  "profile": "./browser-data"
}

優先順位(低い順):~/.agent-browser/config.json < ./agent-browser.json < 環境変数 < CLI フラグ。カスタム設定ファイルには --config <path> または AGENT_BROWSER_CONFIG 環境変数を使用してください(ファイルが存在しないか無効な場合はエラーで終了します)。すべての CLI オプションは camelCase のキーに対応します(例:--executable-path → "executablePath")。ブール値のフラグは true/false の値を受け付けます(例:--headed false を指定すると設定が上書きされます)。ユーザー設定とプロジェクト設定の拡張機能は置き換えられず、マージされます。

詳細ドキュメント

参照使用する場面
references/commands.mdすべてのオプションを含むコマンドの完全なリファレンス
references/snapshot-refs.md参照のライフサイクル、無効化のルール、トラブルシューティング
references/session-management.md並列セッション、状態の永続化、同時スクレイピング
references/authentication.mdログインフロー、OAuth、2FA の処理、状態の再利用
references/video-recording.mdデバッグやドキュメント作成のための録画ワークフロー
references/profiling.mdパフォーマンス分析のための Chrome DevTools プロファイリング
references/proxy-support.mdプロキシ設定、地域テスト、ローテーションプロキシ

ブラウザーエンジンの選択

ローカルのブラウザーエンジンを選択するには --engine を使用してください。デフォルトは chrome です。

# Use Lightpanda (fast headless browser, requires separate install)
agent-browser --engine lightpanda open example.com

# Via environment variable
export AGENT_BROWSER_ENGINE=lightpanda
agent-browser open example.com

# With custom binary path
agent-browser --engine lightpanda --executable-path /path/to/lightpanda open example.com

対応しているエンジン:

  • chrome(デフォルト) -- CDP 経由の Chrome/Chromium
  • lightpanda -- CDP 経由の Lightpanda ヘッドレスブラウザー(Chrome より 10 倍高速で、メモリ使用量は 10 分の 1)

Lightpanda は --extension、--profile、--state、--allow-file-access に対応していません。Lightpanda は https://lightpanda.io/docs/open-source/installation からインストールしてください。

オブザーバビリティダッシュボード

ダッシュボードは独立したバックグラウンドサーバーで、すべてのセッションのブラウザーのビューポート、コマンドのアクティビティ、コンソール出力をリアルタイムで表示します。

# Install the dashboard once
agent-browser dashboard install

# Start the dashboard server (background, port 4848)
agent-browser dashboard start

# All sessions are automatically visible in the dashboard
agent-browser open example.com

# Stop the dashboard
agent-browser dashboard stop

ダッシュボードはブラウザーセッションとは独立してポート 4848 で実行されます(--port で設定可能)。すべてのセッションは自動的にダッシュボードにストリーミングされます。

すぐに使えるテンプレート

テンプレート説明
templates/form-automation.sh検証付きのフォーム入力
templates/authenticated-session.sh1 回ログインして、状態を再利用
templates/capture-workflow.shスクリーンショットを使ったコンテンツ抽出
./templates/form-automation.sh https://example.com/form
./templates/authenticated-session.sh https://app.example.com/login
./templates/capture-workflow.sh https://example.com ./output

コメント