electron

Electron アプリの自動化

agent-browser を使って、あらゆる Electron デスクトップアプリを自動化できます。Electron アプリは Chromium を基盤としており、Chrome DevTools Protocol（CDP）ポートを公開します。agent-browser はこのポートに接続できるため、Web ページと同じスナップショットと操作のワークフローを利用できます。

基本的なワークフロー

1. 起動：リモートデバッグを有効にして Electron アプリを起動します
2. 接続：agent-browser を CDP ポートに接続します
3. スナップショット：操作可能な要素を見つけます
4. 操作：要素参照を使って操作します
5. 再スナップショット：ページ遷移や状態変更の後に、再度スナップショットを取得します

# Launch an Electron app with remote debugging
open -a "Slack" --args --remote-debugging-port=9222

# Connect agent-browser to the app
agent-browser connect 9222

# Standard workflow from here
agent-browser snapshot -i
agent-browser click @e5
agent-browser screenshot slack-desktop.png

CDP を有効にして Electron アプリを起動する

Electron アプリは Chromium に組み込まれているため、すべてのアプリで --remote-debugging-port フラグがサポートされています。

macOS

# Slack
open -a "Slack" --args --remote-debugging-port=9222

# VS Code
open -a "Visual Studio Code" --args --remote-debugging-port=9223

# Discord
open -a "Discord" --args --remote-debugging-port=9224

# Figma
open -a "Figma" --args --remote-debugging-port=9225

# Notion
open -a "Notion" --args --remote-debugging-port=9226

# Spotify
open -a "Spotify" --args --remote-debugging-port=9227

Linux

slack --remote-debugging-port=9222
code --remote-debugging-port=9223
discord --remote-debugging-port=9224

Windows

"C:\Users\%USERNAME%\AppData\Local\slack\slack.exe" --remote-debugging-port=9222
"C:\Users\%USERNAME%\AppData\Local\Programs\Microsoft VS Code\Code.exe" --remote-debugging-port=9223

重要： アプリがすでに起動している場合は、いったん終了してからフラグを付けて再起動してください。--remote-debugging-port フラグは、起動時に指定する必要があります。

接続

# Connect to a specific port
agent-browser connect 9222

# Or use --cdp on each command
agent-browser --cdp 9222 snapshot -i

# Auto-discover a running Chromium-based app
agent-browser --auto-connect snapshot -i

connect の後は、--cdp を指定しなくても、以降のすべてのコマンドが接続中のアプリを対象にします。

タブの管理

Electron アプリには、複数のウィンドウや Webview があることがよくあります。タブコマンドを使って一覧表示し、切り替えます。

# List all available targets (windows, webviews, etc.)
agent-browser tab

# Switch to a specific tab by index
agent-browser tab 2

# Switch by URL pattern
agent-browser tab --url "*settings*"

Webview のサポート

Electron の <webview> 要素は自動的に検出され、通常のページと同じように操作できます。Webview はタブ一覧に type: "webview" を持つ個別のターゲットとして表示されます。

# Connect to running Electron app
agent-browser connect 9222

# List targets -- webviews appear alongside pages
agent-browser tab
# Example output:
#   0: [page]    Slack - Main Window     https://app.slack.com/
#   1: [webview] Embedded Content        https://example.com/widget

# Switch to a webview
agent-browser tab 1

# Interact with the webview normally
agent-browser snapshot -i
agent-browser click @e3
agent-browser screenshot webview.png

注： Webview のサポートは、CDP への直接接続を通じて機能します。

よく使われるパターン

アプリの調査とページ遷移

open -a "Slack" --args --remote-debugging-port=9222
sleep 3  # Wait for app to start
agent-browser connect 9222
agent-browser snapshot -i
# Read the snapshot output to identify UI elements
agent-browser click @e10  # Navigate to a section
agent-browser snapshot -i  # Re-snapshot after navigation

デスクトップアプリのスクリーンショットを撮影する

agent-browser connect 9222
agent-browser screenshot app-state.png
agent-browser screenshot --full full-app.png
agent-browser screenshot --annotate annotated-app.png

デスクトップアプリからデータを抽出する

agent-browser connect 9222
agent-browser snapshot -i
agent-browser get text @e5
agent-browser snapshot --json > app-state.json

デスクトップアプリのフォームに入力する

agent-browser connect 9222
agent-browser snapshot -i
agent-browser fill @e3 "search query"
agent-browser press Enter
agent-browser wait 1000
agent-browser snapshot -i

複数のアプリを同時に実行する

名前付きセッションを使って、複数の Electron アプリを同時に操作します。

# Connect to Slack
agent-browser --session slack connect 9222

# Connect to VS Code
agent-browser --session vscode connect 9223

# Interact with each independently
agent-browser --session slack snapshot -i
agent-browser --session vscode snapshot -i

カラースキーム

CDP 経由で接続する際のデフォルトのカラースキームは、light の場合があります。ダークモードを維持するには、次のようにします。

agent-browser connect 9222
agent-browser --color-scheme dark snapshot -i

または、グローバルに設定します。

AGENT_BROWSER_COLOR_SCHEME=dark agent-browser connect 9222

トラブルシューティング

「接続が拒否されました」または「接続できません」

• アプリが --remote-debugging-port=NNNN を付けて起動されていることを確認します
• アプリがすでに起動していた場合は、終了してフラグを付けて再起動します
• ポートが別のプロセスによって使用されていないことを確認します：lsof -i :9222

アプリは起動するが、接続に失敗する

• 起動後、接続するまで数秒待ちます（sleep 3）
• Webview の初期化に時間がかかるアプリもあります

スナップショットに要素が表示されない

• アプリが複数の Webview を使用している可能性があります。agent-browser tab でターゲットを一覧表示し、適切なものに切り替えます

入力フィールドに入力できない

• セレクターを指定せず現在のフォーカス位置に入力するには、agent-browser keyboard type "text" を試します
• Electron アプリによってはカスタム入力コンポーネントを使用しています。キーイベントを回避するには、agent-browser keyboard inserttext "text" を使用します

サポート対象アプリ

Electron で構築されたアプリであれば、次のようなものを含め、すべて動作します。

• コミュニケーション： Slack、Discord、Microsoft Teams、Signal、Telegram Desktop
• 開発： VS Code、GitHub Desktop、Postman、Insomnia
• デザイン： Figma、Notion、Obsidian
• メディア： Spotify、Tidal
• 生産性： Todoist、Linear、1Password

Electron で構築されたアプリはすべて --remote-debugging-port をサポートしており、agent-browser で自動化できます。