MCPMonkey

MCPMonkey

MCPMonkey 是 Violentmonkey 的一个分支，在其强大的用户脚本功能基础上扩展了对 Model Context Protocol（MCP）服务的支持。本项目旨在弥合 AI 大模型与浏览器交互之间的差距。

关于 MCPMonkey

MCPMonkey 增强了 Violentmonkey 的浏览器扩展功能，为管理和使用 Model Context Protocol（MCP） 服务提供了友好的界面。这使得 Cursor 等工具中使用的 AI 大模型能够以有意义的方式与浏览器交互。

当前功能

MCPMonkey 目前实现了以下主要功能：

• 标签页管理（browserAction 工具）：

  • 获取所有已打开标签页的信息
  • 创建新标签页
  • 关闭标签页
  • 激活（聚焦）标签页
  • 复制标签页

• 页面样式提取（getPageStyles 工具）：

  • 提取网页的样式信息，供 AI 分析
  • 返回有关样式的结构化 JSON 数据
  • 包含全局样式、计算样式、配色方案和排版信息

• 用户脚本支持：完全兼容现有用户脚本（继承自 Violentmonkey）

计划中的功能

以下功能计划在未来开发：

• MCP 服务管理：直接从浏览器安装和管理多个 MCP 服务
• 增强浏览器访问能力：允许 AI 工具与以下内容交互：
  • 浏览历史记录
  • 书签
  • 开发者控制台日志
  • 其他已安装的扩展
• 权限控制：精细控制每个 MCP 服务可访问的资源
• 社区中心：分享和发现 MCP 服务及脚本

Cursor MCP 集成

MCPMonkey 由两个主要组件组成，需按以下顺序安装：

1. MCP 服务
2. 浏览器扩展

1. 将 MCP 服务添加到 Cursor

使用已发布的 NPM 包：

• 在 Cursor 中，前往 Settings > Features > MCP Servers
• 点击 + Add New MCP Server 按钮
• 配置连接：
  • 名称：mcpmonkey-server
  • 类型：command
  • 命令：npx mcpmonkey-server

或者自行构建：

# Navigate to the server directory
cd mcpmonkey-server

# Install dependencies
yarn

# Build the server
yarn build

# Run the server
node build/index.js

• 在 Cursor 中配置：
  • 名称：mcpmonkey-server
  • 类型：command
  • 命令：node /absolute/path/to/mcpmonkey-server/build/index.js

Cursor 使用 MCP 的 stdio 传输与 MCPMonkey 服务通信。配置完成后，Composer 中的 Cursor Agent 会在相关情况下自动使用可用的 MCP 工具。

注意：在 Cursor 0.46+ 中，MCP 设置位于独立的选项卡中，并且支持 .cursor/mcp.json 文件。了解更多。

2. 安装浏览器扩展

Firefox 安装

1. 按照下方的开发说明构建项目
2. 打开 Firefox 并前往 about:debugging
3. 点击左侧边栏中的 “This Firefox”
4. 点击 “Load Temporary Add-on...”
5. 前往 MCPMonkey 构建目录中的 dist 文件夹
6. 选择 dist 文件夹中的任意文件以加载扩展

注意：由于这是临时安装，每次重启 Firefox 后都需要重新加载扩展。

我们计划很快提供 .xpi 文件。

MCPMonkey 的浏览器工具

我们实现的 MCP 工具为 Cursor 等产品中的 AI 大模型提供强大的浏览器交互能力：

• browserAction Tool：

  • 获取所有打开标签页的信息
  • 创建新标签页
  • 关闭标签页
  • 激活（聚焦）标签页
  • 复制标签页

• getPageStyles Tool：

  • 提取页面样式信息（全局样式、计算样式、配色方案、排版）
  • 返回结构化 JSON 数据，供 AI 分析
  • 使用内容脚本桥接与网页通信

这些工具通过端口 3025 上的 WebSocket 连接，让 AI 模型能够与你的浏览会话进行有意义且能感知上下文的交互。

在开发和测试时，你可以使用 MCP 检查器运行服务：

# Run with MCP inspector for debugging
npx @modelcontextprotocol/inspector node build/index.js

该服务实现了 stdio 和 WebSocket 接口，WebSocket 服务运行在端口 3025 上，用于与浏览器扩展进行内部通信。

使用场景

• 面向开发者：

  • 通过 Cursor 或其他 AI 工具直接访问浏览器资源
  • 在 AI 开发环境中查看控制台日志和调试信息
  • 根据特定开发需求创建自定义 MCP 服务

• 面向用户：

  • 让桌面聊天机器人帮你找回上周访问过的网站
  • 允许 AI 工具起草社交媒体消息或电子邮件
  • 通过自然语言命令自动执行浏览器交互

开发

扩展开发

安装 Node.js 和 Yarn v1.x。
Node.js 的版本应与 package.json 中的 "node" 键匹配。

# Install dependencies
$ yarn

# Watch and compile
$ yarn build

然后从 'dist/' 加载扩展。

技术详情

当前已实现的技术组件：

• WebSocket 通信：扩展和服务通过端口 3025 上的 WebSocket 进行内部通信
• 内容脚本桥接：通过安全消息传递与网页内容交互
• Zod 架构验证：通过运行时类型检查确保组件之间的数据完整性
• Stdio 传输：Cursor 等外部 MCP 客户端通过 stdio 传输连接

鸣谢

本项目基于 Violentmonkey 构建。它是一款优秀的用户脚本管理器，为 MCPMonkey 的增强功能奠定了基础。我们感谢 Violentmonkey 团队和贡献者所做的出色工作。

社区

https://mcpmonkey.com - 获取更多文档和 MCP 工具脚本

许可证

本项目采用与 Violentmonkey 相同的条款授权。详情请参阅 LICENSE 文件。

我们未来可能会添加付费功能。