尧图网络科技YAOTU DIGITAL 获取报价
获取报价
首页 / 资讯中心 / 文章详情

使用 agent-browser 自动化 Electron 桌面应用:基于 CDP 的完整实战指南

发布时间:2026/9/30 1:47:30

资讯中心
01
ARTICLE

使用 agent-browser 自动化 Electron 桌面应用:基于 CDP 的完整实战指南

使用 agent-browser 自动化 Electron 桌面应用:基于 CDP 的完整实战指南
人工智能大模型代码智能体AI Agent桌面应用后端前端CLI【免费下载链接】ZCodeZCode 是 AI 编程工作台提供桌面应用、浏览器界面和终端 Agent。本仓库包含客户端、后端服务、共享 UI以及 Agent CLI 与运行时源码。项目地址https://gitcode.com/zai-org/ZCode点击查看免费下载Electron 桌面应用如 VS Code、Slack、Discord、Figma、Notion、Spotify均基于 Chromium 构建天然暴露 Chrome DevTools ProtocolCDP远程调试端口因此可以复用浏览器自动化的「快照—交互」工作流进行驱动。本指南以 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页面跳转或状态变化后重新获取 refref 在页面变化后会失效必须重新快照。一条完整的端到端示例以 Slack 为例# 1. 以远程调试模式启动 Slack open -a Slack --args --remote-debugging-port9222 # 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-port9222 # VS Code open -a Visual Studio Code --args --remote-debugging-port9223 # Discord open -a Discord --args --remote-debugging-port9224 # Figma open -a Figma --args --remote-debugging-port9225 # Notion open -a Notion --args --remote-debugging-port9226 # Spotify open -a Spotify --args --remote-debugging-port9227macOS 上注意open -a与--args的组合--args之后的参数会全部透传给应用进程本身。Linux直接调用可执行文件slack --remote-debugging-port9222 code --remote-debugging-port9223 discord --remote-debugging-port9224Windows指定完整路径C:\Users\%USERNAME%\AppData\Local\slack\slack.exe --remote-debugging-port9222 C:\Users\%USERNAME%\AppData\Local\Programs\Microsoft VS Code\Code.exe --remote-debugging-port9223连接方式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-port9222 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]每个编号对应 refeN同时会缓存 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_SCHEMEdark agent-browser connect 9222排障指南「Connection refused」或「Cannot connect」确认应用确实是以--remote-debugging-portNNNN启动的如果应用启动时已经在运行先退出再用该参数重新启动检查端口是否被其他进程占用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 usertest.com、find role button click --name Submit等方式按文本、标签、角色、占位符定位元素键盘与鼠标控制press Controla、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【免费下载链接】ZCodeZCode 是 AI 编程工作台提供桌面应用、浏览器界面和终端 Agent。本仓库包含客户端、后端服务、共享 UI以及 Agent CLI 与运行时源码。项目地址https://gitcode.com/zai-org/ZCode点击查看免费下载相关推荐使用 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 仓库内置的 ElectronLobeHub Acceptance 实战用 agent-browser 通过 CDP 驱动 Electron 桌面应用取证LobeHub Acceptance 实战用 agent browser 通过 CDP 驱动 Electron 桌面应用取证 本文是 LobeHub 内置 a人工智能AI 应用大模型AI Agent多智能体工具调用前端后端上一篇social-auto-upload macOS配置指南在苹果系统上运行自动化上传的完整教程 下一篇Flame引擎1.21.0版本中组件自动移除问题分析与解决方案创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
02
RELATED NEWS

相关资讯

更多网站建设与数字化升级内容

03
WHY YAOTU

想打造同款高转化官网?

懂行业、懂生意,从建站到增长一站式陪跑

◈

场景化定制

不做模板站,围绕你的业务场景量身设计,小众不撞款。

◐

营销型架构

以转化目标组织内容与路径,让官网真正带来询盘。

▲

全周期服务

设计、开发、运营、运维一体,上线只是开始。

免费获取你的建站方案

留下需求,专属顾问 24 小时内为你输出方案建议。