使用 agent-browser 通过 CDP 自动化 Electron 桌面应用ZCode 技能指南【免费下载链接】ZCodeZ.ais coding agent harness. Powerful, intelligent, extensible.项目地址: https://gitcode.com/gh_mirrors/zco/ZCode导读本文以 ZCode 仓库内置的 Electron 自动化技能.agents/skills/electron/SKILL.md为核心系统讲解如何利用agent-browser命令行工具通过 Chromium 内建的 Chrome DevTools ProtocolCDP端口对 Slack、VS Code、Discord、Figma、Notion、Spotify 等一切基于 Electron 构建的桌面应用进行启动、连接、快照、交互与截图的全流程自动化。读完本文你将掌握 Electron 应用远程调试端口的启用方法、agent-browser的连接与会话管理技巧、多窗口/Webview 切换、表单填写、数据提取等实战模式并理解该技能在 ZCode 浏览器自动化体系browser-use-plugin中的定位与来源。为什么 Electron 应用可以被自动化Electron 应用本质上是一个打包了 Node.js 运行时与 Chromium 渲染内核的桌面外壳。由于 Chromium 原生内建了对 Chrome DevTools ProtocolCDP的支持任何基于 Electron 构建的应用都天然携带--remote-debugging-port命令行开关。只要在启动时带上该参数应用就会在指定端口暴露 CDP 调试接口此时agent-browser就可以像驱动一个网页一样对这个桌面应用执行快照、点击、填表、截图等操作——网页自动化中快照 → 交互 → 重新快照的成熟工作流被完整复用到桌面端。ZCode 仓库在 THIRD-PARTY-NOTICES.md 中明确记录electron技能连同agent-browser、dogfood技能派生自 vercel-labs/agent-browser 项目遵循 Apache-2.0 许可由 ZCode 完成本地化集成、格式整理与适配。因此本文中的命令在原始agent-browser生态与 ZCode 环境中保持一致可用。前置准备安装 agent-browseragent-browser是基于 CDP 直连的浏览器自动化 CLI安装方式参考仓库内配套技能 .agents/skills/agent-browser/SKILL.mdnpm i -g agent-browser # 或 brew install agent-browser # 或 cargo install agent-browser首次使用还需要下载受控浏览器内核并保持工具更新agent-browser install # 下载 Chrome 浏览器内核 agent-browser upgrade # 升级到最新版本ZCode 技能头Frontmatter声明的可用工具范围为Bash(agent-browser:*)与Bash(npx agent-browser:*)即所有agent-browser子命令均可通过 Shell 直接调用。核心工作流Electron 应用自动化遵循与网页自动化一致的五步闭环Launch以启用远程调试的方式启动 Electron 应用Connect让agent-browser连接到对应的 CDP 端口Snapshot对应用界面做快照发现可交互元素Interact使用快照返回的元素引用如e5执行交互Re-snapshot在导航或状态变更后重新快照获取最新元素引用一个最小可运行的完整示例# 1. 以远程调试模式启动 Electron 应用 open -a Slack --args --remote-debugging-port9222 # 2. 将 agent-browser 连接到应用 agent-browser connect 9222 # 3. 此后遵循标准工作流 agent-browser snapshot -i agent-browser click e5 agent-browser screenshot slack-desktop.png其中snapshot -i会输出带交互编号的元素清单形如e1、e5后续点击、填写均以这些引用为操作句柄。值得注意的是agent-browser的浏览器状态由后台守护进程daemon维持因此多个命令可以借助在同一 Shell 调用中链式执行而不会丢失会话。使用 CDP 启动 Electron 应用--remote-debugging-port是 Chromium 内建参数所有 Electron 应用均支持。下面按平台给出常见应用的启动命令。macOS# 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-port9227Linuxslack --remote-debugging-port9222 code --remote-debugging-port9223 discord --remote-debugging-port9224WindowsC:\Users\%USERNAME%\AppData\Local\slack\slack.exe --remote-debugging-port9222 C:\Users\%USERNAME%\AppData\Local\Programs\Microsoft VS Code\Code.exe --remote-debugging-port9223关键前提如果应用已经在运行必须先完全退出再携带该参数重新启动——--remote-debugging-port必须在应用启动时刻就生效运行中途追加无效。连接 agent-browser连接方式有三种按使用场景灵活选择# 方式一连接指定端口连接后所有后续命令自动指向该应用 agent-browser connect 9222 # 方式二每条命令单独携带 --cdp 参数 agent-browser --cdp 9222 snapshot -i # 方式三自动发现正在运行的 Chromium 系应用 agent-browser --auto-connect snapshot -i执行connect之后后续命令无需再重复传入--cdp会话状态由守护进程统一维护。Tab 管理多窗口与多 WebviewElectron 应用往往包含多个窗口、多个webview嵌入视图agent-browser通过 tab 命令统一管理这些 CDP 目标Target# 列出所有可用目标窗口、webview 等 agent-browser tab # 按索引切换到指定目标 agent-browser tab 2 # 按 URL 模式切换 agent-browser tab --url *settings*tab无参数时输出所有目标及其类型、标题与 URL是诊断快照里为什么找不到元素的首选排查命令。Webview 支持Electron 的webview元素会被自动发现并与普通页面一样接受控制。在 tab 列表中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 连接通道raw CDP connection即 webview 直接作为 CDP target 暴露给 agent-browser无需额外的桥接层。常见自动化模式检查并导航应用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 # 导航后重新快照为桌面应用截图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 # 导出结构化 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 应用时使用--session命名会话将它们隔离管理# 连接 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_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无需选择器即可在当前焦点处键入若应用使用自定义输入组件拦截了键盘事件改用agent-browser keyboard inserttext text绕过按键事件直接注入文本支持的 App 范围凡基于 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 自动化。与 ZCode 浏览器自动化体系的关联本文技能在 ZCode 中属于 Agent 技能Skills体系其定位与仓库内浏览器能力形成了互补闭环面向外部网页.agents/skills/agent-browser/SKILL.md 讲解agent-browser对普通网页的导航、表单、截图与登录态复用与本文的 Electron 桌面自动化同源同栈均基于 CDP。面向 ZCode 内建浏览器browser-use-plugin 是 ZCode 官方内置的浏览器自动化插件通过 Node REPL MCP 的js工具驱动agent.browsers运行时其 control-browser 技能 定义了 Playwright DOM 快照 → 定位器 → 动作的网页工作流以及 IAB应用内浏览器、扩展、cdpCLI 管理的有头/无头 Chromium三种后端类型。若 ZCode CLI 以--browser-useheadless显式启动其托管 Chromium 即以后端类型cdp暴露与本文的 CDP 直连思路一脉相承。来源与许可.agents/skills/electron/SKILL.md头部的注释块声明其派生自 vercel-labs/agent-browser版权归 Vercel Inc.采用 Apache-2.0 许可由 ZCode 本地化修改完整授权与溯源信息见仓库根目录 THIRD-PARTY-NOTICES.md。综上本文技能是 ZCode 在外部 Electron 桌面应用场景下的自动化入口以 CDP 端口为桥、以agent-browser为执行器复用网页自动化中经过验证的快照-交互闭环让 Slack 消息检查、VS Code 界面验证、Discord 状态抓取等桌面任务能够被 Agent 稳定、可复现地完成。【免费下载链接】ZCodeZ.ais coding agent harness. Powerful, intelligent, extensible.项目地址: https://gitcode.com/gh_mirrors/zco/ZCode创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 使用 agent-browser 通过 CDP 自动化 Electron 桌面应用：ZCode 技能指南
使用 agent-browser 通过 CDP 自动化 Electron 桌面应用ZCode 技能指南【免费下载链接】ZCodeZ.ais coding agent harness. Powerful, intelligent, extensible.项目地址: https://gitcode.com/gh_mirrors/zco/ZCode导读本文以 ZCode 仓库内置的 Electron 自动化技能.agents/skills/electron/SKILL.md为核心系统讲解如何利用agent-browser命令行工具通过 Chromium 内建的 Chrome DevTools ProtocolCDP端口对 Slack、VS Code、Discord、Figma、Notion、Spotify 等一切基于 Electron 构建的桌面应用进行启动、连接、快照、交互与截图的全流程自动化。读完本文你将掌握 Electron 应用远程调试端口的启用方法、agent-browser的连接与会话管理技巧、多窗口/Webview 切换、表单填写、数据提取等实战模式并理解该技能在 ZCode 浏览器自动化体系browser-use-plugin中的定位与来源。为什么 Electron 应用可以被自动化Electron 应用本质上是一个打包了 Node.js 运行时与 Chromium 渲染内核的桌面外壳。由于 Chromium 原生内建了对 Chrome DevTools ProtocolCDP的支持任何基于 Electron 构建的应用都天然携带--remote-debugging-port命令行开关。只要在启动时带上该参数应用就会在指定端口暴露 CDP 调试接口此时agent-browser就可以像驱动一个网页一样对这个桌面应用执行快照、点击、填表、截图等操作——网页自动化中快照 → 交互 → 重新快照的成熟工作流被完整复用到桌面端。ZCode 仓库在 THIRD-PARTY-NOTICES.md 中明确记录electron技能连同agent-browser、dogfood技能派生自 vercel-labs/agent-browser 项目遵循 Apache-2.0 许可由 ZCode 完成本地化集成、格式整理与适配。因此本文中的命令在原始agent-browser生态与 ZCode 环境中保持一致可用。前置准备安装 agent-browseragent-browser是基于 CDP 直连的浏览器自动化 CLI安装方式参考仓库内配套技能 .agents/skills/agent-browser/SKILL.mdnpm i -g agent-browser # 或 brew install agent-browser # 或 cargo install agent-browser首次使用还需要下载受控浏览器内核并保持工具更新agent-browser install # 下载 Chrome 浏览器内核 agent-browser upgrade # 升级到最新版本ZCode 技能头Frontmatter声明的可用工具范围为Bash(agent-browser:*)与Bash(npx agent-browser:*)即所有agent-browser子命令均可通过 Shell 直接调用。核心工作流Electron 应用自动化遵循与网页自动化一致的五步闭环Launch以启用远程调试的方式启动 Electron 应用Connect让agent-browser连接到对应的 CDP 端口Snapshot对应用界面做快照发现可交互元素Interact使用快照返回的元素引用如e5执行交互Re-snapshot在导航或状态变更后重新快照获取最新元素引用一个最小可运行的完整示例# 1. 以远程调试模式启动 Electron 应用 open -a Slack --args --remote-debugging-port9222 # 2. 将 agent-browser 连接到应用 agent-browser connect 9222 # 3. 此后遵循标准工作流 agent-browser snapshot -i agent-browser click e5 agent-browser screenshot slack-desktop.png其中snapshot -i会输出带交互编号的元素清单形如e1、e5后续点击、填写均以这些引用为操作句柄。值得注意的是agent-browser的浏览器状态由后台守护进程daemon维持因此多个命令可以借助在同一 Shell 调用中链式执行而不会丢失会话。使用 CDP 启动 Electron 应用--remote-debugging-port是 Chromium 内建参数所有 Electron 应用均支持。下面按平台给出常见应用的启动命令。macOS# 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-port9227Linuxslack --remote-debugging-port9222 code --remote-debugging-port9223 discord --remote-debugging-port9224WindowsC:\Users\%USERNAME%\AppData\Local\slack\slack.exe --remote-debugging-port9222 C:\Users\%USERNAME%\AppData\Local\Programs\Microsoft VS Code\Code.exe --remote-debugging-port9223关键前提如果应用已经在运行必须先完全退出再携带该参数重新启动——--remote-debugging-port必须在应用启动时刻就生效运行中途追加无效。连接 agent-browser连接方式有三种按使用场景灵活选择# 方式一连接指定端口连接后所有后续命令自动指向该应用 agent-browser connect 9222 # 方式二每条命令单独携带 --cdp 参数 agent-browser --cdp 9222 snapshot -i # 方式三自动发现正在运行的 Chromium 系应用 agent-browser --auto-connect snapshot -i执行connect之后后续命令无需再重复传入--cdp会话状态由守护进程统一维护。Tab 管理多窗口与多 WebviewElectron 应用往往包含多个窗口、多个webview嵌入视图agent-browser通过 tab 命令统一管理这些 CDP 目标Target# 列出所有可用目标窗口、webview 等 agent-browser tab # 按索引切换到指定目标 agent-browser tab 2 # 按 URL 模式切换 agent-browser tab --url *settings*tab无参数时输出所有目标及其类型、标题与 URL是诊断快照里为什么找不到元素的首选排查命令。Webview 支持Electron 的webview元素会被自动发现并与普通页面一样接受控制。在 tab 列表中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 连接通道raw CDP connection即 webview 直接作为 CDP target 暴露给 agent-browser无需额外的桥接层。常见自动化模式检查并导航应用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 # 导航后重新快照为桌面应用截图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 # 导出结构化 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 应用时使用--session命名会话将它们隔离管理# 连接 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_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无需选择器即可在当前焦点处键入若应用使用自定义输入组件拦截了键盘事件改用agent-browser keyboard inserttext text绕过按键事件直接注入文本支持的 App 范围凡基于 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 自动化。与 ZCode 浏览器自动化体系的关联本文技能在 ZCode 中属于 Agent 技能Skills体系其定位与仓库内浏览器能力形成了互补闭环面向外部网页.agents/skills/agent-browser/SKILL.md 讲解agent-browser对普通网页的导航、表单、截图与登录态复用与本文的 Electron 桌面自动化同源同栈均基于 CDP。面向 ZCode 内建浏览器browser-use-plugin 是 ZCode 官方内置的浏览器自动化插件通过 Node REPL MCP 的js工具驱动agent.browsers运行时其 control-browser 技能 定义了 Playwright DOM 快照 → 定位器 → 动作的网页工作流以及 IAB应用内浏览器、扩展、cdpCLI 管理的有头/无头 Chromium三种后端类型。若 ZCode CLI 以--browser-useheadless显式启动其托管 Chromium 即以后端类型cdp暴露与本文的 CDP 直连思路一脉相承。来源与许可.agents/skills/electron/SKILL.md头部的注释块声明其派生自 vercel-labs/agent-browser版权归 Vercel Inc.采用 Apache-2.0 许可由 ZCode 本地化修改完整授权与溯源信息见仓库根目录 THIRD-PARTY-NOTICES.md。综上本文技能是 ZCode 在外部 Electron 桌面应用场景下的自动化入口以 CDP 端口为桥、以agent-browser为执行器复用网页自动化中经过验证的快照-交互闭环让 Slack 消息检查、VS Code 界面验证、Discord 状态抓取等桌面任务能够被 Agent 稳定、可复现地完成。【免费下载链接】ZCodeZ.ais coding agent harness. Powerful, intelligent, extensible.项目地址: https://gitcode.com/gh_mirrors/zco/ZCode创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考