桌面应用 / Desktop Apps
Electron 桌面应用
Slack、VS Code、Discord、Figma、Notion、Spotify 这些桌面应用其实都是 Chromium 套壳——它们都基于 Electron。
只要启动时带上 --remote-debugging-port,chrome-use 就能像操作网页一样接进去:
同样的 snapshot → 交互 → 再 snapshot 循环,同样的 @ref 定位。
核心流程
自动化一个 Electron 应用只有五步:启动(带远程调试)→ 连接 CDP 端口 → snapshot 发现可交互元素 → 用 ref 交互 → 状态变化后 重新 snapshot。 跟驱动一个普通网页几乎没有区别。
# 带远程调试端口启动 Electron 应用
$ open -a "Slack" --args --remote-debugging-port=9222
# 把 chrome-use 连接到这个应用
$ chrome-use connect 9222
# 之后就是标准工作流
$ chrome-use snapshot -i
$ chrome-use click @e5
$ chrome-use screenshot slack-desktop.png
带 CDP 启动应用
每个 Electron 应用都支持 --remote-debugging-port,因为这是 Chromium 内建的能力。
下面是三大平台的启动方式——给不同应用分配不同端口,就能同时驱动多个。
macOS
# 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
Linux
$ slack --remote-debugging-port=9222
$ code --remote-debugging-port=9223
$ discord --remote-debugging-port=9224
Windows
$ "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 必须在启动那一刻就存在。如果应用已经开着,先退出它,再带上这个 flag 重新启动,否则连不上。
连接
连接有三种方式:直接 connect <端口>、每条命令带 --cdp、或让它自动发现。
执行过 connect 之后,后续所有命令都会自动指向这个应用,不用再重复带端口。
# 连接到指定端口
$ chrome-use connect 9222
# 或在每条命令上用 --cdp
$ chrome-use --cdp 9222 snapshot -i
# 自动发现一个正在运行的 Chromium 系应用
$ chrome-use --auto-connect snapshot -i
窗口与标签管理
Electron 应用常常有多个窗口或 webview。用 tab 命令列出并切换这些目标。
注意标签 id 是 t1、t2 这样的形式,不接受纯整数。
# 列出所有可用目标(窗口、webview 等)
$ chrome-use tab
# 按 id 切换到指定标签(t1、t2 …;不接受整数)
$ chrome-use tab t2
# 按 URL 模式切换
$ chrome-use tab --url "*settings*"
Webview 支持
Electron 的 <webview> 元素会被自动发现,可以像普通页面一样操作。
它们在 tab 列表里以独立目标出现,类型为 type: "webview"。
# 连接到正在运行的 Electron 应用
$ chrome-use connect 9222
# 列出目标 —— webview 会和 page 一起出现
$ chrome-use tab
# [t1] [page] Slack - Main Window https://app.slack.com/
# [t2] [webview] Embedded Content https://example.com/widget
# 切换到某个 webview
$ chrome-use tab t2
# 正常交互
$ chrome-use snapshot -i
$ chrome-use click @e3
$ chrome-use screenshot webview.png
tab 列表里就能驱动。
常见模式
下面是几种在桌面应用上反复用到的组合。全部沿用网页自动化里熟悉的动词。
探索并导航
$ open -a "Slack" --args --remote-debugging-port=9222
$ sleep 3 # 等应用启动
$ chrome-use connect 9222
$ chrome-use snapshot -i
# 读快照输出,识别 UI 元素
$ chrome-use click @e10 # 跳转到某个区域
$ chrome-use snapshot -i # 导航后重新 snapshot
截图
$ chrome-use connect 9222
$ chrome-use screenshot app-state.png
$ chrome-use screenshot --full full-app.png
$ chrome-use screenshot --annotate annotated-app.png
提取数据
$ chrome-use connect 9222
$ chrome-use snapshot -i
$ chrome-use get text @e5
$ chrome-use snapshot --json > app-state.json
填表单
$ chrome-use connect 9222
$ chrome-use snapshot -i
$ chrome-use fill @e3 "search query"
$ chrome-use press Enter
$ chrome-use wait 1000
$ chrome-use snapshot -i
同时驱动多个应用
用命名会话就能同时控制多个 Electron 应用,彼此互不干扰。详见 会话与并发。
# 连接 Slack
$ chrome-use --session slack connect 9222
# 连接 VS Code
$ chrome-use --session vscode connect 9223
# 各自独立交互
$ chrome-use --session slack snapshot -i
$ chrome-use --session vscode snapshot -i
配色方案(深色模式)
通过 CDP 连接时,默认配色方案可能是 light。如果想保留应用的深色模式,用 --color-scheme dark,
或用环境变量全局设置。
# 单条命令保留深色
$ chrome-use connect 9222
$ chrome-use --color-scheme dark snapshot -i
# 或全局设置
$ AGENT_BROWSER_COLOR_SCHEME=dark chrome-use connect 9222
排障
“Connection refused” / 连不上
- 确认应用是带
--remote-debugging-port=NNNN启动的 - 如果应用之前已经在运行,先退出再带 flag 重启
- 检查端口没被别的进程占用:
lsof -i :9222
应用起来了但 connect 失败
- 启动后等几秒再连(
sleep 3) - 有些应用需要时间初始化它的 webview
元素没出现在 snapshot 里
- 应用可能用了多个 webview。用
chrome-use tab列出目标,切到正确的那个
输入框里打不了字
- 用
chrome-use keyboard type "text"在当前焦点处直接打字,不用选择器 - 有些 Electron 应用用了自定义输入组件——用
chrome-use keyboard inserttext "text"绕过按键事件
支持的应用
只要是用 Electron 构建的应用都支持 --remote-debugging-port,都能被 chrome-use 自动化。常见的包括: