Chrome Extension Bridge MCP

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

灵感来源于 playcanvas/editor-mcp-server。

概述

这个项目包含两个主要组件：

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

通过这种设置，你可以：

• 从你的本地服务器访问浏览器 API 和 DOM 元素
• 在网页的上下文中执行 JavaScript 函数
• 从网页检索资源和信息
• 特别是，访问全局对象，例如 editor，例如：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 Extension Loaded”

用法

服务器端

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",                  // 工具名称
  "use 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 signal received");  // 记录何时收到 SIGINT
  await client.dispose();                 // 关闭 WebSocket 连接
  process.exit(0);                        // 退出进程
});

扩展程序端

默认情况下，该扩展程序会自动连接到 ws://localhost:54319。 你可以在 extension/content.js 中修改此设置。

该扩展程序公开了两个用于服务器命令的主要入口点：

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

API 参考

Client

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

WebSocket 协议

该扩展程序使用一个简单的类似 JSON-RPC 的协议：

请求:

{
  "id": "unique-request-id",
  "method": "mcp:resource.navigator.userAgent",
  "params": {}
}

响应:

{
  "id": "unique-request-id",
  "result": "Mozilla/5.0 ..."
}

许可证

MIT