Electron 應用程式自動化
使用 agent-browser 自動化任何 Electron 桌面應用程式。Electron 應用程式建構在 Chromium 之上，並暴露一個 Chrome DevTools Protocol (CDP) 端口，agent-browser 可以連接到該端口，從而實現與網頁相同的快照-互動工作流程。
核心工作流程
- 啟動 啟用遠端除錯功能的 Electron 應用程式
- 連接 agent-browser 到 CDP 端口
- 快照 以發現可互動元素
- 互動 使用元素引用
- 重新快照 在導航或狀態變更後
# 使用遠端除錯功能啟動 Electron 應用程式
open -a "Slack" --args --remote-debugging-port=9222
# 將 agent-browser 連接到應用程式
agent-browser connect 9222
# 從這裡開始標準工作流程
agent-browser snapshot -i
agent-browser click @e5
agent-browser screenshot slack-desktop.png
使用 CDP 啟動 Electron 應用程式
每個 Electron 應用程式都支援 --remote-debugging-port 標誌，因為它內建於 Chromium 中。
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 標誌必須在啟動時存在。
連接
# 連接到特定端口
agent-browser connect 9222
# 或在每個命令上使用 --cdp
agent-browser --cdp 9222 snapshot -i
# 自動發現正在執行的基於 Chromium 的應用程式
agent-browser --auto-connect snapshot -i
在 connect 之後，所有後續命令都針對已連接的應用程式，無需 --cdp。
分頁管理
Electron 應用程式通常有多個視窗或網頁視圖。使用分頁命令來列出和切換它們：
# 列出所有可用的目標（視窗、網頁視圖等）
agent-browser tab
# 按索引切換到特定分頁
agent-browser tab 2
# 按 URL 模式切換
agent-browser tab --url "*settings*"
Webview 支援
Electron <webview> 元素會自動被發現，並且可以像普通頁面一樣被控制。Webview 在分頁清單中作為單獨的目標出現，類型為 type: "webview"：
# 連接到正在執行的 Electron 應用程式
agent-browser connect 9222
# 列出目標 -- webview 與頁面一起出現
agent-browser tab
# 範例輸出：
# 0: [page] Slack - 主視窗 https://app.slack.com/
# 1: [webview] 嵌入內容 https://example.com/widget
# 切換到 webview
agent-browser tab 1
# 正常與 webview 互動
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 # 等待應用程式啟動
agent-browser connect 9222
agent-browser snapshot -i
# 讀取快照輸出以識別 UI 元素
agent-browser click @e10 # 導航到某個部分
agent-browser snapshot -i # 導航後重新快照
擷取桌面應用程式的螢幕截圖
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 "搜尋查詢"
agent-browser press Enter
agent-browser wait 1000
agent-browser snapshot -i
同時執行多個應用程式
使用命名會話來同時控制多個 Electron 應用程式：
# 連接到 Slack
agent-browser --session slack connect 9222
# 連接到 VS Code
agent-browser --session vscode connect 9223
# 獨立與每個應用程式互動
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 進行自動化。