AI导哈

浏览器扩展工具

MCPMonkey是一款基于Violentmonkey的浏览器扩展工具，通过支持模型上下文协议（MCP）服务器，实现AI语言模型与浏览器交互的功能。

  • by kstrikis
  • JavaScript
  • 本地部署
  • 13 星标
  • 更新于
在 GitHub 查看 kstrikis/MCPMonkey

使用说明

MCPMonkey

MCPMonkey是 暴力猴子，扩展其强大的用户脚本功能以支持模型上下文协议（MCP）服务器。该项目旨在弥合人工智能语言模型和浏览器交互之间的差距。

关于MCPMonkey

MCPMonkey增强了Violentmonkey的浏览器扩展功能，为管理和使用提供了用户友好的界面 模型上下文协议（MCP） 服务器。这允许像Cursor中使用的AI语言模型以有意义的方式与浏览器进行交互。

特点

MCPMonkey目前实现了以下关键功能：

  • 选项卡管理（浏览器操作工具）:

    • 获取所有打开选项卡的信息
    • 创建新选项卡
    • 关闭选项卡
    • 激活（聚焦）选项卡
    • 重复选项卡

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

    • 从网页中提取样式信息以进行AI分析
    • 返回关于样式的结构化JSON数据
    • 包括全局样式、计算样式、配色方案、排版

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

计划的功能

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

  • MCP服务器管理：直接从浏览器安装和管理多个MCP服务器
  • 增强浏览器访问：允许AI工具与以下对象交互：
    • 浏览历史记录
    • 书签
    • 开发人员控制台日志
    • 其他已安装的扩展
  • 权限控制：对每个MCP服务器可以访问的资源进行细粒度控制
  • 社区中心：共享和发现MCP服务器和脚本

光标MCP集成

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

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

1.将MCP服务器添加到游标

使用已发布的 NPM包:

  • 在光标中，转到 Settings > Features > MCP Servers
  • 点击 + Add New MCP Server 按钮
  • 使用以下配置连接：
    • 名称：mcpmonkey服务器
    • 类型：命令
    • 命令： 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
  • 在游标中配置：
    • 名称：mcpmonkey服务器
    • 类型：命令
    • 命令： node /absolute/path/to/mcpmonkey-server/build/index.js

Cursor使用用于MCP通信的stdio传输连接到MCPMonkey服务器。配置后，Composer中的Cursor代理将在相关时自动使用可用的MCP工具。

注意：在Cursor 0.46+MCP中，设置位于自己的选项卡中，并且支持.coursor/MCP.json文件。 更多信息请点击此处。

2.浏览器扩展安装

Firefox安装

  1. 按照以下开发说明构建项目
  2. 打开Firefox并导航到 about:debugging
  3. 点击左侧边栏中的“此Firefox”
  4. 点击“加载临时加载项…”
  5. 导航到 dist MCPMonkey构建目录中的文件夹
  6. 从中选择任何文件 dist 加载扩展名的文件夹

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

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

MCPMonkey的浏览器工具

我们对MCP工具的实现为Cursor中的AI语言模型提供了强大的浏览器交互功能：

  • 浏览器操作工具:

    • 获取所有打开选项卡的信息
    • 创建新选项卡
    • 关闭选项卡
    • 激活（聚焦）选项卡
    • 重复选项卡

  • getPageStyles工具:

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

这些工具允许AI模型通过端口3025上的WebSocket连接与您的浏览会话进行有意义的、上下文感知的交互。

对于开发和测试，您可以使用MCP检查器运行服务器：

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

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

用例

  • 对于开发者:

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

  • 对于用户:

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

发展

扩展开发

安装 Node.js 以及Yarn v1.x。
Node.js的版本应该匹配 "node" 输入 package.json.

# Install dependencies
$ yarn

# Watch and compile
$ yarn build

然后从“dist/”加载扩展。

技术细节

目前实施的技术组件：

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

鸣谢

该项目基于 暴力猴子，一个优秀的用户脚本管理器，为MCPMonkey的增强功能提供了基础。我们感谢Violentmonkey团队和贡献者所做的出色工作。

社区

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

许可证

该项目的许可条款与Violentmonkey相同。请参阅 许可证 文件以获取详细信息。

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

相关 MCP