@mytai20100/opencode-browser 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +411 -87
- package/dist/index.js +889 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,161 +1,485 @@
|
|
|
1
1
|
# @mytai20100/opencode-browser
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/@mytai20100/opencode-browser)
|
|
4
|
+
[](./LICENSE)
|
|
5
|
+
|
|
3
6
|
> OpenCode Browser MCP — Chrome automation plugin for [OpenCode](https://opencode.ai) via WebSocket + Chrome Extension.
|
|
4
7
|
|
|
5
|
-
**
|
|
8
|
+
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.
|
|
6
9
|
|
|
7
10
|
---
|
|
8
11
|
|
|
9
12
|
## How it works
|
|
10
13
|
|
|
14
|
+
The system has two parts that talk to each other over a local WebSocket connection:
|
|
15
|
+
|
|
16
|
+
- **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.
|
|
17
|
+
- **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.
|
|
18
|
+
|
|
11
19
|
```
|
|
12
|
-
OpenCode
|
|
13
|
-
│
|
|
14
|
-
chrome.tabs
|
|
15
|
-
chrome.debugger
|
|
16
|
-
chrome.scripting
|
|
20
|
+
OpenCode <-- stdio --> MCP Server <-- WebSocket :3002 --> Chrome Extension <-- Chrome APIs --> Browser
|
|
17
21
|
```
|
|
18
22
|
|
|
19
|
-
The MCP server communicates with a companion Chrome Extension via WebSocket. The extension executes commands in your real browser — using your existing logins, cookies, and profile.
|
|
20
|
-
|
|
21
23
|
---
|
|
22
24
|
|
|
23
25
|
## Installation
|
|
24
26
|
|
|
27
|
+
### 1. Install the MCP server
|
|
28
|
+
|
|
25
29
|
```bash
|
|
26
30
|
npm install -g @mytai20100/opencode-browser
|
|
27
31
|
```
|
|
28
32
|
|
|
29
|
-
|
|
33
|
+
Or run directly with npx (no install needed):
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
npx @mytai20100/opencode-browser
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### 2. Register with OpenCode
|
|
40
|
+
|
|
41
|
+
Add the server to your OpenCode config (`~/.config/opencode/config.json` or `opencode.json` at project root):
|
|
30
42
|
|
|
31
43
|
```json
|
|
32
44
|
{
|
|
33
45
|
"$schema": "https://opencode.ai/config.json",
|
|
34
46
|
"mcp": {
|
|
35
|
-
"
|
|
47
|
+
"browsermcp": {
|
|
36
48
|
"type": "local",
|
|
37
|
-
"command": ["opencode-browser"],
|
|
49
|
+
"command": ["npx", "-y", "@mytai20100/opencode-browser@0.0.1"],
|
|
38
50
|
"enabled": true
|
|
39
51
|
}
|
|
40
52
|
}
|
|
41
53
|
}
|
|
42
54
|
```
|
|
43
55
|
|
|
44
|
-
|
|
56
|
+
### 3. Install the Chrome extension
|
|
57
|
+
|
|
58
|
+
1. Download or clone the [repository](https://github.com/mytai20100/opencode-browser).
|
|
59
|
+
2. Open Chrome and go to `chrome://extensions`.
|
|
60
|
+
3. Enable **Developer mode** (top-right toggle).
|
|
61
|
+
4. Click **Load unpacked** and select the `extension/` folder.
|
|
62
|
+
|
|
63
|
+
### 4. Connect
|
|
64
|
+
|
|
65
|
+
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.
|
|
66
|
+
|
|
67
|
+
---
|
|
68
|
+
|
|
69
|
+
## Running locally from source
|
|
70
|
+
|
|
71
|
+
```bash
|
|
72
|
+
git clone https://github.com/mytai20100/opencode-browser
|
|
73
|
+
cd opencode-browser/server
|
|
74
|
+
npm install
|
|
75
|
+
npm run build
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
Then point OpenCode at the local build:
|
|
79
|
+
|
|
80
|
+
```json
|
|
81
|
+
{
|
|
82
|
+
"$schema": "https://opencode.ai/config.json",
|
|
83
|
+
"mcp": {
|
|
84
|
+
"browsermcp": {
|
|
85
|
+
"type": "local",
|
|
86
|
+
"command": ["node", "/absolute/path/to/opencode-browser/server/dist/index.js"],
|
|
87
|
+
"enabled": true
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
```
|
|
45
92
|
|
|
46
93
|
---
|
|
47
94
|
|
|
48
|
-
##
|
|
95
|
+
## Prompt tips
|
|
96
|
+
|
|
97
|
+
**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.
|
|
98
|
+
|
|
99
|
+
```
|
|
100
|
+
Use chrome_get_tool_graph with intent "fill in the login form and submit"
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
**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.
|
|
104
|
+
|
|
105
|
+
```
|
|
106
|
+
Before clicking anything, call chrome_get_workflow_context to map the page first.
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
**Attach the debugger early when working with APIs.** Attach CDP at the start so requests are captured from the beginning.
|
|
110
|
+
|
|
111
|
+
```
|
|
112
|
+
Attach the debugger to the current tab, then navigate to the page and capture all API calls.
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
**Prefer `chrome_get_content` over `chrome_get_html` for reading pages.** Returns clean visible text without markup — faster and uses fewer tokens.
|
|
116
|
+
|
|
117
|
+
**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.
|
|
118
|
+
|
|
119
|
+
```
|
|
120
|
+
Find the text "Submit Order" on screen and click it visually.
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
**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.
|
|
124
|
+
|
|
125
|
+
```
|
|
126
|
+
Save the current session as "prod-login" after logging in.
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
**Mock API responses for testing.** Use `chrome_intercept_request` and `chrome_mock_response` together to inject fake data without touching the backend.
|
|
130
|
+
|
|
131
|
+
```
|
|
132
|
+
Intercept all requests to /api/orders and return a mocked empty array.
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
---
|
|
136
|
+
|
|
137
|
+
## Tools reference
|
|
138
|
+
|
|
139
|
+
All tools are prefixed with `chrome_`. Call `chrome_get_tool_graph` with a plain-text intent to get an optimized execution plan before starting any task.
|
|
140
|
+
|
|
141
|
+
### Tabs — viewing and querying
|
|
142
|
+
|
|
143
|
+
| Tool | Description |
|
|
144
|
+
|------|-------------|
|
|
145
|
+
| `chrome_list_tabs` | List all open tabs with id, title, url, active, pinned, muted, audible states |
|
|
146
|
+
| `chrome_get_active_tab` | Get info about the currently active tab |
|
|
147
|
+
| `chrome_get_tab_info` | Get detailed info about a specific tab by id |
|
|
148
|
+
| `chrome_search_tabs` | Search open tabs by title or URL keyword |
|
|
149
|
+
|
|
150
|
+
### Tabs — management
|
|
49
151
|
|
|
50
|
-
### Tabs & Windows
|
|
51
152
|
| Tool | Description |
|
|
52
153
|
|------|-------------|
|
|
53
|
-
| `
|
|
54
|
-
| `
|
|
55
|
-
| `
|
|
56
|
-
| `
|
|
57
|
-
| `
|
|
58
|
-
| `chrome_reload_tab` | Reload a tab |
|
|
154
|
+
| `chrome_navigate` | Navigate a tab to a URL (defaults to active tab) |
|
|
155
|
+
| `chrome_new_tab` | Open a new tab, optionally with a URL |
|
|
156
|
+
| `chrome_close_tab` | Close a tab by id (defaults to active tab) |
|
|
157
|
+
| `chrome_close_tabs` | Close multiple tabs by id array |
|
|
158
|
+
| `chrome_switch_tab` | Focus a specific tab by id |
|
|
59
159
|
| `chrome_duplicate_tab` | Duplicate a tab |
|
|
60
|
-
| `chrome_pin_tab` | Pin
|
|
61
|
-
| `chrome_mute_tab` | Mute
|
|
62
|
-
| `
|
|
160
|
+
| `chrome_pin_tab` | Pin or unpin a tab |
|
|
161
|
+
| `chrome_mute_tab` | Mute or unmute a tab |
|
|
162
|
+
| `chrome_reload_tab` | Reload a tab, optionally bypassing cache |
|
|
163
|
+
| `chrome_move_tab` | Move a tab to a different position or window |
|
|
164
|
+
|
|
165
|
+
### Windows
|
|
63
166
|
|
|
64
|
-
### Page Interaction
|
|
65
167
|
| Tool | Description |
|
|
66
168
|
|------|-------------|
|
|
67
|
-
| `
|
|
68
|
-
| `
|
|
69
|
-
| `
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
| `chrome_key_press` | Press a key (Enter, Escape…) |
|
|
73
|
-
| `chrome_wait_for_element` | Wait for element to appear |
|
|
74
|
-
| `chrome_visual_click` | Click by X/Y coordinates via CDP |
|
|
75
|
-
| `chrome_upload_file` | Set files on file input |
|
|
169
|
+
| `chrome_list_windows` | List all open windows with id, state, focused, tab count |
|
|
170
|
+
| `chrome_new_window` | Open a new browser window (supports incognito) |
|
|
171
|
+
| `chrome_close_window` | Close a browser window by id |
|
|
172
|
+
|
|
173
|
+
### Screenshot
|
|
76
174
|
|
|
77
|
-
### Page Content
|
|
78
175
|
| Tool | Description |
|
|
79
176
|
|------|-------------|
|
|
80
|
-
| `
|
|
81
|
-
| `
|
|
82
|
-
| `
|
|
83
|
-
| `
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
| `chrome_get_workflow_context` | Forms, inputs, buttons snapshot |
|
|
87
|
-
| `chrome_ocr_page` | All text with bounding boxes |
|
|
88
|
-
| `chrome_find_text_on_screen` | Find text → get click coordinates |
|
|
177
|
+
| `chrome_screenshot` | Capture the visible area as a base64 PNG or JPEG |
|
|
178
|
+
| `chrome_screenshot_element` | Capture a specific element by CSS selector |
|
|
179
|
+
| `chrome_screenshot_fullpage` | Capture full page with scrolling and stitching |
|
|
180
|
+
| `chrome_pdf_print` | Save current page as PDF with custom options |
|
|
181
|
+
|
|
182
|
+
### Page interaction
|
|
89
183
|
|
|
90
|
-
### CDP Debugging
|
|
91
184
|
| Tool | Description |
|
|
92
185
|
|------|-------------|
|
|
93
|
-
| `
|
|
94
|
-
| `
|
|
95
|
-
| `
|
|
96
|
-
| `
|
|
97
|
-
| `
|
|
98
|
-
| `
|
|
99
|
-
| `
|
|
100
|
-
| `
|
|
101
|
-
| `
|
|
102
|
-
| `
|
|
103
|
-
| `
|
|
104
|
-
| `
|
|
186
|
+
| `chrome_click` | Click an element by CSS selector |
|
|
187
|
+
| `chrome_double_click` | Double click an element by selector or coordinates |
|
|
188
|
+
| `chrome_right_click` | Right click to open context menu |
|
|
189
|
+
| `chrome_middle_click` | Middle click (open in new tab) |
|
|
190
|
+
| `chrome_drag_drop` | Drag and drop from element A to B |
|
|
191
|
+
| `chrome_type` | Type text into an input element by CSS selector |
|
|
192
|
+
| `chrome_hover` | Hover over an element by CSS selector |
|
|
193
|
+
| `chrome_select` | Select an option in a `<select>` element |
|
|
194
|
+
| `chrome_scroll` | Scroll the page or a specific element by x/y pixels |
|
|
195
|
+
| `chrome_scroll_to` | Scroll an element into view |
|
|
196
|
+
| `chrome_key_press` | Dispatch a keyboard event (Enter, Escape, Tab, etc.) |
|
|
197
|
+
| `chrome_keyboard_shortcut` | Execute keyboard shortcuts (Ctrl+C, Ctrl+V, Ctrl+A, etc.) |
|
|
198
|
+
| `chrome_wait_for_element` | Wait until a CSS selector appears in the DOM |
|
|
199
|
+
| `chrome_wait_for_navigation` | Wait for page navigation to complete |
|
|
200
|
+
| `chrome_wait_for_network_idle` | Wait until no network requests for N milliseconds |
|
|
201
|
+
| `chrome_focus_element` | Focus an element without clicking |
|
|
202
|
+
| `chrome_clear_input` | Clear an input field |
|
|
203
|
+
| `chrome_select_text` | Select/highlight text on the page |
|
|
204
|
+
| `chrome_get_selected_text` | Get currently selected text |
|
|
205
|
+
|
|
206
|
+
### Page content
|
|
105
207
|
|
|
106
|
-
### Network Intercept
|
|
107
208
|
| Tool | Description |
|
|
108
209
|
|------|-------------|
|
|
109
|
-
| `
|
|
110
|
-
| `
|
|
111
|
-
| `
|
|
112
|
-
| `
|
|
113
|
-
| `
|
|
210
|
+
| `chrome_get_content` | Get the full visible text of the page |
|
|
211
|
+
| `chrome_get_html` | Get outer HTML of an element or the full page |
|
|
212
|
+
| `chrome_get_element_info` | Get tag, class, text, attributes, bounding box, visibility |
|
|
213
|
+
| `chrome_find_elements` | Find all elements matching a CSS selector |
|
|
214
|
+
| `chrome_get_page_info` | Get title, URL, scroll position, viewport, links, meta |
|
|
215
|
+
| `chrome_execute_script` | Execute arbitrary JavaScript with full DOM access |
|
|
216
|
+
|
|
217
|
+
### Navigation history
|
|
114
218
|
|
|
115
|
-
### Storage & Cookies
|
|
116
219
|
| Tool | Description |
|
|
117
220
|
|------|-------------|
|
|
118
|
-
| `
|
|
119
|
-
| `
|
|
120
|
-
| `
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
221
|
+
| `chrome_go_back` | Navigate back in the tab's history |
|
|
222
|
+
| `chrome_go_forward` | Navigate forward in the tab's history |
|
|
223
|
+
| `chrome_go_home` | Navigate the active tab to the new tab page |
|
|
224
|
+
|
|
225
|
+
### Cookies
|
|
226
|
+
|
|
227
|
+
| Tool | Description |
|
|
228
|
+
|------|-------------|
|
|
229
|
+
| `chrome_get_cookies` | Get all cookies for a given URL |
|
|
230
|
+
| `chrome_set_cookie` | Set a cookie for a URL |
|
|
231
|
+
| `chrome_delete_cookie` | Delete a specific cookie |
|
|
232
|
+
|
|
233
|
+
### Local storage
|
|
234
|
+
|
|
235
|
+
| Tool | Description |
|
|
236
|
+
|------|-------------|
|
|
237
|
+
| `chrome_get_local_storage` | Get localStorage value(s) from the current page |
|
|
238
|
+
| `chrome_set_local_storage` | Set a localStorage value on the current page |
|
|
239
|
+
| `chrome_clear_local_storage` | Clear all localStorage on the current page |
|
|
240
|
+
| `chrome_get_session_storage` | Get sessionStorage value(s) from the current page |
|
|
241
|
+
|
|
242
|
+
### History and bookmarks
|
|
124
243
|
|
|
125
|
-
### Session
|
|
126
244
|
| Tool | Description |
|
|
127
245
|
|------|-------------|
|
|
128
|
-
| `
|
|
129
|
-
| `
|
|
246
|
+
| `chrome_get_history` | Search browser history by text query |
|
|
247
|
+
| `chrome_add_bookmark` | Add a bookmark |
|
|
248
|
+
| `chrome_search_bookmarks` | Search bookmarks by title or URL |
|
|
249
|
+
| `chrome_get_bookmarks` | Get all bookmarks in a flat list |
|
|
250
|
+
|
|
251
|
+
### Downloads
|
|
252
|
+
|
|
253
|
+
| Tool | Description |
|
|
254
|
+
|------|-------------|
|
|
255
|
+
| `chrome_download` | Download a file from a URL |
|
|
256
|
+
| `chrome_list_downloads` | List recent downloads, optionally filtered by state |
|
|
257
|
+
|
|
258
|
+
### Tab groups
|
|
259
|
+
|
|
260
|
+
| Tool | Description |
|
|
261
|
+
|------|-------------|
|
|
262
|
+
| `chrome_group_tabs` | Group tabs with an optional title and color |
|
|
263
|
+
| `chrome_ungroup_tabs` | Remove tabs from a group |
|
|
264
|
+
|
|
265
|
+
### CDP debugging
|
|
266
|
+
|
|
267
|
+
> These tools require calling `chrome_debug_attach` first.
|
|
268
|
+
|
|
269
|
+
| Tool | Description |
|
|
270
|
+
|------|-------------|
|
|
271
|
+
| `chrome_debug_attach` | Attach the CDP debugger to a tab |
|
|
272
|
+
| `chrome_debug_detach` | Detach the debugger from a tab |
|
|
273
|
+
| `chrome_debug_get_logs` | Get captured console logs (log, warn, error, info) |
|
|
274
|
+
| `chrome_debug_clear_logs` | Clear captured console logs |
|
|
275
|
+
| `chrome_debug_get_network` | Get captured network requests (XHR, Fetch, etc.) |
|
|
276
|
+
| `chrome_debug_clear_network` | Clear the captured network log |
|
|
277
|
+
| `chrome_debug_get_response_body` | Get the response body of a captured request by requestId |
|
|
278
|
+
| `chrome_debug_eval` | Evaluate JavaScript via CDP (async-safe, bypasses sandbox) |
|
|
279
|
+
| `chrome_debug_get_performance` | Get JS heap, DOM node count, layout metrics |
|
|
280
|
+
| `chrome_debug_get_dom_snapshot` | Full DOM snapshot with layout and bounding rects |
|
|
281
|
+
| `chrome_debug_set_breakpoint` | Set a JS breakpoint by URL and line number |
|
|
282
|
+
| `chrome_debug_remove_breakpoint` | Remove a JS breakpoint by id |
|
|
283
|
+
| `chrome_debug_get_cookies` | Get all cookies including HttpOnly ones via CDP |
|
|
284
|
+
| `chrome_debug_set_xhr_breakpoint` | Break on XHR/Fetch matching a URL pattern |
|
|
285
|
+
| `chrome_debug_emulate_device` | Emulate a mobile device (screen, user agent, DPR) |
|
|
286
|
+
| `chrome_debug_emulate_network` | Throttle network (offline, slow3g, fast3g) |
|
|
287
|
+
| `chrome_debug_block_urls` | Block URL patterns from loading |
|
|
288
|
+
| `chrome_debug_get_storage` | Get localStorage/sessionStorage for a specific origin |
|
|
289
|
+
| `chrome_debug_send_command` | Send a raw CDP command for advanced debugging |
|
|
290
|
+
|
|
291
|
+
### Network interception and mocking
|
|
292
|
+
|
|
293
|
+
| Tool | Description |
|
|
294
|
+
|------|-------------|
|
|
295
|
+
| `chrome_intercept_request` | Intercept requests matching a URL pattern via CDP Fetch |
|
|
296
|
+
| `chrome_mock_response` | Mock a URL response with custom status, headers, and body |
|
|
297
|
+
| `chrome_modify_headers` | Automatically add or override request headers |
|
|
298
|
+
| `chrome_export_har` | Export all captured requests as a HAR archive |
|
|
299
|
+
| `chrome_replay_request` | Re-send an HTTP request with custom method, headers, body |
|
|
130
300
|
|
|
131
301
|
### Accessibility
|
|
302
|
+
|
|
303
|
+
| Tool | Description |
|
|
304
|
+
|------|-------------|
|
|
305
|
+
| `chrome_get_accessibility_tree` | Get the full AX tree via CDP |
|
|
306
|
+
| `chrome_find_accessible_nodes` | Find AX nodes by label and/or ARIA role |
|
|
307
|
+
|
|
308
|
+
### Visual interaction
|
|
309
|
+
|
|
310
|
+
| Tool | Description |
|
|
311
|
+
|------|-------------|
|
|
312
|
+
| `chrome_visual_click` | Click at specific X/Y coordinates via CDP Input |
|
|
313
|
+
| `chrome_ocr_page` | Extract all visible text with bounding box coordinates |
|
|
314
|
+
| `chrome_find_text_on_screen` | Find text on screen and return its coordinates |
|
|
315
|
+
|
|
316
|
+
### Session management
|
|
317
|
+
|
|
318
|
+
| Tool | Description |
|
|
319
|
+
|------|-------------|
|
|
320
|
+
| `chrome_save_session` | Save current cookies and localStorage under a name |
|
|
321
|
+
| `chrome_restore_session` | Restore a previously saved session |
|
|
322
|
+
|
|
323
|
+
### Events and DOM watching
|
|
324
|
+
|
|
325
|
+
| Tool | Description |
|
|
326
|
+
|------|-------------|
|
|
327
|
+
| `chrome_subscribe_events` | Subscribe to DOM events (click, input, submit, etc.) |
|
|
328
|
+
| `chrome_watch_dom_changes` | Watch DOM mutations via MutationObserver |
|
|
329
|
+
|
|
330
|
+
### Iframes
|
|
331
|
+
|
|
332
|
+
| Tool | Description |
|
|
333
|
+
|------|-------------|
|
|
334
|
+
| `chrome_list_iframes` | List all iframes on the page |
|
|
335
|
+
| `chrome_switch_iframe` | Execute JavaScript inside a specific iframe by index |
|
|
336
|
+
|
|
337
|
+
### CSS & Styling
|
|
338
|
+
|
|
339
|
+
| Tool | Description |
|
|
340
|
+
|------|-------------|
|
|
341
|
+
| `chrome_inject_css` | Inject CSS stylesheet into the page |
|
|
342
|
+
| `chrome_remove_css` | Remove previously injected CSS by ID |
|
|
343
|
+
| `chrome_set_color_scheme` | Force dark or light mode |
|
|
344
|
+
|
|
345
|
+
### Testing & Mocking
|
|
346
|
+
|
|
347
|
+
| Tool | Description |
|
|
348
|
+
|------|-------------|
|
|
349
|
+
| `chrome_mock_geolocation` | Mock GPS location for testing |
|
|
350
|
+
| `chrome_mock_timezone` | Override timezone of the page |
|
|
351
|
+
| `chrome_mock_locale` | Override locale/language |
|
|
352
|
+
| `chrome_mock_battery` | Mock battery status API |
|
|
353
|
+
| `chrome_mock_media_type` | Override CSS media type (print/screen) |
|
|
354
|
+
| `chrome_emulate_vision` | Emulate vision deficiencies (color blindness, blurred vision) |
|
|
355
|
+
| `chrome_cpu_throttle` | Throttle CPU to simulate slower devices |
|
|
356
|
+
| `chrome_mock_date_time` | Override Date.now() for deterministic testing |
|
|
357
|
+
| `chrome_modify_response_body` | Modify response body before page receives it |
|
|
358
|
+
| `chrome_get_ws_frames` | Capture WebSocket frames |
|
|
359
|
+
| `chrome_set_extra_headers` | Add extra HTTP headers to all requests |
|
|
360
|
+
| `chrome_get_request_body` | Get POST body of a sent request |
|
|
361
|
+
|
|
362
|
+
### Advanced debugging & profiling
|
|
363
|
+
|
|
364
|
+
| Tool | Description |
|
|
365
|
+
|------|-------------|
|
|
366
|
+
| `chrome_profiling_start` | Start CPU profiling |
|
|
367
|
+
| `chrome_profiling_stop` | Stop CPU profiling and get profile data |
|
|
368
|
+
| `chrome_heap_snapshot` | Take a heap snapshot for memory analysis |
|
|
369
|
+
| `chrome_trace_start` | Start tracing (Timeline/Performance recording) |
|
|
370
|
+
| `chrome_trace_stop` | Stop tracing and get trace events |
|
|
371
|
+
| `chrome_pause_on_exception` | Pause debugger on exceptions (all/uncaught/none) |
|
|
372
|
+
| `chrome_debugger_resume` | Resume execution after debugger pause |
|
|
373
|
+
| `chrome_debugger_step_over` | Step over current line |
|
|
374
|
+
| `chrome_debugger_step_into` | Step into function call |
|
|
375
|
+
| `chrome_debugger_step_out` | Step out of current function |
|
|
376
|
+
| `chrome_get_call_frames` | Get call stack when paused |
|
|
377
|
+
| `chrome_evaluate_on_call_frame` | Evaluate expression in paused call frame |
|
|
378
|
+
| `chrome_get_script_source` | Get source code of a script |
|
|
379
|
+
| `chrome_live_edit_script` | Live edit JavaScript without reload |
|
|
380
|
+
| `chrome_call_function_on` | Call function on remote object |
|
|
381
|
+
| `chrome_get_properties` | Get properties of a remote object |
|
|
382
|
+
| `chrome_compile_script` | Check JavaScript syntax without executing |
|
|
383
|
+
|
|
384
|
+
### Storage & Security
|
|
385
|
+
|
|
386
|
+
| Tool | Description |
|
|
387
|
+
|------|-------------|
|
|
388
|
+
| `chrome_get_indexeddb` | Read IndexedDB data from the page |
|
|
389
|
+
| `chrome_get_cache_storage` | Read Service Worker cache storage |
|
|
390
|
+
| `chrome_get_security_state` | Get HTTPS security state and certificate info |
|
|
391
|
+
| `chrome_ignore_cert_errors` | Ignore SSL certificate errors |
|
|
392
|
+
|
|
393
|
+
### DOM manipulation
|
|
394
|
+
|
|
132
395
|
| Tool | Description |
|
|
133
396
|
|------|-------------|
|
|
134
|
-
| `
|
|
135
|
-
| `
|
|
397
|
+
| `chrome_highlight_element` | Highlight element on screen for debugging |
|
|
398
|
+
| `chrome_hide_element` | Hide or show element |
|
|
399
|
+
| `chrome_dom_set_attribute` | Set DOM attribute via CDP |
|
|
400
|
+
| `chrome_dom_remove_node` | Remove DOM node |
|
|
401
|
+
|
|
402
|
+
### Miscellaneous
|
|
136
403
|
|
|
137
|
-
### Misc
|
|
138
404
|
| Tool | Description |
|
|
139
405
|
|------|-------------|
|
|
140
|
-
| `
|
|
141
|
-
| `
|
|
142
|
-
| `
|
|
143
|
-
| `
|
|
144
|
-
| `
|
|
145
|
-
| `
|
|
146
|
-
| `
|
|
147
|
-
| `
|
|
406
|
+
| `chrome_notify` | Show a desktop notification |
|
|
407
|
+
| `chrome_set_zoom` | Set the zoom level of a tab |
|
|
408
|
+
| `chrome_get_zoom` | Get the current zoom level of a tab |
|
|
409
|
+
| `chrome_write_clipboard` | Write text to the clipboard |
|
|
410
|
+
| `chrome_read_clipboard` | Read text from the clipboard |
|
|
411
|
+
| `chrome_upload_file` | Set files on a file input element via CDP |
|
|
412
|
+
| `chrome_grant_permissions` | Grant browser permissions to an origin |
|
|
413
|
+
| `chrome_virtual_authenticator` | Add/remove a virtual WebAuthn authenticator |
|
|
414
|
+
| `chrome_get_extension_info` | Get info about the extension and author |
|
|
415
|
+
| `chrome_get_workflow_context` | Snapshot of forms, buttons, inputs, and event log |
|
|
416
|
+
| `chrome_get_tool_graph` | Get optimal tool execution plan for a given intent |
|
|
417
|
+
|
|
418
|
+
---
|
|
419
|
+
|
|
420
|
+
## Tool graph
|
|
421
|
+
|
|
422
|
+
Before starting any multi-step task, call `chrome_get_tool_graph` with a plain-text description of what you want to accomplish. It returns a ranked list of recommended tools, their cost (`low` / `medium` / `high`), prerequisites, suggested next steps, and tools to avoid.
|
|
423
|
+
|
|
424
|
+
```
|
|
425
|
+
intent: "capture network requests from the login page"
|
|
426
|
+
-> recommended: chrome_debug_attach -> chrome_navigate -> chrome_debug_get_network
|
|
427
|
+
-> avoid: chrome_screenshot, chrome_get_html
|
|
428
|
+
```
|
|
148
429
|
|
|
149
430
|
---
|
|
150
431
|
|
|
151
432
|
## Requirements
|
|
152
433
|
|
|
153
|
-
- Node.js
|
|
154
|
-
- Chrome
|
|
155
|
-
-
|
|
434
|
+
- Node.js 22 or later
|
|
435
|
+
- Google Chrome (or a Chromium-based browser that supports Manifest V3)
|
|
436
|
+
- OpenCode 1.0 or later
|
|
437
|
+
|
|
438
|
+
---
|
|
439
|
+
|
|
440
|
+
## Troubleshooting
|
|
441
|
+
|
|
442
|
+
### Connection lost
|
|
443
|
+
|
|
444
|
+
1. **Check extension status** — verify the opencode-browser extension is enabled in Chrome.
|
|
445
|
+
2. **Re-enable extension** — if you disabled it, re-enable it and retry the browser action immediately.
|
|
446
|
+
3. **Check browser is running** — ensure Chrome or Edge is actually open.
|
|
447
|
+
4. **Retry after readiness** — the MCP server does not add extra backoff delay, so the next attempt can run right away.
|
|
448
|
+
5. **Restart only if needed** — restart OpenCode only if the browser stays unavailable after retrying.
|
|
449
|
+
|
|
450
|
+
The extension will display messages like `[Opencode-browser] Connecting...` in the popup while it attempts to reconnect.
|
|
451
|
+
|
|
452
|
+
### Extension not loading
|
|
453
|
+
|
|
454
|
+
1. **Check file location** — ensure the `extension/` folder is in the correct directory.
|
|
455
|
+
2. **Check Developer mode** — it must be enabled at `chrome://extensions`.
|
|
456
|
+
3. **Check syntax** — ensure the JavaScript files have no syntax errors.
|
|
457
|
+
4. **Check logs** — open the service worker DevTools from `chrome://extensions` and look for initialization errors.
|
|
458
|
+
|
|
459
|
+
### Tools not available in OpenCode
|
|
460
|
+
|
|
461
|
+
1. **Check MCP server status** — ensure the MCP server started without errors (`npx @mytai20100/opencode-browser`).
|
|
462
|
+
2. **Check config** — verify your `opencode.json` has the correct MCP configuration.
|
|
463
|
+
3. **Restart OpenCode** — try restarting after any configuration change.
|
|
464
|
+
4. **Check Node.js** — run `node --version` to confirm Node.js 22 or later is installed.
|
|
465
|
+
|
|
466
|
+
---
|
|
467
|
+
|
|
468
|
+
## Resources
|
|
469
|
+
|
|
470
|
+
- [OpenCode Documentation](https://opencode.ai/docs/)
|
|
471
|
+
- [OpenCode MCP Servers](https://opencode.ai/docs/mcp-servers/)
|
|
472
|
+
- [Chrome DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/)
|
|
473
|
+
- [GitHub Repository](https://github.com/mytai20100/opencode-browser)
|
|
474
|
+
- [npm package](https://www.npmjs.com/package/@mytai20100/opencode-browser)
|
|
475
|
+
|
|
476
|
+
## Support
|
|
477
|
+
|
|
478
|
+
- Plugin issues: [opencode-browser GitHub](https://github.com/mytai20100/opencode-browser)
|
|
479
|
+
- OpenCode issues: [OpenCode GitHub](https://github.com/anomalyco/opencode)
|
|
156
480
|
|
|
157
481
|
---
|
|
158
482
|
|
|
159
483
|
## License
|
|
160
484
|
|
|
161
|
-
MIT © 2026 mytai20100
|
|
485
|
+
MIT © 2026 mytai20100
|