Electron

1---2name: electron3description: 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.4allowed-tools: Bash(agent-browser:*), Bash(npx agent-browser:*)5---6 7# Electron App Automation8 9Automate 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.10 11## Core Workflow12 131. **Launch** the Electron app with remote debugging enabled142. **Connect** agent-browser to the CDP port153. **Snapshot** to discover interactive elements164. **Interact** using element refs175. **Re-snapshot** after navigation or state changes18 19```bash20# Launch an Electron app with remote debugging21open -a "Slack" --args --remote-debugging-port=922222 23# Connect agent-browser to the app24agent-browser connect 922225 26# Standard workflow from here27agent-browser snapshot -i28agent-browser click @e529agent-browser screenshot slack-desktop.png30```31 32## Launching Electron Apps with CDP33 34Every Electron app supports the `--remote-debugging-port` flag since it's built into Chromium.35 36### macOS37 38```bash39# Slack40open -a "Slack" --args --remote-debugging-port=922241 42# VS Code43open -a "Visual Studio Code" --args --remote-debugging-port=922344 45# Discord46open -a "Discord" --args --remote-debugging-port=922447 48# Figma49open -a "Figma" --args --remote-debugging-port=922550 51# Notion52open -a "Notion" --args --remote-debugging-port=922653 54# Spotify55open -a "Spotify" --args --remote-debugging-port=922756```57 58### Linux59 60```bash61slack --remote-debugging-port=922262code --remote-debugging-port=922363discord --remote-debugging-port=922464```65 66### Windows67 68```bash69"C:\Users\%USERNAME%\AppData\Local\slack\slack.exe" --remote-debugging-port=922270"C:\Users\%USERNAME%\AppData\Local\Programs\Microsoft VS Code\Code.exe" --remote-debugging-port=922371```72 73**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.74 75## Connecting76 77```bash78# Connect to a specific port79agent-browser connect 922280 81# Or use --cdp on each command82agent-browser --cdp 9222 snapshot -i83 84# Auto-discover a running Chromium-based app85agent-browser --auto-connect snapshot -i86```87 88After `connect`, all subsequent commands target the connected app without needing `--cdp`.89 90## Tab Management91 92Electron apps often have multiple windows or webviews. Use tab commands to list and switch between them:93 94```bash95# List all available targets (windows, webviews, etc.)96agent-browser tab97 98# Switch to a specific tab by index99agent-browser tab 2100 101# Switch by URL pattern102agent-browser tab --url "*settings*"103```104 105## Webview Support106 107Electron `<webview>` elements are automatically discovered and can be controlled like regular pages. Webviews appear as separate targets in the tab list with `type: "webview"`:108 109```bash110# Connect to running Electron app111agent-browser connect 9222112 113# List targets -- webviews appear alongside pages114agent-browser tab115# Example output:116#   0: [page]    Slack - Main Window     https://app.slack.com/117#   1: [webview] Embedded Content        https://example.com/widget118 119# Switch to a webview120agent-browser tab 1121 122# Interact with the webview normally123agent-browser snapshot -i124agent-browser click @e3125agent-browser screenshot webview.png126```127 128**Note:** Webview support works via raw CDP connection.129 130## Common Patterns131 132### Inspect and Navigate an App133 134```bash135open -a "Slack" --args --remote-debugging-port=9222136sleep 3  # Wait for app to start137agent-browser connect 9222138agent-browser snapshot -i139# Read the snapshot output to identify UI elements140agent-browser click @e10  # Navigate to a section141agent-browser snapshot -i  # Re-snapshot after navigation142```143 144### Take Screenshots of Desktop Apps145 146```bash147agent-browser connect 9222148agent-browser screenshot app-state.png149agent-browser screenshot --full full-app.png150agent-browser screenshot --annotate annotated-app.png151```152 153### Extract Data from a Desktop App154 155```bash156agent-browser connect 9222157agent-browser snapshot -i158agent-browser get text @e5159agent-browser snapshot --json > app-state.json160```161 162### Fill Forms in Desktop Apps163 164```bash165agent-browser connect 9222166agent-browser snapshot -i167agent-browser fill @e3 "search query"168agent-browser press Enter169agent-browser wait 1000170agent-browser snapshot -i171```172 173### Run Multiple Apps Simultaneously174 175Use named sessions to control multiple Electron apps at the same time:176 177```bash178# Connect to Slack179agent-browser --session slack connect 9222180 181# Connect to VS Code182agent-browser --session vscode connect 9223183 184# Interact with each independently185agent-browser --session slack snapshot -i186agent-browser --session vscode snapshot -i187```188 189## Color Scheme190 191The default color scheme when connecting via CDP may be `light`. To preserve dark mode:192 193```bash194agent-browser connect 9222195agent-browser --color-scheme dark snapshot -i196```197 198Or set it globally:199 200```bash201AGENT_BROWSER_COLOR_SCHEME=dark agent-browser connect 9222202```203 204## Troubleshooting205 206### "Connection refused" or "Cannot connect"207 208- Make sure the app was launched with `--remote-debugging-port=NNNN`209- If the app was already running, quit and relaunch with the flag210- Check that the port isn't in use by another process: `lsof -i :9222`211 212### App launches but connect fails213 214- Wait a few seconds after launch before connecting (`sleep 3`)215- Some apps take time to initialize their webview216 217### Elements not appearing in snapshot218 219- The app may use multiple webviews. Use `agent-browser tab` to list targets and switch to the right one220 221### Cannot type in input fields222 223- Try `agent-browser keyboard type "text"` to type at the current focus without a selector224- Some Electron apps use custom input components; use `agent-browser keyboard inserttext "text"` to bypass key events225 226## Supported Apps227 228Any app built on Electron works, including:229 230- **Communication:** Slack, Discord, Microsoft Teams, Signal, Telegram Desktop231- **Development:** VS Code, GitHub Desktop, Postman, Insomnia232- **Design:** Figma, Notion, Obsidian233- **Media:** Spotify, Tidal234- **Productivity:** Todoist, Linear, 1Password235 236If an app is built with Electron, it supports `--remote-debugging-port` and can be automated with agent-browser.