【Vercel实用Skill】electron 技能

使用agent-browser通过Chrome DevTools Protocol自动化Electron桌面应用VS Code、Slack、Discord、Figma、Notion、Spotify等。用于与Electron应用交互、自动化桌面应用、连接到运行中的应用、控制原生应用或测试Electron应用程序。技能概述electron 技能允许自动化任何基于Electron构建的桌面应用程序。由于Electron应用基于Chromium构建它们暴露了一个Chrome DevTools ProtocolCDP端口agent-browser可以连接到该端口从而实现与网页相同的快照-交互工作流程。这使得AI代理能够控制和自动化各种流行的桌面应用程序如VS Code、Slack、Discord、Figma、Notion、Spotify等。下载地址https://github.com/vercel-labs/agent-browser主要功能应用启动使用远程调试标志启动Electron应用CDP连接连接到Electron应用的Chrome DevTools Protocol端口元素快照发现应用中的交互元素元素交互使用元素引用进行点击、填充等操作标签管理在多个窗口或webview之间切换截图捕获截取桌面应用的屏幕截图数据提取从桌面应用中提取文本和数据表单填写在桌面应用中填写表单多应用控制使用命名会话同时控制多个Electron应用颜色方案保持应用的深色模式设置跨平台支持支持macOS、Linux和Windows触发条件在以下情况下应该调用此技能用户需要与Electron应用交互用户需要自动化Slack应用用户需要控制VS Code用户需要与Discord应用交互用户需要测试这个Electron应用用户需要连接到桌面应用任何需要自动化原生Electron应用程序的任务核心工作流程标准自动化流程每个Electron应用自动化都遵循以下模式启动使用远程调试启用标志启动Electron应用连接将agent-browser连接到CDP端口快照发现交互元素交互使用元素引用进行操作重新快照在导航或状态更改后获取新引用处理过程1. 启动Electron应用每个Electron应用都支持--remote-debugging-port标志因为它是Chromium内置的。macOS# Slackopen -a Slack --args --remote-debugging-port9222# VS Codeopen -a Visual Studio Code --args --remote-debugging-port9223# Discordopen -a Discord --args --remote-debugging-port9224# Figmaopen -a Figma --args --remote-debugging-port9225# Notionopen -a Notion --args --remote-debugging-port9226# Spotifyopen -a Spotify --args --remote-debugging-port9227Linuxslack --remote-debugging-port9222code --remote-debugging-port9223discord --remote-debugging-port9224WindowsC:\Users\%USERNAME%\AppData\Local\slack\slack.exe --remote-debugging-port9222C:\Users\%USERNAME%\AppData\Local\Programs\Microsoft VS Code\Code.exe --remote-debugging-port9223重要如果应用已经在运行先退出它然后使用标志重新启动。--remote-debugging-port标志必须在启动时存在。2. 连接到应用# 连接到特定端口 agent-browser connect 9222 # 或在每个命令上使用 --cdp agent-browser --cdp 9222 snapshot -i # 自动发现运行中的基于Chromium的应用 agent-browser --auto-connect snapshot -i在connect之后所有后续命令都针对已连接的应用无需--cdp。3. 标签管理Electron应用通常有多个窗口或webview。使用标签命令在它们之间列出和切换# 列出所有可用目标窗口、webview等agent-browser tab# 按索引切换到特定标签agent-browser tab 2# 按URL模式切换agent-browser tab --url *settings*4. 检查和导航应用open -a Slack --args --remote-debugging-port9222sleep 3 # 等待应用启动agent-browser connect 9222agent-browser snapshot -i # 读取快照输出以识别UI元素agent-browser click e10 # 导航到某个部分agent-browser snapshot -i # 导航后重新快照输入要求使用此技能时用户需要提供应用名称要自动化的Electron应用名称如Slack、VS Code、Discord等CDP端口可选远程调试端口号默认为9222操作指令具体的自动化操作点击、填充、截图等会话名称可选用于同时控制多个应用输出说明技能将提供应用快照包含交互元素及其引用标识符的可访问性树截图文件PNG格式的应用截图提取的文本应用或元素的文本内容应用状态JSON格式的应用状态数据使用示例示例1检查和导航应用open -a Slack --args --remote-debugging-port9222sleep 3 # 等待应用启动agent-browser connect 9222agent-browser snapshot -i # 读取快照输出以识别UI元素agent-browser click e10 # 导航到某个部分agent-browser snapshot -i # 导航后重新快照示例2截取桌面应用截图agent-browser connect 9222agent-browser screenshot app-state.pngagent-browser screenshot --full full-app.pngagent-browser screenshot --annotate annotated-app.png示例3从桌面应用提取数据agent-browser connect 9222agent-browser snapshot -iagent-browser get text e5agent-browser snapshot --json app-state.json示例4在桌面应用中填写表单agent-browser connect 9222agent-browser snapshot -iagent-browser fill e3 search queryagent-browser press Enteragent-browser wait 1000agent-browser snapshot -i示例5同时运行多个应用使用命名会话同时控制多个Electron应用# 连接到Slackagent-browser --session slack connect 9222# 连接到VS Codeagent-browser --session vscode connect 9223# 独立地与每个应用交互agent-browser --session slack snapshot -iagent-browser --session vscode snapshot -i颜色方案Playwright在通过CDP连接时默认将颜色方案覆盖为light。要保留深色模式agent-browser connect 9222 agent-browser --color-scheme dark snapshot -i或全局设置AGENT_BROWSER_COLOR_SCHEMEdark agent-browser connect 9222故障排除Connection refused 或 Cannot connect确保应用使用--remote-debugging-portNNNN标志启动如果应用已经在运行退出并使用标志重新启动检查端口是否未被其他进程使用lsof -i :9222应用启动但连接失败启动后等待几秒钟再连接sleep 3某些应用需要时间初始化其webview元素未出现在快照中应用可能使用多个webview。使用agent-browser tab列出目标并切换到正确的目标使用agent-browser snapshot -i -C包含光标交互元素带有onclick处理程序的div无法在输入字段中输入尝试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自动化。最佳实践先退出再启动如果应用已经在运行必须先退出然后使用--remote-debugging-port标志重新启动等待启动启动应用后等待几秒钟sleep 3再连接让应用有时间初始化使用命名会话同时控制多个应用时使用命名会话以避免冲突检查标签Electron应用通常有多个窗口或webview使用tab命令列出和切换重新快照导航或状态更改后重新获取快照以获得新的元素引用使用 -C 标志如果元素未出现在快照中使用snapshot -i -C包含光标交互元素键盘输入对于自定义输入组件使用keyboard type或keyboard inserttext而非fill保持深色模式如果应用使用深色模式设置AGENT_BROWSER_COLOR_SCHEMEdark平台特定说明macOS使用open -a命令启动应用open -a Slack --args --remote-debugging-port9222Linux直接调用应用可执行文件slack --remote-debugging-port9222Windows使用完整路径调用应用可执行文件C:\Users\%USERNAME%\AppData\Local\slack\slack.exe --remote-debugging-port9222