chrome-extension-bridge-mcp

🚀 Chrome 扩展 WebSocket 桥接 MCP

本项目是一个Chrome扩展，借助WebSocket连接在网页和本地MCP服务器之间搭建桥梁。这一设计让您能够从mcp服务器访问网页资源并执行函数，为网页操作带来更多便利。

受playcanvas/editor-mcp-server项目的启发而开发。

✨ 主要特性

• 项目由Chrome扩展和本地MCP服务器两部分构成。Chrome扩展负责向网页注入客户端脚本，并建立与本地服务器的WebSocket连接；本地MCP服务器则作为WebSocket服务器，可向扩展发送命令并接收响应。
• 可以访问浏览器API和DOM元素，在网页上下文中执行JavaScript函数，检索网页资源和信息。
• 尤其适用于访问全局对象，例如可通过window.editor控制像 https://threejs.org/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