Communitygithub.com

vercel-labs/electron

使用 agent-browser 通过 Chrome DevTools 协议自动化 Electron 桌面应用(如 VS Code、Slack、Discord、Figma、Notion、Spotify 等)。当用户需要与 Electron 应用交互、自动化桌面应用、连接到正在运行的应用、控制原生应用或测试 Electron 应用时使用。触发词包括“自动化 Slack 应用”、“控制 VS Code”、“与 Discord 应用交互”、“测试此 Electron 应用”、“连接到桌面应用”或任何需要自动化原生 Electron 应用的任务。

electron 是什么?

该技能提供了一套完整的 Electron 桌面应用自动化方案,利用 agent-browser 工具通过 Chrome DevTools 协议(CDP)与任何基于 Chromium 的 Electron 应用进行交互。它支持 macOS、Linux 和 Windows 平台,覆盖了 Slack、VS Code、Discord、Figma、Notion、Spotify 等常见应用。核心工作流包括:使用 `--remote-debugging-port` 标志启动应用、连接 agent-browser 到 CDP 端口、通过快照发现交互元素、使用元素引用进行点击、输入等操作,以及在导航或状态变化后重新快照。技能还提供了标签页管理、多应用会话、Webview 支持、截图、数据提取和表单填写等高级功能,并包含详细的故障排除指南。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vercel-labs/agent-browser/tree/main/skill-data/electron

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Electron 应用自动化

使用 agent-browser 自动化任何 Electron 桌面应用。Electron 应用基于 Chromium 构建,并公开了一个 Chrome DevTools 协议 (CDP) 端口,agent-browser 可以连接到该端口,从而实现对网页的相同快照-交互工作流。

核心工作流

  1. 启动启用了远程调试的 Electron 应用
  2. 连接 agent-browser 到 CDP 端口
  3. 快照以发现可交互元素
  4. 交互使用元素引用
  5. 重新快照在导航或状态更改后
# 使用远程调试启动 Electron 应用
open -a "Slack" --args --remote-debugging-port=9222

# 将 agent-browser 连接到应用
agent-browser connect 9222

# 从这里开始标准工作流
agent-browser snapshot -i
agent-browser click @e5
agent-browser screenshot slack-desktop.png

使用 CDP 启动 Electron 应用

每个 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 标志必须在启动时存在。

连接

# 连接到特定端口
agent-browser connect 9222

# 或在每个命令上使用 --cdp
agent-browser --cdp 9222 snapshot -i

# 自动发现正在运行的基于 Chromium 的应用
agent-browser --auto-connect snapshot -i

connect 之后,所有后续命令都针对已连接的应用,无需再使用 --cdp。

标签页管理

Electron 应用通常有多个窗口或 webview。使用标签页命令列出和切换:

# 列出所有可用目标(窗口、webview 等)
agent-browser tab

# 按索引切换到特定标签页
agent-browser tab 2

# 按 URL 模式切换
agent-browser tab --url "*settings*"

Webview 支持

Electron <webview> 元素会被自动发现,并且可以像普通页面一样控制。Webview 在标签页列表中显示为单独的目标,类型为 "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 连接工作。

常见模式

检查和导航应用

open -a "Slack" --args --remote-debugging-port=9222
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

在桌面应用中填写表单

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 应用:

# 连接到 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_SCHEME=dark agent-browser connect 9222

故障排除

“Connection refused” 或 “Cannot connect”

  • 确保应用已使用 --remote-debugging-port=NNNN 启动
  • 如果应用已在运行,请退出并使用该标志重新启动
  • 检查端口是否被其他进程占用:lsof -i :9222

应用启动但连接失败

  • 启动后等待几秒再连接(sleep 3)
  • 某些应用需要时间来初始化其 webview

元素未在快照中显示

  • 应用可能使用了多个 webview。使用 agent-browser tab 列出目标并切换到正确的目标

无法在输入字段中键入

  • 尝试使用 agent-browser keyboard type "text" 在当前焦点处键入文本,无需选择器
  • 某些 Electron 应用使用自定义输入组件;使用 agent-browser keyboard inserttext "text" 绕过按键事件

支持的应用

任何基于 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 进行自动化。

Individual skills in this repo

This repo contains 8 individual skills — each has its own dedicated page.

agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to

vercel-labs/agentcore

Run agent-browser on AWS Bedrock AgentCore cloud browsers. Use when the user wants to use AgentCore, run browser automation on AWS, use a cloud browser with AWS credentials, or needs a managed browser session backed by AWS infrastructure. Triggers include "use agentcore", "run on AWS", "cloud browser with AWS", "bedrock browser", "agentcore session", or any task requiring AWS-hosted browser automation.

vercel-labs/derive-client

Reverse-engineer a website's internal API by recording browser traffic into a HAR file, then generate a standalone client or CLI that calls the endpoints directly, with no browser needed after the first recording. Use when asked to "derive a client", "build a CLI for <site>", "reverse engineer this site's API", "record network requests", "turn this site into an API", or when the same site will be automated repeatedly and direct HTTP calls would beat driving the browser every time.

vercel-labs/dogfood

Systematically explore and test a web application to find bugs, UX issues, and other problems. Use when asked to "dogfood", "QA", "exploratory test", "find issues", "bug hunt", "test this app/site/platform", or review the quality of a web application. Produces a structured report with full reproduction evidence -- step-by-step screenshots, repro videos, and detailed repro steps for every issue -- so findings can be handed directly to the responsible teams.

vercel-labs/protected-vercel-deployments

Access and test Vercel deployments protected by Vercel Authentication, SSO, or Deployment Protection with agent-browser. Use when a preview or production URL redirects to a Vercel login page, returns a protection 401 or 403, or needs short-lived Trusted Sources OIDC authentication instead of a static bypass secret or public exception.

vercel-labs/slack

Interact with Slack workspaces using browser automation. Use when the user needs to check unread channels, navigate Slack, send messages, extract data, find information, search conversations, or automate any Slack task. Triggers include "check my Slack", "what channels have unreads", "send a message to", "search Slack for", "extract from Slack", "find who said", or any task requiring programmatic Slack interaction.

vercel-labs/vercel-sandbox

Run agent-browser + Chrome inside Vercel Sandbox microVMs for browser automation from any Vercel-deployed app. Use when the user needs browser automation in a Vercel app (Next.js, SvelteKit, Nuxt, Remix, Astro, etc.), wants to run headless Chrome without binary size limits, needs persistent browser sessions across commands, or wants ephemeral isolated browser environments. Triggers include "Vercel Sandbox browser", "microVM Chrome", "agent-browser in sandbox", "browser automation on Vercel", or any task requiring Chrome in a Vercel Sandbox.

vercel-labs/webmcp-gen

Build and validate experimental WebMCP tools for an existing web page. Use when an agent needs to expose a site's real workflows as page tools, create webmcp.init.js, define deterministic checks, or compare WebMCP with accessibility-tree automation.

相关技能