桌面应用 / 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。 跟驱动一个普通网页几乎没有区别。

bash · 一次完整流程
# 带远程调试端口启动 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

bash · 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

bash · Linux
$ slack --remote-debugging-port=9222
$ code --remote-debugging-port=9223
$ discord --remote-debugging-port=9224

Windows

bash · 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 之后,后续所有命令都会自动指向这个应用,不用再重复带端口。

bash · 三种连接方式
# 连接到指定端口
$ chrome-use connect 9222

# 或在每条命令上用 --cdp
$ chrome-use --cdp 9222 snapshot -i

# 自动发现一个正在运行的 Chromium 系应用
$ chrome-use --auto-connect snapshot -i

窗口与标签管理

Electron 应用常常有多个窗口或 webview。用 tab 命令列出并切换这些目标。 注意标签 id 是 t1t2 这样的形式,不接受纯整数

bash · tab
# 列出所有可用目标(窗口、webview 等)
$ chrome-use tab

# 按 id 切换到指定标签(t1、t2 …;不接受整数)
$ chrome-use tab t2

# 按 URL 模式切换
$ chrome-use tab --url "*settings*"

Webview 支持

Electron 的 <webview> 元素会被自动发现,可以像普通页面一样操作。 它们在 tab 列表里以独立目标出现,类型为 type: "webview"

bash · 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
ℹ️ 说明
Webview 支持通过原始 CDP 连接实现——不需要额外配置,只要它出现在 tab 列表里就能驱动。

常见模式

下面是几种在桌面应用上反复用到的组合。全部沿用网页自动化里熟悉的动词。

探索并导航

bash · inspect + navigate
$ 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

截图

bash · screenshot
$ chrome-use connect 9222
$ chrome-use screenshot app-state.png
$ chrome-use screenshot --full full-app.png
$ chrome-use screenshot --annotate annotated-app.png

提取数据

bash · extract
$ chrome-use connect 9222
$ chrome-use snapshot -i
$ chrome-use get text @e5
$ chrome-use snapshot --json > app-state.json

填表单

bash · fill
$ 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 应用,彼此互不干扰。详见 会话与并发

bash · --session
# 连接 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, 或用环境变量全局设置。

bash · color-scheme
# 单条命令保留深色
$ chrome-use connect 9222
$ chrome-use --color-scheme dark snapshot -i

# 或全局设置
$ AGENT_BROWSER_COLOR_SCHEME=dark chrome-use connect 9222

排障

“Connection refused” / 连不上

应用起来了但 connect 失败

元素没出现在 snapshot 里

输入框里打不了字

✅ 两个绕过技巧
  • chrome-use keyboard type "text" 在当前焦点处直接打字,不用选择器
  • 有些 Electron 应用用了自定义输入组件——用 chrome-use keyboard inserttext "text" 绕过按键事件

支持的应用

只要是用 Electron 构建的应用都支持 --remote-debugging-port,都能被 chrome-use 自动化。常见的包括:

💬 通讯

Slack、Discord、Microsoft Teams、Signal、Telegram Desktop

🛠️ 开发

VS Code、GitHub Desktop、Postman、Insomnia

🎨 设计

Figma、Notion、Obsidian

🎵 媒体

Spotify、Tidal

效率

Todoist、Linear、1Password

📖 继续阅读

读取页面 · 核心循环