$ show different-ai/opencode-browser
The OpenCode Browser plugin provides browser automation capabilities through direct connections to the Chrome DevTools Protocol (CDP). It exposes a set of tools (browser_list, browser_navigate, browser_snapshot, browser_click, browser_fill, browser_eval, browser_screenshot) that allow an AI agent to control a browser by specifying the browser's debugging endpoint (browser_url) and optionally a target ID. The plugin consists of three main parts: the plugin interface (src/plugin.ts), a lightweight CDP client over WebSocket (src/lib/cdp.ts), and accessibility tree snapshot utilities with unique element IDs for interaction (src/lib/snapshot.ts). The CDP client handles connection, message exchange, and event handling, while the snapshot utility processes the accessibility tree to generate a tree of nodes with stable UIDs for use in click and fill operations.
The LLM identified 2 files worth highlighting for reuse:
A self-contained WebSocket-based client for the Chrome DevTools Protocol. It handles connection management, request/response correlation via message IDs, event subscription, and automatic handling of proxied endpoints by rewriting WebSocket URLs. Demonstrates clean separation of concerns and robust error handling for real-time bidirectional communication.
Processes Chrome's accessibility tree into a structured format with unique, stable IDs (UIDs) for UI elements. Implements intelligent tree cleaning (removing ignored nodes, collapsing generic nodes) and provides UID-to-node resolution. Enables reliable element targeting for automation actions without relying on fragile selectors. The algorithm balances completeness with usability by preserving meaningful nodes while reducing noise.