Chrome Extension Bridge MCP

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";

// Define the port for WebSocket connection
// This should match the port in your Chrome extension's WebSocket connection
const port = 54319;
const client = new Client(port);

// Establish connection to the Chrome extension
await client.connect();

// Create a new MCP server instance with name and version
const server = new McpServer({
  name: "Extension-Socket-Server",
  version: "1.0.0",
});

// Register a tool that executes the window.alert function in the browser
// This demonstrates how to interact with browser APIs from your server
server.tool(
  "alert",                  // Tool name
  "use window.alert",       // Tool description
  { message: z.string() },  // Tool parameters schema using Zod
  async ({ message }) => {  // Tool implementation function
    // Call the extension to execute alert in the browser context
    const response = await client.callToolExtension("alert", { message });
    return response;
  }
);

// Register a resource to retrieve the browser's user agent
// This demonstrates how to access browser properties from your server
server.resource(
  "userAgent",              // Resource name
  "useragent://chrome",     // Resource URI template
  async (uri) => {          // Resource handler function
    // Get the user agent from the browser
    const { content } = await client.callResourceExtension("navigator.userAgent");
    // Return the formatted resource
    return {
      contents: [
        {
          uri: uri.href,
          text: content[0].text,
        },
      ],
    };
  }
);

// Set up a transport layer for the MCP server
// StdioServerTransport uses standard input/output for communication
const transport = new StdioServerTransport();
await server.connect(transport);

// Handle application termination gracefully
process.on("SIGINT", async () => {
  console.log("SIGINT signal received");  // Log when SIGINT is received
  await client.dispose();                 // Close the WebSocket connection
  process.exit(0);                        // Exit the process
});

扩展端

扩展默认会自动连接到 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": "unique-request-id",
  "method": "mcp:resource.navigator.userAgent",
  "params": {}
}

响应：

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

许可证

MIT