electron by vercel-labs/agent-browser
npx skills add https://github.com/vercel-labs/agent-browser --skill electron使用 agent-browser 自动化任何 Electron 桌面应用。Electron 应用基于 Chromium 构建,并暴露一个 Chrome DevTools Protocol (CDP) 端口供 agent-browser 连接,从而实现与网页自动化相同的快照-交互工作流。
# 启动一个启用远程调试的 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
每个 Electron 应用都支持 --remote-debugging-port 标志,因为它是 Chromium 内置的功能。
# 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
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
slack --remote-debugging-port=9222
code --remote-debugging-port=9223
discord --remote-debugging-port=9224
"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 应用通常有多个窗口或 webview。使用标签页命令来列出和切换它们:
# 列出所有可用目标(窗口、webview 等)
agent-browser tab
# 通过索引切换到特定标签页
agent-browser tab 2
# 通过 URL 模式切换
agent-browser tab --url "*settings*"
Electron <webview> 元素会被自动发现,并且可以像常规页面一样被控制。Webview 会以 type: "webview" 的形式作为独立目标出现在标签页列表中:
# 连接到正在运行的 Electron 应用
agent-browser connect 9222
# 列出目标 —— webview 与页面一同出现
agent-browser tab
# 示例输出:
# 0: [page] Slack - Main Window https://app.slack.com/
# 1: [webview] Embedded Content 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 "search query"
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 :9222sleep 3)agent-browser tab 列出目标并切换到正确的那个agent-browser keyboard type "text" 在当前焦点处输入,无需选择器agent-browser keyboard inserttext "text" 来绕过按键事件任何基于 Electron 构建的应用都适用,包括:
如果一个应用是用 Electron 构建的,它就支持 --remote-debugging-port,并且可以用 agent-browser 进行自动化。
每周安装量
10.7K
仓库
GitHub Stars
24.9K
首次出现
Mar 1, 2026
安全审计
安装于
codex10.2K
opencode10.1K
gemini-cli10.1K
cursor10.1K
github-copilot10.0K
kimi-cli10.0K
Automate any Electron desktop app using agent-browser. Electron apps are built on Chromium and expose a Chrome DevTools Protocol (CDP) port that agent-browser can connect to, enabling the same snapshot-interact workflow used for web pages.
# 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
Every Electron app supports the --remote-debugging-port flag since it's built into Chromium.
# 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
slack --remote-debugging-port=9222
code --remote-debugging-port=9223
discord --remote-debugging-port=9224
"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
Important: If the app is already running, quit it first, then relaunch with the flag. The --remote-debugging-port flag must be present at launch time.
# 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
After connect, all subsequent commands target the connected app without needing --cdp.
Electron apps often have multiple windows or webviews. Use tab commands to list and switch between them:
# 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*"
Electron <webview> elements are automatically discovered and can be controlled like regular pages. Webviews appear as separate targets in the tab list with 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
Note: Webview support works via raw CDP connection.
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
Use named sessions to control multiple Electron apps at the same time:
# 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
The default color scheme when connecting via CDP may be light. To preserve dark mode:
agent-browser connect 9222
agent-browser --color-scheme dark snapshot -i
Or set it globally:
AGENT_BROWSER_COLOR_SCHEME=dark agent-browser connect 9222
--remote-debugging-port=NNNNlsof -i :9222sleep 3)agent-browser tab to list targets and switch to the right oneagent-browser keyboard type "text" to type at the current focus without a selectoragent-browser keyboard inserttext "text" to bypass key eventsAny app built on Electron works, including:
If an app is built with Electron, it supports --remote-debugging-port and can be automated with agent-browser.
Weekly Installs
10.7K
Repository
GitHub Stars
24.9K
First Seen
Mar 1, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
codex10.2K
opencode10.1K
gemini-cli10.1K
cursor10.1K
github-copilot10.0K
kimi-cli10.0K
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装