{"id":"electron","name":"electron","summary":"Chrome DevToolsプロトコルを使ったエージェントブラウザを使ってElectronデスクトップアプリ(VS Code、Slack、Discord、Figma、Notion、Spotifyなど)を自動化できます。","body":"# Electron App Automation\n\nAutomate 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.\n\n## Core Workflow\n\n1. **Launch** the Electron app with remote debugging enabled\n2. **Connect** agent-browser to the CDP port\n3. **Snapshot** to discover interactive elements\n4. **Interact** using element refs\n5. **Re-snapshot** after navigation or state changes\n\n```bash\n# Launch an Electron app with remote debugging\nopen -a \"Slack\" --args --remote-debugging-port=9222\n\n# Connect agent-browser to the app\nagent-browser connect 9222\n\n# Standard workflow from here\nagent-browser snapshot -i\nagent-browser click @e5\nagent-browser screenshot slack-desktop.png\n```\n\n## Launching Electron Apps with CDP\n\nEvery Electron app supports the `--remote-debugging-port` flag since it's built into Chromium.\n\n### macOS\n\n```bash\n# Slack\nopen -a \"Slack\" --args --remote-debugging-port=9222\n\n# VS Code\nopen -a \"Visual Studio Code\" --args --remote-debugging-port=9223\n\n# Discord\nopen -a \"Discord\" --args --remote-debugging-port=9224\n\n# Figma\nopen -a \"Figma\" --args --remote-debugging-port=9225\n\n# Notion\nopen -a \"Notion\" --args --remote-debugging-port=9226\n\n# Spotify\nopen -a \"Spotify\" --args --remote-debugging-port=9227\n```\n\n### Linux\n\n```bash\nslack --remote-debugging-port=9222\ncode --remote-debugging-port=9223\ndiscord --remote-debugging-port=9224\n```\n\n### Windows\n\n```bash\n\"C:\\Users\\%USERNAME%\\AppData\\Local\\slack\\slack.exe\" --remote-debugging-port=9222\n\"C:\\Users\\%USERNAME%\\AppData\\Local\\Programs\\Microsoft VS Code\\Code.exe\" --remote-debugging-port=9223\n```\n\n**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.\n\n## Connecting\n\n```bash\n# Connect to a specific port\nagent-browser connect 9222\n\n# Or use --cdp on each command\nagent-browser --cdp 9222 snapshot -i\n\n# Auto-discover a running Chromium-based app\nagent-browser --auto-connect snapshot -i\n```\n\nAfter `connect`, all subsequent commands target the connected app without needing `--cdp`.\n\n## Tab Management\n\nElectron apps often have multiple windows or webviews. Use tab commands to list and switch between them:\n\n```bash\n# List all available targets (windows, webviews, etc.)\nagent-browser tab\n\n# Switch to a specific tab by index\nagent-browser tab 2\n\n# Switch by URL pattern\nagent-browser tab --url \"*settings*\"\n```\n\n## Webview Support\n\nElectron `<webview>` elements are automatically discovered and can be controlled like regular pages. Webviews appear as separate targets in the tab list with `type: \"webview\"`:\n\n```bash\n# Connect to running Electron app\nagent-browser connect 9222\n\n# List targets -- webviews appear alongside pages\nagent-browser tab\n# Example output:\n#   0: [page]    Slack - Main Window     https://app.slack.com/\n#   1: [webview] Embedded Content        https://example.com/widget\n\n# Switch to a webview\nagent-browser tab 1\n\n# Interact with the webview normally\nagent-browser snapshot -i\nagent-browser click @e3\nagent-browser screenshot webview.png\n```\n\n**Note:** Webview support works via raw CDP connection.\n\n## Common Patterns\n\n### Inspect and Navigate an App\n\n```bash\nopen -a \"Slack\" --args --remote-debugging-port=9222\nsleep 3  # Wait for app to start\nagent-browser connect 9222\nagent-browser snapshot -i\n# Read the snapshot output to identify UI elements\nagent-browser click @e10  # Navigate to a section\nagent-browser snapshot -i  # Re-snapshot after navigation\n```\n\n### Take Screenshots of Desktop Apps\n\n```bash\nagent-browser connect 9222\nagent-browser screenshot app-state.png\nagent-browser screenshot --full full-app.png\nagent-browser screenshot --annotate annotated-app.png\n```\n\n### Extract Data from a Desktop App\n\n```bash\nagent-browser connect 9222\nagent-browser snapshot -i\nagent-browser get text @e5\nagent-browser snapshot --json > app-state.json\n```\n\n### Fill Forms in Desktop Apps\n\n```bash\nagent-browser connect 9222\nagent-browser snapshot -i\nagent-browser fill @e3 \"search query\"\nagent-browser press Enter\nagent-browser wait 1000\nagent-browser snapshot -i\n```\n\n### Run Multiple Apps Simultaneously\n\nUse named sessions to control multiple Electron apps at the same time:\n\n```bash\n# Connect to Slack\nagent-browser --session slack connect 9222\n\n# Connect to VS Code\nagent-browser --session vscode connect 9223\n\n# Interact with each independently\nagent-browser --session slack snapshot -i\nagent-browser --session vscode snapshot -i\n```\n\n## Color Scheme\n\nThe default color scheme when connecting via CDP may be `light`. To preserve dark mode:\n\n```bash\nagent-browser connect 9222\nagent-browser --color-scheme dark snapshot -i\n```\n\nOr set it globally:\n\n```bash\nAGENT_BROWSER_COLOR_SCHEME=dark agent-browser connect 9222\n```\n\n## Troubleshooting\n\n### \"Connection refused\" or \"Cannot connect\"\n\n- Make sure the app was launched with `--remote-debugging-port=NNNN`\n- If the app was already running, quit and relaunch with the flag\n- Check that the port isn't in use by another process: `lsof -i :9222`\n\n### App launches but connect fails\n\n- Wait a few seconds after launch before connecting (`sleep 3`)\n- Some apps take time to initialize their webview\n\n### Elements not appearing in snapshot\n\n- The app may use multiple webviews. Use `agent-browser tab` to list targets and switch to the right one\n\n### Cannot type in input fields\n\n- Try `agent-browser keyboard type \"text\"` to type at the current focus without a selector\n- Some Electron apps use custom input components; use `agent-browser keyboard inserttext \"text\"` to bypass key events\n\n## Supported Apps\n\nAny app built on Electron works, including:\n\n- **Communication:** Slack, Discord, Microsoft Teams, Signal, Telegram Desktop\n- **Development:** VS Code, GitHub Desktop, Postman, Insomnia\n- **Design:** Figma, Notion, Obsidian\n- **Media:** Spotify, Tidal\n- **Productivity:** Todoist, Linear, 1Password\n\nIf an app is built with Electron, it supports `--remote-debugging-port` and can be automated with agent-browser.","author":"@fcakyon","ownerProfile":null,"authorContacts":null,"sourceUrl":"https://github.com/fcakyon/claude-codex-settings/tree/main/plugins/agent-browser/skills/electron","license":"Apache-2.0","category":"testing","lang":"en","tokens":1505,"stars":0,"calls30d":1,"claimed":false,"visibility":"public","origin":"crawler","version":"0.1.0","createdAt":"2026-08-22","updatedAt":"2026-08-22","files":[],"requires":{"mcp":[],"tools":["Bash(agent-browser:*)","Bash(npx agent-browser:*)"]},"safety":{"flags":[],"scannedAt":"2026-08-22","hasScripts":false,"networkEndpoints":["app.slack.com"]}}