본문으로 건너뛰기
cccskills
무료GitHub에 공개

electron

Automate Electron desktop apps with agent-browser through CDP, a browser debugging connection. Click controls, enter text, extract content, and capture screenshots while switching between app windows or embedded pages for routine work and testing.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

원문원문 설명 보기

Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app, automate a desktop app, connect to a running app, control a native app, or test an Electron application. Triggers include "automate Slack app", "control VS Code", "interact with Discord app", "test this Electron app", "connect to desktop app", or any task requiring automation of a native Electron application.

설치 방법 보기

이럴 때 유용합니다

  • Automating clicks and form entry in desktop apps
  • Extracting text and screen information from apps
  • Capturing screenshots for application testing
  • Switching between multiple apps and embedded pages

포함된 파일(1)

  • SKILL.md6.6 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Electron App Automation

Automate any Electron desktop app using agent-browser. Electron apps are built on Chromium and expose a Chrome DevTools Protocol (CDP) port that agent-browser can connect to, enabling the same snapshot-interact workflow used for web pages.

Core Workflow

  1. Launch the Electron app with remote debugging enabled
  2. Connect agent-browser to the CDP port
  3. Snapshot to discover interactive elements
  4. Interact using element refs
  5. Re-snapshot after navigation or state changes
# 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

Launching Electron Apps with CDP

Every Electron app supports the --remote-debugging-port flag since it's built into 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

Important: If the app is already running, quit it first, then relaunch with the flag. The --remote-debugging-port flag must be present at launch time.

Connecting

# 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

After connect, all subsequent commands target the connected app without needing --cdp.

Tab Management

Electron apps often have multiple windows or webviews. Use tab commands to list and switch between them:

# 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 Support

Electron <webview> elements are automatically discovered and can be controlled like regular pages. Webviews appear as separate targets in the tab list with 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

Note: Webview support works via raw CDP connection.

Common Patterns

Inspect and Navigate an App

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

Take Screenshots of Desktop Apps

agent-browser connect 9222
agent-browser screenshot app-state.png
agent-browser screenshot --full full-app.png
agent-browser screenshot --annotate annotated-app.png

Extract Data from a Desktop App

agent-browser connect 9222
agent-browser snapshot -i
agent-browser get text @e5
agent-browser snapshot --json > app-state.json

Fill Forms in Desktop Apps

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

Run Multiple Apps Simultaneously

Use named sessions to control multiple Electron apps at the same time:

# 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

Color Scheme

The default color scheme when connecting via CDP may be light. To preserve dark mode:

agent-browser connect 9222
agent-browser --color-scheme dark snapshot -i

Or set it globally:

AGENT_BROWSER_COLOR_SCHEME=dark agent-browser connect 9222

Troubleshooting

"Connection refused" or "Cannot connect"

  • Make sure the app was launched with --remote-debugging-port=NNNN
  • If the app was already running, quit and relaunch with the flag
  • Check that the port isn't in use by another process: lsof -i :9222

App launches but connect fails

  • Wait a few seconds after launch before connecting (sleep 3)
  • Some apps take time to initialize their webview

Elements not appearing in snapshot

  • The app may use multiple webviews. Use agent-browser tab to list targets and switch to the right one

Cannot type in input fields

  • Try agent-browser keyboard type "text" to type at the current focus without a selector
  • Some Electron apps use custom input components; use agent-browser keyboard inserttext "text" to bypass key events

Supported Apps

Any app built on Electron works, including:

  • Communication: Slack, Discord, Microsoft Teams, Signal, Telegram Desktop
  • Development: VS Code, GitHub Desktop, Postman, Insomnia
  • Design: Figma, Notion, Obsidian
  • Media: Spotify, Tidal
  • Productivity: Todoist, Linear, 1Password

If an app is built with Electron, it supports --remote-debugging-port and can be automated with agent-browser.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Set up a browser automation command-line tool for agents to navigate sites, fill forms, extract data, and capture screenshots. It also points to dedicated guides for app testing, Electron desktop apps, and cloud browsers.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Automate form entry and navigation on websites
  • Extract page data and capture screenshots
  • Explore web apps to find bugs and quality issues
vercel-labs/agent-browser4.4만2026년 10월 19일 업데이트

agentcore

무료

Automate page interactions and screenshots with agent-browser running in AWS Bedrock AgentCore cloud browsers. Use standard browser commands, preserve login state across sessions with persistent profiles, and watch active sessions through an AWS Console link.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Run browser automation on AWS
  • Reuse login state across browser sessions
  • Watch a cloud browser session live
vercel-labs/agent-browser4.4만2026년 10월 19일 업데이트

core

무료

Follow practical agent-browser workflows to inspect pages, click elements, fill forms, extract information, and take screenshots. The guide also covers waiting for page changes, saving login state, and keeping separate browser sessions for different tasks.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Complete website forms and confirm the resulting page
  • Extract table text and link URLs from pages
  • Capture full-page or annotated screenshots
vercel-labs/agent-browser4.4만2026년 10월 19일 업데이트

Record a website's browser traffic, identify its internal API, and generate a script, command-line tool, or library that calls it directly. Turn recorded search and browsing flows into reusable functions, then verify them against live responses.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Build a command-line tool for a website
  • Turn repeated searches into direct API calls
  • Inspect request and response structures from recordings
vercel-labs/agent-browser4.4만2026년 10월 19일 업데이트

dogfood

무료

Explore a web application as a user to find reproducible bugs and usability problems. Produce a structured report with reproduction steps, screenshots, and videos for interactive issues, giving responsible teams concrete evidence to investigate.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Checking a web app's quality before release
  • Testing forms and common user workflows
  • Finding confusing interfaces and visual problems
vercel-labs/agent-browser4.4만2026년 10월 19일 업데이트

Access and test protected Vercel deployments with agent-browser using an existing Vercel identity and a short-lived authentication token. Keep deployment protection enabled while diagnosing login redirects, environment access mismatches, and application authentication errors.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Testing a protected Preview deployment
  • Diagnosing Vercel login redirects and protection errors
  • Identifying access rules needed for Production testing
vercel-labs/agent-browser4.4만2026년 10월 19일 업데이트

vercel-labs의 스킬 모두 보기

이 스킬의 문제 신고