Opencode Browser

opencode-browser

[](https://www.npmjs.com/package/@mytai20100/opencode-browser) [](https://github.com/mytai20100/opencode-browser) [](https://github.com/mytai20100/opencode-browser) [](./server/LICENSE) [](https://github.com/Mytai20100/opencode-brower/actions/workflows/build.yml) [](https://github.com/Mytai20100/opencode-brower/actions/workflows/build-e.yml)

Chrome automation plugin for OpenCode via WebSocket and Chrome Extension. Gives AI agents 105+ tools covering tabs, CDP debugging, network interception, visual clicking, session management, accessibility, advanced mouse/keyboard control, testing & mocking, profiling, and more.

How it works

The system has two parts that talk to each other over a local WebSocket connection:

• MCP Server — a Node.js process that OpenCode connects to via stdio. It exposes all tools to the AI agent and forwards commands over WebSocket to the extension.
• Chrome Extension — a Manifest V3 service worker that receives commands from the MCP server and executes them inside the browser using Chrome APIs and CDP.

OpenCode    MCP Server    Chrome Extension    Browser

Demo

Extension popup — configure the WebSocket endpoint and toggle the connection:

Demo — OpenCode controlling Chrome in real time:

Installation

1. Install the MCP server

npm install -g @mytai20100/opencode-browser

Or run directly with npx (no install needed):

npx @mytai20100/opencode-browser

2. Register with OpenCode

Add the server to your OpenCode config (~/.config/opencode/config.json or opencode.json at project root):

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "browsermcp": {
      "type": "local",
      "command": ["opencode-browser"],
      "enabled": true
    }
  }
}

3. Install the Chrome extension

1. Download or clone this repository.
2. Open Chrome and go to chrome://extensions.
3. Enable Developer mode (top-right toggle).
4. Click Load unpacked and select the extension/ folder.

4. Connect

Click the extension icon in the Chrome toolbar. The default endpoint is ws://localhost:3002. If the MCP server is running on a different machine or port, enter the correct address (e.g. ws://192.168.1.62:3002) and click Save Endpoint. The status indicator turns orange when connected.

Running locally from source

If you want to run the MCP server from a local clone instead of installing from npm:

git clone https://github.com/mytai20100/opencode-browser
cd opencode-browser/server
npm install
npm run build

Then point OpenCode at the local build by using the absolute path to dist/index.js in your config:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "browsermcp": {
      "type": "local",
      "command": ["node", "/absolute/path/to/opencode-browser/server/dist/index.js"],
      "enabled": true
    }
  }
}

Replace /absolute/path/to/opencode-browser with the actual path where you cloned the repo. On macOS and Linux you can get it by running pwd inside the server/ folder. On Windows use the full path with backslashes, e.g. C:\\Users\\you\\opencode-browser\\server\\dist\\index.js.

After saving the config, restart OpenCode. The MCP server will start automatically whenever OpenCode launches.

For the extension, load the extension/ folder from the cloned repo the same way as the regular install: chrome://extensions > Developer mode > Load unpacked > select extension/.

Prompt tips

A few patterns that get the most out of the 105+ available tools:

Always start with the tool graph. Before any multi-step task, ask the agent to call chrome_get_tool_graph with a plain description of the goal. This gives it an ordered execution plan and tells it which tools to skip, saving unnecessary calls.

Use chrome_get_tool_graph with intent "fill in the login form and submit"

Use chrome_get_workflow_context before interacting with a page. It gives the agent a snapshot of all forms, inputs, and buttons so it can build accurate CSS selectors before clicking or typing anything.

Before clicking anything, call chrome_get_workflow_context to map the page first.

Attach the debugger early when working with APIs. If the task involves reading network traffic, attach CDP at the start so requests are captured from the beginning.

Attach the debugger to the current tab, then navigate to the page and capture all API calls.

Prefer chrome_get_content over chrome_get_html for reading pages. It returns clean visible text without markup, which is faster and uses fewer tokens. Only reach for chrome_get_html when you need the raw DOM structure.

Use chrome_find_text_on_screen + chrome_visual_click as a fallback. When a button has no reliable CSS selector, find its text on screen first, then click the returned coordinates.

Find the text "Submit Order" on screen and click it visually.

Save sessions to avoid re-logging in. After a successful login, call chrome_save_session with a name. Restore it at the start of future tasks to skip the authentication flow entirely.

Save the current session as "prod-login" after logging in.

Mock API responses for testing. Use chrome_intercept_request and chrome_mock_response together to inject fake data without touching the backend.

Intercept all requests to /api/orders and return a mocked empty array.

Tools reference

All tools are prefixed with chrome_. The agent can call chrome_get_tool_graph with a plain-text intent to get an optimized execution plan before starting any task — this prevents redundant calls and saves tokens.

Tabs — viewing and querying

| Tool | Description | |------|-------------| | chrome_list_tabs | List all open tabs with id, title, url, active, pinned, muted, audible states | | chrome_get_active_tab | Get info about the currently active tab | | chrome_get_tab_info | Get detailed info about a specific tab by id | | chrome_search_tabs | Search open tabs by title or URL keyword |

Tabs — management

| Tool | Description | |------|-------------| | chrome_navigate | Navigate a tab to a URL (defaults to active tab) | | chrome_new_tab | Open a new tab, optionally with a URL | | chrome_close_tab | Close a tab by id (defaults to active tab) | | chrome_close_tabs | Close multiple tabs by id array | | chrome_switch_tab | Focus a specific tab by id | | chrome_duplicate_tab | Duplicate a tab | | chrome_pin_tab | Pin or unpin a tab | | chrome_mute_tab | Mute or unmute a tab | | chrome_reload_tab | Reload a tab, optionally bypassing cache | | chrome_move_tab | Move a tab to a different position or window |

Windows

| Tool | Description | |------|-------------| | chrome_list_windows | List all open windows with id, state, focused, tab count | | chrome_new_window | Open a new browser window (supports incognito) | | chrome_close_window | Close a browser window by id |

Screenshot

| Tool | Description | |------|-------------| | chrome_screenshot | Capture the visible area as a base64 PNG or JPEG | | chrome_screenshot_element | Capture a specific element by CSS selector | | chrome_screenshot_fullpage | Capture full page with scrolling and stitching | | chrome_pdf_print | Save current page as PDF with custom options |

Page interaction

| Tool | Description | |------|-------------| | chrome_click | Click an element by CSS selector | | chrome_double_click | Double click an element by selector or coordinates | | chrome_right_click | Right click to open context menu | | chrome_middle_click | Middle click (open in new tab) | | chrome_drag_drop | Drag and drop from element A to B | | chrome_type | Type text into an input element by CSS selector | | chrome_hover | Hover over an element by CSS selector | | chrome_select | Select an option in a ` element | | chromescroll | Scroll the page or a specific element by x/y pixels | | chromescrollto | Scroll an element into view | | chromekeypress | Dispatch a keyboard event (Enter, Escape, Tab, etc.) | | chromekeyboardshortcut | Execute keyboard shortcuts (Ctrl+C, Ctrl+V, Ctrl+A, etc.) | | chromewaitforelement | Wait until a CSS selector appears in the DOM | | chromewaitfornavigation | Wait for page navigation to complete | | chromewaitfornetworkidle | Wait until no network requests for N milliseconds | | chromefocuselement | Focus an element without clicking | | chromeclearinput | Clear an input field | | chromeselecttext | Select/highlight text on the page | | chromegetselectedtext` | Get currently selected text |

Page content

| Tool | Description | |------|-------------| | chrome_get_content | Get the full visible text of the page | | chrome_get_html | Get outer HTML of an element or the full page | | chrome_get_element_info | Get tag, class, text, attributes, bounding box, visibility | | chrome_find_elements | Find all elements matching a CSS selector | | chrome_get_page_info | Get title, URL, scroll position, viewport, links, meta | | chrome_execute_script | Execute arbitrary JavaScript with full DOM access |

Navigation history

| Tool | Description | |------|-------------| | chrome_go_back | Navigate back in the tab's history | | chrome_go_forward | Navigate forward in the tab's history | | chrome_go_home | Navigate the active tab to the new tab page |

Cookies

| Tool | Description | |------|-------------| | chrome_get_cookies | Get all cookies for a given URL | | chrome_set_cookie | Set a cookie for a URL | | chrome_delete_cookie | Delete a specific cookie |

Local storage

| Tool | Description | |------|-------------| | chrome_get_local_storage | Get localStorage value(s) from the current page | | chrome_set_local_storage | Set a localStorage value on the current page | | chrome_clear_local_storage | Clear all localStorage on the current page | | chrome_get_session_storage | Get sessionStorage value(s) from the current page |

History and bookmarks

| Tool | Description | |------|-------------| | chrome_get_history | Search browser history by text query | | chrome_add_bookmark | Add a bookmark | | chrome_search_bookmarks | Search bookmarks by title or URL | | chrome_get_bookmarks | Get all bookmarks in a flat list |

Downloads

| Tool | Description | |------|-------------| | chrome_download | Download a file from a URL | | chrome_list_downloads | List recent downloads, optionally filtered by state |

Tab groups

| Tool | Description | |------|-------------| | chrome_group_tabs | Group tabs with an optional title and color | | chrome_ungroup_tabs | Remove tabs from a group |

CDP debugging

These tools require calling chrome_debug_attach first.

| Tool | Description | |------|-------------| | chrome_debug_attach | Attach the CDP debugger to a tab | | chrome_debug_detach | Detach the debugger from a tab | | chrome_debug_get_logs | Get captured console logs (log, warn, error, info) | | chrome_debug_clear_logs | Clear captured console logs | | chrome_debug_get_network | Get captured network requests (XHR, Fetch, etc.) | | chrome_debug_clear_network | Clear the captured network log | | chrome_debug_get_response_body | Get the response body of a captured request by requestId | | chrome_debug_eval | Evaluate JavaScript via CDP (async-safe, bypasses sandbox) | | chrome_debug_get_performance | Get JS heap, DOM node count, layout metrics | | chrome_debug_get_dom_snapshot | Full DOM snapshot with layout and bounding rects | | chrome_debug_set_breakpoint | Set a JS breakpoint by URL and line number | | chrome_debug_remove_breakpoint | Remove a JS breakpoint by id | | chrome_debug_get_cookies | Get all cookies including HttpOnly ones via CDP | | chrome_debug_set_xhr_breakpoint | Break on XHR/Fetch matching a URL pattern | | chrome_debug_emulate_device | Emulate a mobile device (screen, user agent, DPR) | | chrome_debug_emulate_network | Throttle network (offline, slow3g, fast3g) | | chrome_debug_block_urls | Block URL patterns from loading | | chrome_debug_get_storage | Get localStorage/sessionStorage for a specific origin | | chrome_debug_send_command | Send a raw CDP command for advanced debugging |

Network interception and mocking

| Tool | Description | |------|-------------| | chrome_intercept_request | Intercept requests matching a URL pattern via CDP Fetch | | chrome_mock_response | Mock a URL response with custom status, headers, and body | | chrome_modify_headers | Automatically add or override request headers | | chrome_export_har | Export all captured requests as a HAR archive | | chrome_replay_request | Re-send an HTTP request with custom method, headers, body |

Accessibility

| Tool | Description | |------|-------------| | chrome_get_accessibility_tree | Get the full AX tree via CDP | | chrome_find_accessible_nodes | Find AX nodes by label and/or ARIA role |

Visual interaction

| Tool | Description | |------|-------------| | chrome_visual_click | Click at specific X/Y coordinates via CDP Input | | chrome_ocr_page | Extract all visible text with bounding box coordinates | | chrome_find_text_on_screen | Find text on screen and return its coordinates |

Session management

| Tool | Description | |------|-------------| | chrome_save_session | Save current cookies and localStorage under a name | | chrome_restore_session | Restore a previously saved session |

Events and DOM watching

| Tool | Description | |------|-------------| | chrome_subscribe_events | Subscribe to DOM events (click, input, submit, etc.) | | chrome_watch_dom_changes | Watch DOM mutations via MutationObserver |

Iframes

| Tool | Description | |------|-------------| | chrome_list_iframes | List all iframes on the page | | chrome_switch_iframe | Execute JavaScript inside a specific iframe by index |

Miscellaneous

| Tool | Description | |------|-------------| | chrome_notify | Show a desktop notification | | chrome_set_zoom | Set the zoom level of a tab | | chrome_get_zoom | Get the current zoom level of a tab | | chrome_write_clipboard | Write text to the clipboard | | chrome_read_clipboard | Read text from the clipboard | | chrome_upload_file | Set files on a file input element via CDP | | chrome_grant_permissions | Grant browser permissions to an origin | | chrome_virtual_authenticator | Add/remove a virtual WebAuthn authenticator | | chrome_get_extension_info | Get info about the extension itself | | chrome_get_workflow_context | Snapshot of forms, buttons, inputs, and event log | | chrome_get_tool_graph | Get optimal tool execution plan for a given intent |

CSS & Styling

| Tool | Description | |------|-------------| | chrome_inject_css | Inject CSS stylesheet into the page | | chrome_remove_css | Remove previously injected CSS by ID | | chrome_set_color_scheme | Force dark or light mode |

Testing & Mocking

| Tool | Description | |------|-------------| | chrome_mock_geolocation | Mock GPS location for testing | | chrome_mock_timezone | Override timezone of the page | | chrome_mock_locale | Override locale/language | | chrome_mock_battery | Mock battery status API | | chrome_mock_media_type | Override CSS media type (print/screen) | | chrome_emulate_vision | Emulate vision deficiencies (color blindness, blurred vision) | | chrome_cpu_throttle | Throttle CPU to simulate slower devices | | chrome_mock_date_time | Override Date.now() for deterministic testing | | chrome_modify_response_body | Modify response body before page receives it | | chrome_get_ws_frames | Capture WebSocket frames | | chrome_set_extra_headers | Add extra HTTP headers to all requests | | `chromegetrequest_b

…

Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Mytai20100
• Source: Mytai20100/opencode-browser
• License: MIT

Install and usage instructions live in the source repository linked above.