Chrome Extension Bridge MCP

这是一个Chrome扩展程序，它在网页和本地MCP服务器之间建立WebSocket连接。这允许您与网页资源交互并从您的MCP服务器执行函数。

灵感来自 playcanvas/editor-mcp-server。

概览

该项目由两个主要组件组成：

1. Chrome扩展程序：向网页注入客户端脚本，该脚本与本地服务器建立WebSocket连接。
2. 本地MCP服务器：一个WebSocket服务器，可以向扩展发送命令并接收响应。

通过这种设置，您可以：

• 从本地服务器访问浏览器API和DOM元素
• 在网页上下文中执行JavaScript函数
• 从网页检索资源和信息
• 特别是访问全局对象如编辑器，例如：https://threejs.org/editor/。您可以使用网站公开的window.editor来控制编辑器。就像playcanvas/editor-mcp-server一样。

安装

设置

1. 克隆仓库：

git clone https://github.com/yourusername/chrome-extension-socket-mcp.git
cd chrome-extension-socket-mcp

2. 安装依赖项：

npm install

开发

运行以下命令以开发模式构建扩展：

npm run debug

加载扩展

1. 打开Chrome并导航到chrome://extensions/
2. 通过切换右上角的开关启用“开发者模式”
3. 点击“加载已解压的扩展”，并选择此项目中的extension文件夹
4. 扩展现在已安装。您应该在任何网页的右上角看到一个小的红色指示器，表示“MCP扩展已加载”

使用

服务端

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod"; 
import { Client } from "../src/client";

// 定义WebSocket连接的端口
// 这个端口应与您的Chrome扩展程序中的WebSocket连接端口匹配
const port = 54319;
const client = new Client(port);

// 建立与Chrome扩展程序的连接
await client.connect();

// 创建一个新的MCP服务器实例，带有名称和版本
const server = new McpServer({
  name: "Extension-Socket-Server",
  version: "1.0.0",
});

// 注册一个工具，用于在浏览器中执行window.alert函数
// 这演示了如何从服务器与浏览器API交互
server.tool(
  "alert",                  // 工具名称
  "使用window.alert",       // 工具描述
  { message: z.string() },  // 使用Zod定义的工具参数模式
  async ({ message }) => {  // 工具实现函数
    // 调用扩展程序在浏览器上下文中执行alert
    const response = await client.callToolExtension("alert", { message });
    return response;
  }
);

// 注册一个资源，用于获取浏览器的用户代理
// 这演示了如何从服务器访问浏览器属性
server.resource(
  "userAgent",              // 资源名称
  "useragent://chrome",     // 资源URI模板
  async (uri) => {          // 资源处理函数
    // 从浏览器获取用户代理
    const { content } = await client.callResourceExtension("navigator.userAgent");
    // 返回格式化的资源
    return {
      contents: [
        {
          uri: uri.href,
          text: content[0].text,
        },
      ],
    };
  }
);

// 为MCP服务器设置传输层
// StdioServerTransport使用标准输入/输出进行通信
const transport = new StdioServerTransport();
await server.connect(transport);

// 优雅地处理应用程序终止
process.on("SIGINT", async () => {
  console.log("接收到SIGINT信号");  // 当接收到SIGINT时记录日志
  await client.dispose();            // 关闭WebSocket连接
  process.exit(0);                   // 退出进程
});

扩展端

扩展默认自动连接到ws://localhost:54319。您可以在extension/content.js中修改这一点。

扩展为服务器命令提供了两个主要入口点：

• mcp:resource.* - 用于访问浏览器资源和属性
• mcp:tool.* - 用于在浏览器上下文中执行函数

API参考

客户端

• new Client(port) - 创建一个新的客户端实例，连接到指定的端口
• connect() - 连接到MCP服务器
• callToolExtension(toolName, params) - 在浏览器中调用工具
• callResourceExtension(resourceName, params) - 从浏览器获取资源
• dispose() - 关闭连接

WebSocket协议

扩展使用类似于JSON-RPC的简单协议：

请求：

{
  "id": "唯一请求ID",
  "method": "mcp:resource.navigator.userAgent",
  "params": {}
}

响应：

{
  "id": "唯一请求ID",
  "result": "Mozilla/5.0 ..."
}

许可证

MIT