mcpbrowser 0.3.4 → 0.3.5
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/LICENSE +21 -21
- package/README.md +296 -296
- package/package.json +58 -58
- package/src/actions/click-element.js +293 -293
- package/src/actions/close-tab.js +194 -194
- package/src/actions/fetch-page.js +271 -237
- package/src/actions/get-current-html.js +146 -146
- package/src/actions/type-text.js +220 -220
- package/src/browsers/BaseBrowser.js +52 -0
- package/src/browsers/ChromiumBrowser.js +182 -0
- package/src/browsers/chrome.js +64 -0
- package/src/browsers/edge.js +65 -0
- package/src/core/auth.js +323 -130
- package/src/core/browser.js +188 -256
- package/src/core/html.js +136 -136
- package/src/core/page.js +287 -122
- package/src/core/responses.js +130 -130
- package/src/mcp-browser.js +129 -126
- package/src/utils.js +27 -78
- package/tests/README.md +0 -195
- package/tests/actions/click-element.test.js +0 -81
- package/tests/actions/close-tab.test.js +0 -370
- package/tests/actions/fetch-page.test.js +0 -243
- package/tests/actions/get-current-html.test.js +0 -107
- package/tests/actions/type-text.test.js +0 -90
- package/tests/core/auth.test.js +0 -280
- package/tests/core/browser.test.js +0 -439
- package/tests/core/html.test.js +0 -531
- package/tests/core/page.test.js +0 -342
- package/tests/core/responses.test.js +0 -220
- package/tests/demo-type-safety.js +0 -163
- package/tests/mcp-browser.test.js +0 -190
- package/tests/run-all.js +0 -145
- package/tests/run-unit.js +0 -98
- package/tests/tool-selection/run-tool-selection-tests.js +0 -44
- package/tests/tool-selection/tool-selection-tests.json +0 -113
- package/tests/tool-selection/tool-selection.test.js +0 -472
- package/tests/verify-nextsteps.test.js +0 -95
- package/tests/verify-structured-output.test.js +0 -223
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2025 cherchyk
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 cherchyk
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,296 +1,296 @@
|
|
|
1
|
-
# MCPBrowser (MCP Browser)
|
|
2
|
-
|
|
3
|
-
[](https://marketplace.visualstudio.com/items?itemName=cherchyk.mcpbrowser)
|
|
4
|
-
[](https://www.npmjs.com/package/mcpbrowser)
|
|
5
|
-
[](https://modelcontextprotocol.io/quickstart/user)
|
|
6
|
-
[](https://opensource.org/licenses/MIT)
|
|
7
|
-
|
|
8
|
-
**MCPBrowser is an MCP browser server that gives AI assistants the ability to browse web pages using a real Chrome or Edge browser.** This browser-based MCP server fetches any web page — especially those protected by authentication, CAPTCHAs, anti-bot protection, or requiring JavaScript rendering. Uses your real Chrome/Edge browser for web automation so you can log in normally, then automatically extracts content. Works with corporate SSO, login forms, Cloudflare, and JavaScript-heavy sites (SPAs, dashboards).
|
|
9
|
-
|
|
10
|
-
This is an [MCP (Model Context Protocol)](https://modelcontextprotocol.io/) server using [stdio transport](https://modelcontextprotocol.io/docs/concepts/transports#stdio). Your AI assistant uses this web browser MCP server when standard HTTP requests fail — pages requiring authentication, CAPTCHA protection, or heavy JavaScript (SPAs). Once connected, the browser MCP server can navigate through websites, interact with elements, and send HTML back to the AI assistant. This gives your AI the ability to browse the web just like you do.
|
|
11
|
-
|
|
12
|
-
Example workflow for AI assistant to use MCPBrowser
|
|
13
|
-
|
|
14
|
-
```
|
|
15
|
-
1. fetch_webpage → Load the login page
|
|
16
|
-
2. type_text → Enter username
|
|
17
|
-
3. type_text → Enter password
|
|
18
|
-
4. click_element → Click "Sign In"
|
|
19
|
-
5. get_current_html → Extract the content after login
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
## Contents
|
|
24
|
-
|
|
25
|
-
- [Requirements](#requirements)
|
|
26
|
-
- [Installation](#installation)
|
|
27
|
-
- [VS Code Extension](#option-1-vs-code-extension)
|
|
28
|
-
- [Claude Code](#option-2-claude-code)
|
|
29
|
-
- [Claude Desktop](#option-3-claude-desktop)
|
|
30
|
-
- [npm Package](#option-4-npm-package)
|
|
31
|
-
- [MCP Tools](#mcp-tools)
|
|
32
|
-
- [fetch_webpage](#fetch_webpage)
|
|
33
|
-
- [click_element](#click_element)
|
|
34
|
-
- [type_text](#type_text)
|
|
35
|
-
- [get_current_html](#get_current_html)
|
|
36
|
-
- [close_tab](#close_tab)
|
|
37
|
-
- [Configuration](#configuration-optional)
|
|
38
|
-
- [Troubleshooting](#troubleshooting)
|
|
39
|
-
- [Links](#links)
|
|
40
|
-
|
|
41
|
-
## Requirements
|
|
42
|
-
|
|
43
|
-
- Chrome or Edge browser
|
|
44
|
-
- Node.js 18+
|
|
45
|
-
|
|
46
|
-
## Installation
|
|
47
|
-
|
|
48
|
-
| # | Platform | Difficulty |
|
|
49
|
-
|---|----------|------------|
|
|
50
|
-
| 1 | [VS Code Extension](#option-1-vs-code-extension) | One Click |
|
|
51
|
-
| 2 | [Claude Code](#option-2-claude-code) | One Command |
|
|
52
|
-
| 3 | [Claude Desktop](#option-3-claude-desktop) | Manual |
|
|
53
|
-
| 4 | [npm Package](#option-4-npm-package) | Manual |
|
|
54
|
-
|
|
55
|
-
### Option 1: VS Code Extension
|
|
56
|
-
|
|
57
|
-
Install from [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=cherchyk.mcpbrowser) or run:
|
|
58
|
-
```bash
|
|
59
|
-
code --install-extension cherchyk.mcpbrowser
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
The extension automatically installs and configures everything for GitHub Copilot.
|
|
63
|
-
|
|
64
|
-
### Option 2: Claude Code
|
|
65
|
-
|
|
66
|
-
```bash
|
|
67
|
-
claude mcp add mcpbrowser --scope user -- npx -y mcpbrowser@latest
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
Verify it's working:
|
|
71
|
-
```bash
|
|
72
|
-
claude mcp list
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
You should see:
|
|
76
|
-
```
|
|
77
|
-
mcpbrowser: npx -y mcpbrowser@latest - ✓ Connected
|
|
78
|
-
```
|
|
79
|
-
|
|
80
|
-
That's it! Ask Claude to fetch any protected page:
|
|
81
|
-
> "Fetch https://portal.azure.com using mcpbrowser"
|
|
82
|
-
|
|
83
|
-
### Option 3: Claude Desktop
|
|
84
|
-
|
|
85
|
-
Add to your config file:
|
|
86
|
-
|
|
87
|
-
**Windows:** `%APPDATA%\Claude\claude_desktop_config.json`
|
|
88
|
-
**Mac:** `~/Library/Application Support/Claude/claude_desktop_config.json`
|
|
89
|
-
|
|
90
|
-
```json
|
|
91
|
-
{
|
|
92
|
-
"mcpServers": {
|
|
93
|
-
"MCPBrowser": {
|
|
94
|
-
"command": "npx",
|
|
95
|
-
"args": ["-y", "mcpbrowser@latest"]
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
Restart Claude Desktop after saving.
|
|
102
|
-
|
|
103
|
-
### Option 4: npm Package
|
|
104
|
-
|
|
105
|
-
For VS Code (GitHub Copilot) manual setup, add to your `mcp.json`:
|
|
106
|
-
|
|
107
|
-
**Windows:** `%APPDATA%\Code\User\mcp.json`
|
|
108
|
-
**Mac/Linux:** `~/.config/Code/User/mcp.json`
|
|
109
|
-
|
|
110
|
-
```json
|
|
111
|
-
{
|
|
112
|
-
"servers": {
|
|
113
|
-
"MCPBrowser": {
|
|
114
|
-
"type": "stdio",
|
|
115
|
-
"command": "npx",
|
|
116
|
-
"args": ["-y", "mcpbrowser@latest"]
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
```
|
|
121
|
-
|
|
122
|
-
## MCP Tools
|
|
123
|
-
|
|
124
|
-
### `fetch_webpage`
|
|
125
|
-
|
|
126
|
-
Fetches web pages using your Chrome/Edge browser. Handles authentication, CAPTCHA, SSO, anti-bot protection, and JavaScript-heavy sites. Opens the URL in a browser tab (reuses existing tab for same domain) and waits for the page to fully load before returning content.
|
|
127
|
-
|
|
128
|
-
**Parameters:**
|
|
129
|
-
- `url` (string, required) - The URL to fetch
|
|
130
|
-
- `removeUnnecessaryHTML` (boolean, optional, default: `true`) - Remove unnecessary HTML for size reduction by ~90%
|
|
131
|
-
- `postLoadWait` (number, optional, default: `
|
|
132
|
-
|
|
133
|
-
**Examples:**
|
|
134
|
-
```javascript
|
|
135
|
-
// Basic fetch
|
|
136
|
-
{ url: "https://example.com" }
|
|
137
|
-
|
|
138
|
-
// Fetch with
|
|
139
|
-
{ url: "https://dashboard.example.com", postLoadWait: 2000 }
|
|
140
|
-
|
|
141
|
-
// Keep full HTML without cleanup
|
|
142
|
-
{ url: "https://example.com", removeUnnecessaryHTML: false }
|
|
143
|
-
```
|
|
144
|
-
|
|
145
|
-
---
|
|
146
|
-
|
|
147
|
-
### `click_element`
|
|
148
|
-
|
|
149
|
-
Clicks on any clickable element (buttons, links, divs with onclick handlers, etc.). Can target by CSS selector or visible text content. Automatically scrolls element into view and waits for page stability after clicking.
|
|
150
|
-
|
|
151
|
-
**⚠️ Note:** Page must be already loaded via `fetch_webpage` first.
|
|
152
|
-
|
|
153
|
-
**Parameters:**
|
|
154
|
-
- `url` (string, required) - The URL of the page (must match a previously fetched page)
|
|
155
|
-
- `selector` (string, optional) - CSS selector for the element (e.g., `#submit-btn`, `.login-button`)
|
|
156
|
-
- `text` (string, optional) - Text content to search for if selector not provided (e.g., "Sign In", "Submit")
|
|
157
|
-
- `returnHtml` (boolean, optional, default: `true`) - Whether to wait for stability and return HTML after clicking. Set to `false` for fast form interactions (checkboxes, radio buttons)
|
|
158
|
-
- `removeUnnecessaryHTML` (boolean, optional, default: `true`) - Remove unnecessary HTML for size reduction. Only used when `returnHtml` is `true`
|
|
159
|
-
- `postClickWait` (number, optional, default: `1000`) - Milliseconds to wait after click for SPAs to render dynamic content
|
|
160
|
-
- `waitForElementTimeout` (number, optional, default: `1000`) - Maximum time to wait for element in milliseconds
|
|
161
|
-
|
|
162
|
-
**Examples:**
|
|
163
|
-
```javascript
|
|
164
|
-
// Click by text content
|
|
165
|
-
{ url: "https://example.com", text: "Sign In" }
|
|
166
|
-
|
|
167
|
-
// Click by CSS selector
|
|
168
|
-
{ url: "https://example.com", selector: "#login-button" }
|
|
169
|
-
|
|
170
|
-
// Click without waiting for HTML (fast checkbox toggle)
|
|
171
|
-
{ url: "https://example.com", selector: "#agree-checkbox", returnHtml: false }
|
|
172
|
-
|
|
173
|
-
// Click with custom wait time
|
|
174
|
-
{ url: "https://example.com", text: "Load More", postClickWait: 2000 }
|
|
175
|
-
```
|
|
176
|
-
|
|
177
|
-
---
|
|
178
|
-
|
|
179
|
-
### `type_text`
|
|
180
|
-
|
|
181
|
-
Types text into an input field, textarea, or other editable element. Simulates human-like typing with configurable delay between keystrokes. Automatically clears existing text by default.
|
|
182
|
-
|
|
183
|
-
**⚠️ Note:** Page must be already loaded via `fetch_webpage` first.
|
|
184
|
-
|
|
185
|
-
**Parameters:**
|
|
186
|
-
- `url` (string, required) - The URL of the page (must match a previously fetched page)
|
|
187
|
-
- `selector` (string, required) - CSS selector for the input element (e.g., `#username`, `input[name="email"]`)
|
|
188
|
-
- `text` (string, required) - Text to type into the field
|
|
189
|
-
- `clear` (boolean, optional, default: `true`) - Whether to clear existing text first
|
|
190
|
-
- `typeDelay` (number, optional, default: `50`) - Delay between keystrokes in milliseconds (simulates human typing)
|
|
191
|
-
- `returnHtml` (boolean, optional, default: `true`) - Whether to wait for stability and return HTML after typing
|
|
192
|
-
- `removeUnnecessaryHTML` (boolean, optional, default: `true`) - Remove unnecessary HTML for size reduction. Only used when `returnHtml` is `true`
|
|
193
|
-
- `postTypeWait` (number, optional, default: `1000`) - Milliseconds to wait after typing for SPAs to render dynamic content
|
|
194
|
-
- `waitForElementTimeout` (number, optional, default: `5000`) - Maximum time to wait for element in milliseconds
|
|
195
|
-
|
|
196
|
-
**Examples:**
|
|
197
|
-
```javascript
|
|
198
|
-
// Basic text input
|
|
199
|
-
{ url: "https://example.com", selector: "#email", text: "user@example.com" }
|
|
200
|
-
|
|
201
|
-
// Append text without clearing
|
|
202
|
-
{ url: "https://example.com", selector: "#search", text: " advanced", clear: false }
|
|
203
|
-
|
|
204
|
-
// Fast typing without human simulation
|
|
205
|
-
{ url: "https://example.com", selector: "#username", text: "john", typeDelay: 0 }
|
|
206
|
-
|
|
207
|
-
// Type without waiting for HTML return (faster)
|
|
208
|
-
{ url: "https://example.com", selector: "#field", text: "value", returnHtml: false }
|
|
209
|
-
```
|
|
210
|
-
|
|
211
|
-
---
|
|
212
|
-
|
|
213
|
-
### `get_current_html`
|
|
214
|
-
|
|
215
|
-
Gets the current HTML from an already-loaded page **WITHOUT** navigating or reloading. Much faster than `fetch_webpage` since it only extracts the current DOM state. Use this after interactions (click, type) to get the updated page content efficiently.
|
|
216
|
-
|
|
217
|
-
**⚠️ Note:** Page must be already loaded via `fetch_webpage` first.
|
|
218
|
-
|
|
219
|
-
**Parameters:**
|
|
220
|
-
- `url` (string, required) - The URL of the page (must match a previously fetched page)
|
|
221
|
-
- `removeUnnecessaryHTML` (boolean, optional, default: `true`) - Remove unnecessary HTML for size reduction by ~90%
|
|
222
|
-
|
|
223
|
-
**Examples:**
|
|
224
|
-
```javascript
|
|
225
|
-
// Get current HTML after interactions
|
|
226
|
-
{ url: "https://example.com" }
|
|
227
|
-
|
|
228
|
-
// Get full HTML without cleanup
|
|
229
|
-
{ url: "https://example.com", removeUnnecessaryHTML: false }
|
|
230
|
-
```
|
|
231
|
-
|
|
232
|
-
**Performance comparison:**
|
|
233
|
-
- `fetch_webpage`: 2-5 seconds (full page reload)
|
|
234
|
-
- `get_current_html`: 0.1-0.3 seconds (just extracts HTML) ✅
|
|
235
|
-
|
|
236
|
-
---
|
|
237
|
-
|
|
238
|
-
### `close_tab`
|
|
239
|
-
|
|
240
|
-
Closes the browser tab for the given URL's hostname. Removes the page from the tab pool and forces a fresh session on the next visit to that hostname. Useful for clearing authentication state, managing memory, or starting fresh with a domain.
|
|
241
|
-
|
|
242
|
-
**⚠️ Note:** Uses exact hostname match (`www.example.com` and `example.com` are treated as different tabs).
|
|
243
|
-
|
|
244
|
-
**Parameters:**
|
|
245
|
-
- `url` (string, required) - The URL whose hostname tab should be closed
|
|
246
|
-
|
|
247
|
-
**Examples:**
|
|
248
|
-
```javascript
|
|
249
|
-
// Close tab for a domain
|
|
250
|
-
{ url: "https://example.com" }
|
|
251
|
-
|
|
252
|
-
// This will close the tab for portal.azure.com
|
|
253
|
-
{ url: "https://portal.azure.com/dashboard" }
|
|
254
|
-
```
|
|
255
|
-
|
|
256
|
-
**Use cases:**
|
|
257
|
-
- Clear authentication/session state
|
|
258
|
-
- Free up browser memory
|
|
259
|
-
- Reset to fresh state before new login
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
## Configuration (Optional)
|
|
264
|
-
|
|
265
|
-
Environment variables for advanced setup:
|
|
266
|
-
|
|
267
|
-
| Variable | Description | Default |
|
|
268
|
-
|----------|-------------|---------|
|
|
269
|
-
| `CHROME_PATH` | Path to Chrome/Edge | Auto-detect |
|
|
270
|
-
| `CHROME_USER_DATA_DIR` | Browser profile directory | `%LOCALAPPDATA%/ChromeAuthProfile` |
|
|
271
|
-
| `CHROME_REMOTE_DEBUG_PORT` | DevTools port | `9222` |
|
|
272
|
-
|
|
273
|
-
## Troubleshooting
|
|
274
|
-
|
|
275
|
-
**Browser doesn't open?**
|
|
276
|
-
- Make sure Chrome or Edge is installed
|
|
277
|
-
- Try setting `CHROME_PATH` explicitly
|
|
278
|
-
|
|
279
|
-
**Can't connect to browser?**
|
|
280
|
-
- Close all Chrome instances and try again
|
|
281
|
-
- Check if port 9222 is in use
|
|
282
|
-
|
|
283
|
-
**Authentication not preserved?**
|
|
284
|
-
- Keep the browser tab open (default behavior)
|
|
285
|
-
- Use the same domain for related requests
|
|
286
|
-
|
|
287
|
-
## Links
|
|
288
|
-
|
|
289
|
-
- [GitHub](https://github.com/cherchyk/MCPBrowser)
|
|
290
|
-
- [npm](https://www.npmjs.com/package/mcpbrowser)
|
|
291
|
-
- [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=cherchyk.mcpbrowser)
|
|
292
|
-
- [Issues](https://github.com/cherchyk/MCPBrowser/issues)
|
|
293
|
-
|
|
294
|
-
## License
|
|
295
|
-
|
|
296
|
-
MIT
|
|
1
|
+
# MCPBrowser (MCP Browser)
|
|
2
|
+
|
|
3
|
+
[](https://marketplace.visualstudio.com/items?itemName=cherchyk.mcpbrowser)
|
|
4
|
+
[](https://www.npmjs.com/package/mcpbrowser)
|
|
5
|
+
[](https://modelcontextprotocol.io/quickstart/user)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
|
|
8
|
+
**MCPBrowser is an MCP browser server that gives AI assistants the ability to browse web pages using a real Chrome or Edge browser.** This browser-based MCP server fetches any web page — especially those protected by authentication, CAPTCHAs, anti-bot protection, or requiring JavaScript rendering. Uses your real Chrome/Edge browser for web automation so you can log in normally, then automatically extracts content. Works with corporate SSO, login forms, Cloudflare, and JavaScript-heavy sites (SPAs, dashboards).
|
|
9
|
+
|
|
10
|
+
This is an [MCP (Model Context Protocol)](https://modelcontextprotocol.io/) server using [stdio transport](https://modelcontextprotocol.io/docs/concepts/transports#stdio). Your AI assistant uses this web browser MCP server when standard HTTP requests fail — pages requiring authentication, CAPTCHA protection, or heavy JavaScript (SPAs). Once connected, the browser MCP server can navigate through websites, interact with elements, and send HTML back to the AI assistant. This gives your AI the ability to browse the web just like you do.
|
|
11
|
+
|
|
12
|
+
Example workflow for AI assistant to use MCPBrowser
|
|
13
|
+
|
|
14
|
+
```
|
|
15
|
+
1. fetch_webpage → Load the login page
|
|
16
|
+
2. type_text → Enter username
|
|
17
|
+
3. type_text → Enter password
|
|
18
|
+
4. click_element → Click "Sign In"
|
|
19
|
+
5. get_current_html → Extract the content after login
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
## Contents
|
|
24
|
+
|
|
25
|
+
- [Requirements](#requirements)
|
|
26
|
+
- [Installation](#installation)
|
|
27
|
+
- [VS Code Extension](#option-1-vs-code-extension)
|
|
28
|
+
- [Claude Code](#option-2-claude-code)
|
|
29
|
+
- [Claude Desktop](#option-3-claude-desktop)
|
|
30
|
+
- [npm Package](#option-4-npm-package)
|
|
31
|
+
- [MCP Tools](#mcp-tools)
|
|
32
|
+
- [fetch_webpage](#fetch_webpage)
|
|
33
|
+
- [click_element](#click_element)
|
|
34
|
+
- [type_text](#type_text)
|
|
35
|
+
- [get_current_html](#get_current_html)
|
|
36
|
+
- [close_tab](#close_tab)
|
|
37
|
+
- [Configuration](#configuration-optional)
|
|
38
|
+
- [Troubleshooting](#troubleshooting)
|
|
39
|
+
- [Links](#links)
|
|
40
|
+
|
|
41
|
+
## Requirements
|
|
42
|
+
|
|
43
|
+
- Chrome or Edge browser
|
|
44
|
+
- Node.js 18+
|
|
45
|
+
|
|
46
|
+
## Installation
|
|
47
|
+
|
|
48
|
+
| # | Platform | Difficulty |
|
|
49
|
+
|---|----------|------------|
|
|
50
|
+
| 1 | [VS Code Extension](#option-1-vs-code-extension) | One Click |
|
|
51
|
+
| 2 | [Claude Code](#option-2-claude-code) | One Command |
|
|
52
|
+
| 3 | [Claude Desktop](#option-3-claude-desktop) | Manual |
|
|
53
|
+
| 4 | [npm Package](#option-4-npm-package) | Manual |
|
|
54
|
+
|
|
55
|
+
### Option 1: VS Code Extension
|
|
56
|
+
|
|
57
|
+
Install from [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=cherchyk.mcpbrowser) or run:
|
|
58
|
+
```bash
|
|
59
|
+
code --install-extension cherchyk.mcpbrowser
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
The extension automatically installs and configures everything for GitHub Copilot.
|
|
63
|
+
|
|
64
|
+
### Option 2: Claude Code
|
|
65
|
+
|
|
66
|
+
```bash
|
|
67
|
+
claude mcp add mcpbrowser --scope user -- npx -y mcpbrowser@latest
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
Verify it's working:
|
|
71
|
+
```bash
|
|
72
|
+
claude mcp list
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
You should see:
|
|
76
|
+
```
|
|
77
|
+
mcpbrowser: npx -y mcpbrowser@latest - ✓ Connected
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
That's it! Ask Claude to fetch any protected page:
|
|
81
|
+
> "Fetch https://portal.azure.com using mcpbrowser"
|
|
82
|
+
|
|
83
|
+
### Option 3: Claude Desktop
|
|
84
|
+
|
|
85
|
+
Add to your config file:
|
|
86
|
+
|
|
87
|
+
**Windows:** `%APPDATA%\Claude\claude_desktop_config.json`
|
|
88
|
+
**Mac:** `~/Library/Application Support/Claude/claude_desktop_config.json`
|
|
89
|
+
|
|
90
|
+
```json
|
|
91
|
+
{
|
|
92
|
+
"mcpServers": {
|
|
93
|
+
"MCPBrowser": {
|
|
94
|
+
"command": "npx",
|
|
95
|
+
"args": ["-y", "mcpbrowser@latest"]
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
Restart Claude Desktop after saving.
|
|
102
|
+
|
|
103
|
+
### Option 4: npm Package
|
|
104
|
+
|
|
105
|
+
For VS Code (GitHub Copilot) manual setup, add to your `mcp.json`:
|
|
106
|
+
|
|
107
|
+
**Windows:** `%APPDATA%\Code\User\mcp.json`
|
|
108
|
+
**Mac/Linux:** `~/.config/Code/User/mcp.json`
|
|
109
|
+
|
|
110
|
+
```json
|
|
111
|
+
{
|
|
112
|
+
"servers": {
|
|
113
|
+
"MCPBrowser": {
|
|
114
|
+
"type": "stdio",
|
|
115
|
+
"command": "npx",
|
|
116
|
+
"args": ["-y", "mcpbrowser@latest"]
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
## MCP Tools
|
|
123
|
+
|
|
124
|
+
### `fetch_webpage`
|
|
125
|
+
|
|
126
|
+
Fetches web pages using your Chrome/Edge browser. Handles authentication, CAPTCHA, SSO, anti-bot protection, and JavaScript-heavy sites. Opens the URL in a browser tab (reuses existing tab for same domain) and waits for the page to fully load before returning content. **Automatically detects SPAs** (React, Vue, Angular) and waits for JavaScript to render content.
|
|
127
|
+
|
|
128
|
+
**Parameters:**
|
|
129
|
+
- `url` (string, required) - The URL to fetch
|
|
130
|
+
- `removeUnnecessaryHTML` (boolean, optional, default: `true`) - Remove unnecessary HTML for size reduction by ~90%
|
|
131
|
+
- `postLoadWait` (number, optional, default: `0`) - Additional milliseconds to wait after page load before extracting HTML. Use for pages that need extra time to render.
|
|
132
|
+
|
|
133
|
+
**Examples:**
|
|
134
|
+
```javascript
|
|
135
|
+
// Basic fetch
|
|
136
|
+
{ url: "https://example.com" }
|
|
137
|
+
|
|
138
|
+
// Fetch with extra wait time for slow-rendering pages
|
|
139
|
+
{ url: "https://dashboard.example.com", postLoadWait: 2000 }
|
|
140
|
+
|
|
141
|
+
// Keep full HTML without cleanup
|
|
142
|
+
{ url: "https://example.com", removeUnnecessaryHTML: false }
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
---
|
|
146
|
+
|
|
147
|
+
### `click_element`
|
|
148
|
+
|
|
149
|
+
Clicks on any clickable element (buttons, links, divs with onclick handlers, etc.). Can target by CSS selector or visible text content. Automatically scrolls element into view and waits for page stability after clicking.
|
|
150
|
+
|
|
151
|
+
**⚠️ Note:** Page must be already loaded via `fetch_webpage` first.
|
|
152
|
+
|
|
153
|
+
**Parameters:**
|
|
154
|
+
- `url` (string, required) - The URL of the page (must match a previously fetched page)
|
|
155
|
+
- `selector` (string, optional) - CSS selector for the element (e.g., `#submit-btn`, `.login-button`)
|
|
156
|
+
- `text` (string, optional) - Text content to search for if selector not provided (e.g., "Sign In", "Submit")
|
|
157
|
+
- `returnHtml` (boolean, optional, default: `true`) - Whether to wait for stability and return HTML after clicking. Set to `false` for fast form interactions (checkboxes, radio buttons)
|
|
158
|
+
- `removeUnnecessaryHTML` (boolean, optional, default: `true`) - Remove unnecessary HTML for size reduction. Only used when `returnHtml` is `true`
|
|
159
|
+
- `postClickWait` (number, optional, default: `1000`) - Milliseconds to wait after click for SPAs to render dynamic content
|
|
160
|
+
- `waitForElementTimeout` (number, optional, default: `1000`) - Maximum time to wait for element in milliseconds
|
|
161
|
+
|
|
162
|
+
**Examples:**
|
|
163
|
+
```javascript
|
|
164
|
+
// Click by text content
|
|
165
|
+
{ url: "https://example.com", text: "Sign In" }
|
|
166
|
+
|
|
167
|
+
// Click by CSS selector
|
|
168
|
+
{ url: "https://example.com", selector: "#login-button" }
|
|
169
|
+
|
|
170
|
+
// Click without waiting for HTML (fast checkbox toggle)
|
|
171
|
+
{ url: "https://example.com", selector: "#agree-checkbox", returnHtml: false }
|
|
172
|
+
|
|
173
|
+
// Click with custom wait time
|
|
174
|
+
{ url: "https://example.com", text: "Load More", postClickWait: 2000 }
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
---
|
|
178
|
+
|
|
179
|
+
### `type_text`
|
|
180
|
+
|
|
181
|
+
Types text into an input field, textarea, or other editable element. Simulates human-like typing with configurable delay between keystrokes. Automatically clears existing text by default.
|
|
182
|
+
|
|
183
|
+
**⚠️ Note:** Page must be already loaded via `fetch_webpage` first.
|
|
184
|
+
|
|
185
|
+
**Parameters:**
|
|
186
|
+
- `url` (string, required) - The URL of the page (must match a previously fetched page)
|
|
187
|
+
- `selector` (string, required) - CSS selector for the input element (e.g., `#username`, `input[name="email"]`)
|
|
188
|
+
- `text` (string, required) - Text to type into the field
|
|
189
|
+
- `clear` (boolean, optional, default: `true`) - Whether to clear existing text first
|
|
190
|
+
- `typeDelay` (number, optional, default: `50`) - Delay between keystrokes in milliseconds (simulates human typing)
|
|
191
|
+
- `returnHtml` (boolean, optional, default: `true`) - Whether to wait for stability and return HTML after typing
|
|
192
|
+
- `removeUnnecessaryHTML` (boolean, optional, default: `true`) - Remove unnecessary HTML for size reduction. Only used when `returnHtml` is `true`
|
|
193
|
+
- `postTypeWait` (number, optional, default: `1000`) - Milliseconds to wait after typing for SPAs to render dynamic content
|
|
194
|
+
- `waitForElementTimeout` (number, optional, default: `5000`) - Maximum time to wait for element in milliseconds
|
|
195
|
+
|
|
196
|
+
**Examples:**
|
|
197
|
+
```javascript
|
|
198
|
+
// Basic text input
|
|
199
|
+
{ url: "https://example.com", selector: "#email", text: "user@example.com" }
|
|
200
|
+
|
|
201
|
+
// Append text without clearing
|
|
202
|
+
{ url: "https://example.com", selector: "#search", text: " advanced", clear: false }
|
|
203
|
+
|
|
204
|
+
// Fast typing without human simulation
|
|
205
|
+
{ url: "https://example.com", selector: "#username", text: "john", typeDelay: 0 }
|
|
206
|
+
|
|
207
|
+
// Type without waiting for HTML return (faster)
|
|
208
|
+
{ url: "https://example.com", selector: "#field", text: "value", returnHtml: false }
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
---
|
|
212
|
+
|
|
213
|
+
### `get_current_html`
|
|
214
|
+
|
|
215
|
+
Gets the current HTML from an already-loaded page **WITHOUT** navigating or reloading. Much faster than `fetch_webpage` since it only extracts the current DOM state. Use this after interactions (click, type) to get the updated page content efficiently.
|
|
216
|
+
|
|
217
|
+
**⚠️ Note:** Page must be already loaded via `fetch_webpage` first.
|
|
218
|
+
|
|
219
|
+
**Parameters:**
|
|
220
|
+
- `url` (string, required) - The URL of the page (must match a previously fetched page)
|
|
221
|
+
- `removeUnnecessaryHTML` (boolean, optional, default: `true`) - Remove unnecessary HTML for size reduction by ~90%
|
|
222
|
+
|
|
223
|
+
**Examples:**
|
|
224
|
+
```javascript
|
|
225
|
+
// Get current HTML after interactions
|
|
226
|
+
{ url: "https://example.com" }
|
|
227
|
+
|
|
228
|
+
// Get full HTML without cleanup
|
|
229
|
+
{ url: "https://example.com", removeUnnecessaryHTML: false }
|
|
230
|
+
```
|
|
231
|
+
|
|
232
|
+
**Performance comparison:**
|
|
233
|
+
- `fetch_webpage`: 2-5 seconds (full page reload)
|
|
234
|
+
- `get_current_html`: 0.1-0.3 seconds (just extracts HTML) ✅
|
|
235
|
+
|
|
236
|
+
---
|
|
237
|
+
|
|
238
|
+
### `close_tab`
|
|
239
|
+
|
|
240
|
+
Closes the browser tab for the given URL's hostname. Removes the page from the tab pool and forces a fresh session on the next visit to that hostname. Useful for clearing authentication state, managing memory, or starting fresh with a domain.
|
|
241
|
+
|
|
242
|
+
**⚠️ Note:** Uses exact hostname match (`www.example.com` and `example.com` are treated as different tabs).
|
|
243
|
+
|
|
244
|
+
**Parameters:**
|
|
245
|
+
- `url` (string, required) - The URL whose hostname tab should be closed
|
|
246
|
+
|
|
247
|
+
**Examples:**
|
|
248
|
+
```javascript
|
|
249
|
+
// Close tab for a domain
|
|
250
|
+
{ url: "https://example.com" }
|
|
251
|
+
|
|
252
|
+
// This will close the tab for portal.azure.com
|
|
253
|
+
{ url: "https://portal.azure.com/dashboard" }
|
|
254
|
+
```
|
|
255
|
+
|
|
256
|
+
**Use cases:**
|
|
257
|
+
- Clear authentication/session state
|
|
258
|
+
- Free up browser memory
|
|
259
|
+
- Reset to fresh state before new login
|
|
260
|
+
|
|
261
|
+
|
|
262
|
+
|
|
263
|
+
## Configuration (Optional)
|
|
264
|
+
|
|
265
|
+
Environment variables for advanced setup:
|
|
266
|
+
|
|
267
|
+
| Variable | Description | Default |
|
|
268
|
+
|----------|-------------|---------|
|
|
269
|
+
| `CHROME_PATH` | Path to Chrome/Edge | Auto-detect |
|
|
270
|
+
| `CHROME_USER_DATA_DIR` | Browser profile directory | `%LOCALAPPDATA%/ChromeAuthProfile` |
|
|
271
|
+
| `CHROME_REMOTE_DEBUG_PORT` | DevTools port | `9222` |
|
|
272
|
+
|
|
273
|
+
## Troubleshooting
|
|
274
|
+
|
|
275
|
+
**Browser doesn't open?**
|
|
276
|
+
- Make sure Chrome or Edge is installed
|
|
277
|
+
- Try setting `CHROME_PATH` explicitly
|
|
278
|
+
|
|
279
|
+
**Can't connect to browser?**
|
|
280
|
+
- Close all Chrome instances and try again
|
|
281
|
+
- Check if port 9222 is in use
|
|
282
|
+
|
|
283
|
+
**Authentication not preserved?**
|
|
284
|
+
- Keep the browser tab open (default behavior)
|
|
285
|
+
- Use the same domain for related requests
|
|
286
|
+
|
|
287
|
+
## Links
|
|
288
|
+
|
|
289
|
+
- [GitHub](https://github.com/cherchyk/MCPBrowser)
|
|
290
|
+
- [npm](https://www.npmjs.com/package/mcpbrowser)
|
|
291
|
+
- [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=cherchyk.mcpbrowser)
|
|
292
|
+
- [Issues](https://github.com/cherchyk/MCPBrowser/issues)
|
|
293
|
+
|
|
294
|
+
## License
|
|
295
|
+
|
|
296
|
+
MIT
|