🐒 MCP猴子
通过模型上下文协议将AI编码代理连接到您的Chrome浏览器。
MCP Monkey允许您定义在经过身份验证的浏览器会话中运行的自定义JavaScript函数,并将其作为可调用工具公开给任何与MCP兼容的AI代理(Cursor、Windsurf、Claude Desktop等)。把它想象成 油猴 满足 主控程序.
______________________________________________________________________
为什么?
AI编码代理无法看到屏幕上的内容。如果你需要一个代理来检查RunPod上的部署状态、读取Jira票证或从内部仪表板抓取数据,它根本无法做到——这些页面需要你的登录会话。
MCP Monkey通过让你编写运行以下代码的小JavaScript代码段来解决这个问题 在实际的浏览器选项卡中,您的Cookie和身份验证已存在。代理调用一个工具,脚本在匹配选项卡中执行,结果返回。
______________________________________________________________________
建筑
┌──────────────┐ stdio (MCP) ┌──────────────────┐ WebSocket ┌─────────────────────┐
│ AI Agent │ ◄──────────────────► │ MCP-Monkey │ ◄─────────────► │ Chrome Extension │
│ (Cursor, etc)│ │ Server (Node.js)│ ws://8765 │ (Manifest V3) │
└──────────────┘ └──────────────────┘ └──────────┬──────────┘
│
chrome.scripting
.executeScript()
│
▼
┌──────────────────────┐
│ Your Browser Tab │
│ (with auth cookies) │
└──────────────────────┘______________________________________________________________________
Monorepo结构
mcp-monkey/
├── mcp-monkey-server/ # Node.js MCP server
│ ├── index.js # Server entry point — MCP + WebSocket
│ └── package.json
└── mcp-monkey-extension/ # Chrome extension (Manifest V3)
├── manifest.json
├── background.js # Service worker — WS client + script execution
├── popup.html # Extension popup UI
├── popup.js # Popup logic — script CRUD
├── popup.css # Popup styles
└── icons/ # Extension icons______________________________________________________________________
设置
先决条件
- Node.js ≥ 18
- 铬 ≥ 116
1.安装并启动MCP服务器
cd mcp-monkey-server
npm install然后在AI代理的MCP配置中注册服务器。例如,在 光标 (.cursor/mcp.json):
{
"mcpServers": {
"mcp-monkey": {
"command": "node",
"args": ["/absolute/path/to/mcp-monkey-server/index.js"]
}
}
}服务器通过以下方式与AI代理通信 标准 Chrome扩展程序结束后 WebSocket (ws://localhost:8765).2.加载Chrome扩展程序
- 打开
chrome://extensions/在Chrome中。 - 启用 开发者模式 (右上角切换)。
- 点击 加载未打包的 并选择
mcp-monkey-extension/文件夹。 - MCP猴子图标(🐒) 应该出现在您的工具栏中。
3.验证连接
一旦服务器运行(由您的代理启动)并且加载了扩展,扩展弹出徽章应该显示 连接 (绿色)。
你也可以问你的AI代理:
“检查MCP Monkey状态。”
它将调用内置 mcp_monkey_status 工具和报告连接状态+注册脚本。
______________________________________________________________________
用法
通过扩展弹出窗口添加脚本
- 点击🐒 Chrome浏览器中的扩展图标。
- 填写表格:
- 名字 --唯一标识符(字母、数字、连字符、下划线) - 描述 --脚本的作用(这将成为AI看到的工具描述的一部分) - URL模式 --Chrome匹配模式,如 *://github.com/* - JavaScript代码 --将在页面中执行的代码。使用 args 读取代理提供的参数和 return 一个值。
- 点击 保存脚本.
该脚本立即注册为MCP工具,前缀为 monkey_ (例如。, monkey_check-deployment).
示例脚本
姓名: github-pr-info 说明: 获取当前打开的GitHub PR的标题、状态和查看状态。 URL模式: *://github.com/*/pull/* 代码:
const title = document.querySelector('[data-target="issue-header.title"]')?.textContent?.trim();
const state = document.querySelector('.State')?.textContent?.trim();
return JSON.stringify({ title, state });AI代理现在可以调用此工具,从您打开的任何GitHub PR选项卡中读取PR详细信息。
从您的AI代理调用工具
AI代理会自动看到所有注册的MCP Monkey工具。您可以自然地提示它:
“检查我的RunPod部署状态。”
代理人会选对的 monkey_* 工具,在匹配的浏览器选项卡上执行它,并显示结果。
______________________________________________________________________
配置
| 变量 | 默认值 | 描述 |
|---|---|---|
MCP_MONKEY_PORT | 8765 | WebSocket端口(在服务器上设置为env-var) |
______________________________________________________________________
工作原理——数据流
- 代理调用工具 → MCP服务器通过stdio接收请求。
- 服务器发送
execute_script→ 向Chrome扩展程序发送WebSocket消息。 - 扩展程序找到匹配的选项卡 → 使用脚本的URL模式来定位正确的选项卡。
- 脚本在页面的MAIN世界中运行 →
chrome.scripting.executeScript()具有完整的DOM+cookie访问权限。 - 结果被发回 → 扩展→ 网络套接字→ MCP服务器→ 特工。
脚本支持 async/await 并有一个 30秒执行超时.
______________________________________________________________________
默认脚本
首次安装时,扩展程序附带了一个示例 RunPod状态 从RunPod仪表板解析部署状态的脚本。您可以删除它或将其用作编写自己的参考。
______________________________________________________________________
许可证
麻省理工学院
