使用说明
代理Jake浏览器MCP服务器
MCP（模型上下文协议）服务器，使AI代理能够自动化Chrome浏览器交互。
概述
该服务器实现了MCP协议，将浏览器自动化工具暴露给像Claude这样的AI代理。它与 代理jake浏览器mcp扩展 以提供完全的浏览器控制。
建筑
┌─────────────────┐ stdio ┌─────────────────┐ WebSocket ┌──────────────────┐
│ AI Agent │◄──────────────►│ MCP Server │◄──────────────►│ Chrome Extension │
│ (Claude, etc.) │ JSON-RPC │ (This project) │ port 8765 │ │
└─────────────────┘ └─────────────────┘ └────────┬─────────┘
│
│ Chrome
│ Debugger
│ API
▼
┌──────────────────┐
│ Browser Tab │
│ (Any website) │
└──────────────────┘
安装
git clone https://github.com/SnakeO/agent-jake-browser-mcp-server.git
cd agent-jake-browser-mcp-server
npm install
npm run build
用法
使用Claude桌面版
添加到您的 claude_desktop_config.json:
{
"mcpServers": {
"browser": {
"command": "node",
"args": ["/path/to/agent-jake-browser-mcp-server/dist/index.js"]
}
}
}
使用VS代码/光标
添加到MCP设置中：
{
"mcp.servers": {
"browser": {
"command": "node",
"args": ["/path/to/agent-jake-browser-mcp-server/dist/index.js"]
}
}
}
CLI选项
node dist/index.js [options]
Options:
--port <number> WebSocket port for extension connection (default: 8765)
--verbose Enable verbose logging
--help Show help
工具
导航（4个工具）
| 工具 | 说明 |
|---|---|
browser_navigate |
导航到URL |
browser_go_back |
返回浏览器历史记录 |
browser_go_forward |
在浏览器历史记录中前进 |
browser_reload |
重新加载当前页面 |
页面检查（1个工具）
| 工具 | 说明 |
|---|---|
browser_snapshot |
获取页面的ARIA可访问性树快照 |
互动（6个工具）
| 工具 | 说明 |
|---|---|
browser_click |
点击一个元素 |
browser_type |
在输入框中键入文本 |
browser_hover |
将鼠标悬停在元素上 |
browser_drag |
将元素拖动到其他位置 |
browser_select_option |
从下拉列表中选择一个选项 |
browser_press_key |
按键盘键或组合键 |
元素查询（5个工具）
| 工具 | 说明 |
|---|---|
browser_get_text |
获取元素的文本内容 |
browser_get_attribute |
从元素中获取属性值 |
browser_is_visible |
检查元素是否可见 |
browser_wait_for_element |
等待元素出现 |
browser_highlight |
突出显示要调试的元素 |
选项卡管理（4个工具）
| 工具 | 说明 |
|---|---|
browser_new_tab |
在新选项卡中打开URL |
browser_list_tabs |
列出所有打开的浏览器选项卡 |
browser_switch_tab |
切换到其他选项卡 |
browser_close_tab |
关闭浏览器选项卡 |
实用工具（3个工具）
| 工具 | 说明 |
|---|---|
browser_wait |
等待指定时间 |
browser_screenshot |
对页面进行截图 |
browser_get_console_logs |
获取控制台日志消息 |
示例用法
一旦连接，AI代理就可以使用这些工具：
AI: I'll help you fill out that form. First, let me take a snapshot of the page.
[calls browser_snapshot]
AI: I can see the form fields. Let me fill in your name.
[calls browser_type with ref="e12", text="John Doe"]
AI: Now I'll click the submit button.
[calls browser_click with ref="e15"]
发展
# Install dependencies
npm install
# Build
npm run build
# Development with watch
npm run dev
# Run tests
npm test
# Type checking
npm run typecheck
项目结构
src/
├── index.ts # Entry point
├── server.ts # MCP server implementation
├── context.ts # Extension communication context
├── ws-server.ts # WebSocket server for extension
├── types.ts # TypeScript type definitions
├── tools/ # Tool implementations
│ ├── index.ts # Tool registry
│ ├── navigation.ts # Navigate, back, forward, reload
│ ├── snapshot.ts # ARIA snapshot
│ ├── interaction.ts # Click, type, hover, drag
│ ├── queries.ts # Get text, attributes, visibility
│ ├── tabs.ts # Tab management
│ └── utility.ts # Wait, screenshot, console logs
└── utils/ # Utilities
├── logger.ts # Logging
└── port.ts # Port management
技术栈
- Node.js
- TypeScript
- MCP SDK（@anthropic/MCP-SDK）
- Zod用于模式验证
- 用于扩展通信的WebSocket（ws）
- tsup用于捆绑
相关
- 代理jake浏览器mcp扩展 -执行浏览器命令的Chrome扩展程序
许可证
麻省理工学院-参见 许可证
