Agent Skills Finder
V

electron

作者 vercel-labs

通过 agent-browser 和 Chrome DevTools Protocol（CDP）自动化现有的 Electron 桌面应用，例如 VS Code、Slack、Discord、Figma、Notion 和 Spotify。该技能帮助你连接到正在运行的 Electron 应用，获取快照，并与其 UI 交互，用于端到端的桌面与流程自动化。

Stars2.5万
收藏0
评论0
分类桌面自动化
安装命令
npx skills add https://github.com/vercel-labs/agent-browser --skill electron
ElectronDesktopAutomationCli
概览

Overview

What the electron skill does

electron 技能让 agent 能够通过 agent-browser 和 Chrome DevTools Protocol (CDP) 来自动化现有的 Electron 桌面应用。许多常用工具如 VS Code、Slack、Discord、Figma、Notion 和 Spotify 都是基于 Electron 构建的，并在内部运行 Chromium。只要暴露出 DevTools 端口，就可以像控制浏览器中的网站一样控制它们。

使用这个技能，agent 可以：

  • 启动启用了远程调试的 Electron 应用
  • 通过 agent-browser 连接到应用的 CDP 端口
  • 获取当前 UI 的 快照
  • 使用稳定的元素引用对元素进行交互（点击、输入、导航）
  • 在状态变化后重新快照，以持续推进多步骤流程

Who this skill is for

如果你有以下需求，可以考虑使用 electron 技能：

  • 需要在某个 Electron 桌面应用内部进行流程自动化（例如发送 Slack 消息、在 Notion 工作区中导航、触发 VS Code 命令）
  • 希望在 端到端测试 或回归检查中纳入 Electron 应用
  • 需要在 跨应用流程自动化 中，把 Electron 应用和 Web 自动化结合起来
  • 更偏好基于 CLI 的 CDP 自动化，而不是 GUI 录制器或封闭的专有 API

它特别适合已经习惯：

  • 在 macOS、Linux 中通过 Bash 运行 shell 命令的人和团队
  • 使用 agent-browser 或其他类似 CDP 工具的人
  • 更倾向把 Electron 应用当作“浏览器目标”，而不是直接脚本化原生 OS 控件的人

When electron is not a good fit

electron 技能不适用于以下情况：

  • 你要控制的应用不是 Electron 应用，并且没有暴露 DevTools 端口
  • 你需要在应用窗口之外进行深层 OS 级交互（系统对话框、非 Electron 渲染的文件选择器等）
  • 你是想开发 Electron 应用（此技能针对于自动化现有应用，而非开发新应用）
  • 你需要完全零终端、纯 GUI 的自动化工具

在这些场景下，你可能需要采用其他桌面自动化或 OS 原生脚本方案。

How the automation model works

在底层，electron 技能采用与 agent-browser Web 自动化相同的“snapshot / interact（快照 / 交互）”模式：

  1. 使用 --remote-debugging-port 启动 Electron 应用，使其暴露 CDP
  2. 从 agent-browser 连接到该端口
  3. 通过 Snapshot 捕获当前 DOM / 可访问性树
  4. 使用 agent-browser 的命令和元素引用与 UI 元素进行 Interact
  5. 在每次重要状态或导航变化后再次 Re-snapshot

由于基于 CDP，agent 看到的应用与浏览器页面非常相似，可以在多个会话中执行可重复、可脚本化的流程。

How to Use

1. Install the electron skill

要在 agent 环境中使用 electron 技能，需要从 vercel-labs/agent-browser 仓库安装：

npx skills add https://github.com/vercel-labs/agent-browser --skill electron

该命令会拉取 electron 技能定义，并允许 agent 使用：

  • Bash(agent-browser:*)
  • Bash(npx agent-browser:*)

你还需要安装好 agent-browser，或通过 npx 可用，以便运行该技能所依赖的命令。

2. Confirm prerequisites

在运行依赖 electron 技能的自动化流程之前，请确认：

  • 你有 macOS 或 Linux，并可以在 shell 中运行 open、bash 或等价命令
  • 目标应用确实是 Electron 应用（例如 Slack、VS Code、Discord、Figma、Notion、Spotify 等）
  • 你能够使用 --remote-debugging-port 参数启动该应用（这是 Chromium/Electron 的内置能力）

如果无法使用该参数启动应用，agent 将无法通过 CDP 建立连接。

3. Launch an Electron app with CDP enabled

关键是使用一个 远程调试端口 来启动应用：

# Example: Slack on macOS
open -a "Slack" --args --remote-debugging-port=9222

同样的模式可以用在其他 Electron 应用上，只需根据需要调整应用名称。

一旦启动成功，应用会在指定端口（例如 9222）上暴露 CDP endpoint。

4. Connect agent-browser to the running app

应用在远程调试模式下运行后，使用 agent-browser 连接：

agent-browser connect 9222

连接成功后，你就可以对该 Electron 应用窗口运行常规的快照与交互命令。

5. Run the standard snapshot–interact workflow

现在你可以把这个 Electron 应用基本当作一个浏览器页面来操作：

# Discover interactive elements
agent-browser snapshot -i

# Click a specific element reference (example: @e5)
agent-browser click @e5

# Capture a screenshot of the current window
agent-browser screenshot slack-desktop.png

在典型的 agent 流程中，agent 会：

  • 调用 snapshot 以理解当前 UI 状态
  • 根据元素引用（例如 @e5、@e12）选择元素进行点击或输入
  • 在任何重要变化后（导航、弹窗打开/关闭等）再次调用 snapshot

6. Integrate into larger desktop and workflow automation

electron 技能在需要串联多个应用时尤其有用。例如，agent 可以：

  • 从 Chrome 中的 Web 应用获取数据
  • 打开 Slack（Electron），发送格式化的状态消息
  • 切换到 VS Code（Electron）触发构建或运行任务

由于所有操作都通过 CDP 和 agent-browser 进行，你可以从 CLI 编排这些流程，也可以交由基于 LLM 的 agent 自动协同执行。

7. Adapting to your environment

仓库中的示例主要展示通用的 Electron 模式，你需要根据自己的实际环境进行调整，包括：

  • 应用（Slack、Discord、Notion、自研的内部 Electron 工具等）
  • 端口（选择空闲端口；9222 很常见，但并非必须）
  • 操作系统命令（在 macOS 上使用 open，在 Linux 上使用相应的启动命令）

无论如何调整启动命令，都要保留 --remote-debugging-port 参数，这样 electron 技能才能通过 agent-browser 建立连接。

FAQ

Is the electron skill only for Slack and VS Code?

不是。只要是可以通过 --remote-debugging-port 启动的 任意 Electron 应用，electron 技能都可以使用。Slack 和 VS Code 只是常见示例，同样的模式也适用于 Discord、Figma、Notion、Spotify 以及其他很多基于 Electron 的工具。

How does electron know it is talking to an Electron app and not a website?

从自动化的视角看，Electron 应用会暴露出与 Chromium 浏览器相似的 Chrome DevTools Protocol 接口。一旦连接到指定端口，agent-browser 会把目标当作浏览器页面来交互。electron 技能只是默认该端口对应的是 Electron 驱动的 Chromium 实例。

Do I need to modify the Electron app’s source code?

不需要。你无需修改应用的源码，只要在启动现有应用时添加 --remote-debugging-port 参数，暴露 CDP 即可。这同样适用于打包后的商用 Electron 应用，只要操作系统的启动命令支持附加参数即可。

Can the electron skill automate system dialogs or non-Electron windows?

electron 技能专注于通过 CDP 访问的、由 Chromium 支持的 Electron 窗口。OS 原生对话框或非 Electron 窗口通常不会暴露在该接口之下。若需要自动化这些内容，你需要使用其他 OS 级自动化工具。

What commands does the skill rely on?

根据技能元数据，electron 允许使用：

  • Bash(agent-browser:*)
  • Bash(npx agent-browser:*)

这意味着 agent 可以直接或通过 npx 运行 agent-browser 命令，包括 connect、snapshot、click、screenshot 等已支持的子命令。

How do I troubleshoot connection issues on the CDP port?

如果 agent 无法连接，请检查：

  • 应用是否通过 --remote-debugging-port=<port> 启动
  • agent-browser connect 中使用的端口号是否与启动命令一致
  • 是否仅有一个应用实例在运行；关闭多余实例，并使用调试参数重新启动

如果端口被占用或被阻塞，请选择其他可用端口，并同时更新启动命令和连接命令中的端口号。

When should I choose another skill instead of electron?

在以下情况应该考虑使用其他技能：

  • 目标只是普通的 浏览器网站（此时应选择面向浏览器的自动化技能）
  • 你需要进行文件管理、系统偏好设置或非 Electron 应用等 OS 级操作
  • 你的主要工作是构建而不是自动化 Electron 应用

当你希望把现有 Electron 桌面应用作为更大桌面或流程自动化的一部分，并通过 CDP 进行自动化 时，electron 技能的效果最为突出。

评分与评论

暂无评分
分享你的评价
登录后即可为这个技能评分并发表评论。
G
0/10000
最新评论
保存中...