- 人工智能
- 大模型
- 代码智能体
- AI Agent
- 桌面应用
- 后端
- 前端
- CLI
【免费下载链接】ZCode
ZCode 是 AI 编程工作台，提供桌面应用、浏览器界面和终端 Agent。本仓库包含客户端、后端服务、共享 UI，以及 Agent CLI 与运行时源码。
Electron 桌面应用（如 VS Code、Slack、Discord、Figma、Notion、Spotify）均基于 Chromium 构建，天然暴露 Chrome DevTools Protocol（CDP）远程调试端口，因此可以复用浏览器自动化的「快照—交互」工作流进行驱动。本指南以 ZCode 仓库内置的 Electron 自动化 Skill（.agents/skills/electron/SKILL.md）为核心骨架，结合同仓库的 agent-browser 自动化 Skill（.agents/skills/agent-browser/SKILL.md）与完整命令参考（.agents/skills/agent-browser/references/commands.md），讲解如何在 macOS、Linux、Windows 上以--remote-debugging-port启动 Electron 应用并通过agent-browser连接、快照、交互、截图、提取数据与填表，读完即可独立完成任意 Electron 应用的自动化与测试。
为什么 Electron 应用可以被自动化
Electron 应用的渲染进程就是 Chromium，因此它完整继承了 Chromium 的远程调试能力：
- 每个 Electron 应用都内置支持
--remote-debugging-port启动参数； - 通过该参数，应用会暴露一个 CDP 端口，对外提供调试 WebSocket 服务；
agent-browser可以直接连接该端口，把 Electron 应用当作一个「网页」来执行快照、点击、填写、截图等操作。
这意味着，凡是基于 Electron 构建的应用（包括但不限于 Slack、Discord、Microsoft Teams、VS Code、Postman、Figma、Notion、Obsidian、Spotify、Todoist、Linear、1Password 等），都无需额外安装插件即可被自动化。ZCode 仓库将该能力封装为 Skill 供 Agent 使用：其 frontmatter 中声明了allowed-tools: Bash(agent-browser:*), Bash(npx agent-browser:*)，即允许 Agent 通过 Bash 直接调用agent-browser的全部子命令。
核心工作流：快照驱动的五步循环
无论是网页还是桌面应用，agent-browser 的自动化都遵循同一套模式：
- 启动（Launch）：以远程调试模式启动 Electron 应用；
- 连接（Connect）：让 agent-browser 连接到对应的 CDP 端口；
- 快照（Snapshot）：获取界面可交互元素清单，得到形如
@e1、@e2的元素引用（ref）； - 交互（Interact）：使用元素 ref 执行点击、填写、选择等操作；
- 重新快照（Re-snapshot）：页面跳转或状态变化后重新获取 ref（ref 在页面变化后会失效，必须重新快照）。
一条完整的端到端示例（以 Slack 为例）：
# 1. 以远程调试模式启动 Slack open -a "Slack" --args --remote-debugging-port=9222 # 2. 连接 agent-browser 到该应用 agent-browser connect 9222 # 3. 标准工作流从此开始 agent-browser snapshot -i # 获取交互元素与 ref agent-browser click @e5 # 点击某个元素 agent-browser screenshot slack-desktop.png启动 Electron 应用：三平台启动命令详解
所有 Electron 应用都支持--remote-debugging-port参数，因为它内建于 Chromium。关键前提是：若应用已在运行，必须先退出，再携带该参数重新启动，该参数必须在启动时刻就存在。
macOS（通过open命令传参）
# 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=9227macOS 上注意open -a与--args的组合：--args之后的参数会全部透传给应用进程本身。
Linux（直接调用可执行文件）
slack --remote-debugging-port=9222 code --remote-debugging-port=9223 discord --remote-debugging-port=9224Windows（指定完整路径）
"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连接方式：connect、--cdp 与自动发现
连接到已启动的 Electron 应用有三种方式：
# 方式一：connect 命令（推荐，连接后后续命令自动生效） agent-browser connect 9222 # 方式二：每条命令携带 --cdp 参数 agent-browser --cdp 9222 snapshot -i # 方式三：自动发现正在运行的 Chromium 系应用 agent-browser --auto-connect snapshot -i执行connect之后，后续所有命令都会自动指向已连接的应用，无需再重复携带--cdp。自动发现模式（--auto-connect）在浏览器场景下通过DevToolsActivePort、常见调试端口（9222、9229）发现目标，若基于 HTTP 的 CDP 发现失败则回退到直接 WebSocket 连接——这套机制同样适用于已开启远程调试的 Electron 应用。
多窗口与 Tab 管理
Electron 应用常常有多个窗口或内嵌 webview。使用 tab 命令可以列出并切换目标（target）：
# 列出所有可用目标（窗口、webview 等） agent-browser tab # 按索引切换到指定 tab agent-browser tab 2 # 按 URL 模式切换 agent-browser tab --url "*settings*"Webview 支持：直接控制内嵌页面
Electron 的<webview>元素会被自动发现，并像普通页面一样被控制。webview 在 tab 列表中显示为独立目标，类型为"webview"：
# 连接正在运行的 Electron 应用 agent-browser connect 9222 # 列出目标 —— webview 与 page 并列出现 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 # 像普通页面一样交互 agent-browser snapshot -i agent-browser click @e3 agent-browser screenshot webview.png需要说明的是，webview 支持依赖原始 CDP 连接（raw CDP connection）实现。当目标元素在快照中缺失时，第一排查思路就是「应用使用了多个 webview」，应先用agent-browser tab列出目标并切换到正确的那一个。
常见实战模式
检查并导航应用
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 # 导航后重新快照，获取新 ref启动后等待数秒再连接是重要的健壮性手段——部分应用需要时间初始化窗口与 webview，过早连接可能失败。
截取桌面应用截图
agent-browser connect 9222 agent-browser screenshot app-state.png # 普通截图 agent-browser screenshot --full full-app.png # 整页截图 agent-browser screenshot --annotate annotated-app.png # 带编号标注的截图（可作视觉定位）--annotate会在截图中的可交互元素上叠加编号标签[N]，每个编号对应 ref@eN，同时会缓存 ref，可直接对截图元素执行交互而无需先做快照——非常适合图标按钮、Canvas、图表等文本快照不可见或需要空间定位的场景。
从桌面应用提取数据
agent-browser connect 9222 agent-browser snapshot -i agent-browser get text @e5 # 获取指定元素文本 agent-browser snapshot --json > app-state.json # 以 JSON 形式导出全量状态，便于程序解析命令参考中还提供了更丰富的取值命令：get html @e1（取 innerHTML）、get value @e1（取输入值）、get attr @e1 href（取属性）、get url、get title、get count ".item"等，均可直接作用于 Electron 界面。
在桌面应用中填写表单
agent-browser connect 9222 agent-browser snapshot -i agent-browser fill @e3 "search query" # 清空并输入 agent-browser press Enter # 按回车 agent-browser wait 1000 # 等待 1 秒（毫秒） agent-browser snapshot -i # 重新快照确认结果若应用中存在下拉框、复选框等控件，还可以使用select @e1 "option"、check @e1、uncheck @e1等命令完成完整表单操作。
同时控制多个应用（命名会话）
使用命名会话（--session）可以并行控制多个 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会话隔离同样适用于并发运行多个 Agent 或自动化任务的场景；用agent-browser session list可以查看活跃会话，用agent-browser --session <name> close可以关闭指定会话，避免遗留进程。
深色模式与配色方案
通过 CDP 连接时，默认配色方案可能是light（浅色）。若希望保留深色模式，可以按命令设置，或通过环境变量全局生效：
agent-browser connect 9222 agent-browser --color-scheme dark snapshot -iAGENT_BROWSER_COLOR_SCHEME=dark agent-browser connect 9222排障指南
「Connection refused」或「Cannot connect」
- 确认应用确实是以
--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 应用清单
任何基于 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 自动化。
进阶：把 agent-browser 的能力延伸到桌面自动化
agent-browser 除连接已有应用外，还内置了完整的浏览器自动化能力（安装方式见 .agents/skills/agent-browser/SKILL.md，完整命令见 .agents/skills/agent-browser/references/commands.md），这些能力在桌面自动化场景中同样适用：
- 命令链式执行：浏览器实例通过后台守护进程跨命令保持存活，因此可以用
&&串联多个命令，避免重复启动开销； - 语义定位器：ref 不可靠时可用
find text "Sign In" click、find label "Email" fill "user@test.com"、find role button click --name "Submit"等方式按文本、标签、角色、占位符定位元素； - 键盘与鼠标控制：
press Control+a、keydown/keyup、mouse move 100 200、drag @e1 @e2等可模拟更复杂的桌面交互； - JS 求值：
eval可在渲染进程上下文执行任意 JavaScript，复杂表达式建议用eval --stdin <<'EOF'或eval -b <base64>规避 Shell 转义问题； - 表单与下载：
upload @e1 file.pdf、download @e1 ./file.pdf可用于桌面应用内的文件上传下载场景； - 超时与等待：默认超时为 25 秒，可用
AGENT_BROWSER_DEFAULT_TIMEOUT（毫秒）覆盖；慢页面建议用wait --load networkidle、wait @e1、wait --url "**/dashboard"等显式等待而非依赖默认超时。
写在最后
Electron 应用自动化与网页自动化的本质差异只在于「如何启动与连接」：Electron 应用需要以--remote-debugging-port启动并通过connect/--cdp连接，而连接之后，快照、交互、重快照的循环与agent-browser的完整命令体系完全一致。掌握本文的启动命令、连接方式、Tab/Webview 管理、常见模式与排障手法后，即可把 Slack、VS Code、Discord 等桌面应用纳入 Agent 的自动化与测试管线。ZCode 仓库内的 Electron Skill 已内置整套流程，可直接作为 Agent 运行时的工作指引。
- 人工智能
- 大模型
- 代码智能体
- AI Agent
- 桌面应用
- 后端
- 前端
- CLI
【免费下载链接】ZCode
ZCode 是 AI 编程工作台，提供桌面应用、浏览器界面和终端 Agent。本仓库包含客户端、后端服务、共享 UI，以及 Agent CLI 与运行时源码。
相关推荐
使用 agent-browser 通过 CDP 自动化 Electron 桌面应用：从 VS Code、Slack 到 Discord 的完整实战指南
使用 agent browser 通过 CDP 自动化 Electron 桌面应用：从 VS Code、Slack 到 Discord 的完整实战指南 Elec
浏览器控制CLIAI 应用GUI 自动化开发工具AI 技能MCP 服务使用 agent-browser 通过 CDP 自动化 Electron 桌面应用：ZCode 技能指南
使用 agent browser 通过 CDP 自动化 Electron 桌面应用：ZCode 技能指南 导读 本文以 ZCode 仓库内置的 Electron
LobeHub Acceptance 实战：用 agent-browser 通过 CDP 驱动 Electron 桌面应用取证
LobeHub Acceptance 实战：用 agent browser 通过 CDP 驱动 Electron 桌面应用取证 本文是 LobeHub 内置 a
人工智能AI 应用大模型AI Agent多智能体工具调用前端后端
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
