mcpField
E
electron

electron

github.com/fcakyon生产力1.2k48 次安装今天更新
代码仓库

关于 electron

使用 agent-browser 自动化 Electron 桌面应用的技能。它通过 Chromium 的 CDP 连接，采用网页自动化中的快照与交互流程，并支持应用窗口和 webview。

主要功能

  1. 01通过 CDP 端口连接
  2. 02用快照检查界面
  3. 03通过元素引用进行交互
  4. 04列出并切换标签页或 webview
  5. 05控制多个命名会话

适用场景

  1. 01自动化 Slack 或 VS Code 工作流程
  2. 02检查并浏览应用界面
  3. 03截取屏幕或提取文本
  4. 04填写 Electron 应用中的表单

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/fcakyon/claude-codex-settings --skill electron

安装后在 Claude Code 中输入/electron确认已加载。

详细介绍

Electron 应用自动化

使用 agent-browser 自动化任意 Electron 桌面应用。Electron 应用基于 Chromium 构建，并会开放一个 Chrome DevTools Protocol（CDP）端口，agent-browser 可连接该端口，从而使用与网页相同的快照-交互工作流。

核心工作流

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

# Connect agent-browser to the app
agent-browser connect 9222

# Standard workflow from here
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 标志。

连接

# Connect to a specific port
agent-browser connect 9222

# Or use --cdp on each command
agent-browser --cdp 9222 snapshot -i

# Auto-discover a running Chromium-based app
agent-browser --auto-connect snapshot -i

执行 connect 后，后续所有命令都会以已连接的应用为目标，无需使用 --cdp。

标签页管理

Electron 应用通常包含多个窗口或 webview。使用标签页命令列出并切换到相应窗口或 webview：

# List all available targets (windows, webviews, etc.)
agent-browser tab

# Switch to a specific tab by index
agent-browser tab 2

# Switch by URL pattern
agent-browser tab --url "*settings*"

Webview 支持

Electron <webview> 元素会自动发现，并可像普通页面一样进行控制。Webview 会以独立目标的形式显示在标签页列表中，且 type: "webview"：

# Connect to running Electron app
agent-browser connect 9222

# List targets -- webviews appear alongside pages
agent-browser tab
# Example output:
#   0: [page]    Slack - Main Window     https://app.slack.com/
#   1: [webview] Embedded Content        https://example.com/widget

# Switch to a webview
agent-browser tab 1

# Interact with the webview normally
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  # Wait for app to start
agent-browser connect 9222
agent-browser snapshot -i
# Read the snapshot output to identify UI elements
agent-browser click @e10  # Navigate to a section
agent-browser snapshot -i  # Re-snapshot after navigation
对桌面应用截图
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 应用：

# Connect to Slack
agent-browser --session slack connect 9222

# Connect to VS Code
agent-browser --session vscode connect 9223

# Interact with each independently
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

故障排除

“连接被拒绝”或“无法连接”
  • 确认应用是使用 --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 自动化。

评论

支持 Markdown