Chrome 扩展 WebSocket 桥接 MCP

一个Chrome扩展，通过WebSocket连接在网页和本地MCP服务器之间建立桥梁。这使得从您的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. 点击“加载 unpacked”并选择此项目中的 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",                  // 工具名称
  "调用浏览器中的 alert 函数", 
  {
    description: "显示一条警报消息。",
    params: []
  },
  async () => {
    return true;
  }
);

// 注册一个资源，用于获取用户代理字符串
server.resource(
  "navigator.userAgent",
  async () => {
    return navigator.userAgent;
  }
);

// 启动服务器以侦听连接
server.listen(port);

客户端

// 在网页中注入的脚本
const client = new Client();

// 调用资源获取用户代理字符串
client.getResource("navigator.userAgent").then(userAgent => {
  console.log("User Agent:", userAgent);
});

// 调用工具执行 alert
client.tool("alert");

WebSocket 协议

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

请求：

{
  "id": "唯一的请求标识符",
  "method": "mcp:resource.navigator.userAgent",
  "params": {}
}

响应：

{
  "id": "唯一的请求标识符",
  "result": "Mozilla/5.0 ..."
}

许可证

MIT