AI导哈

浏览器扩展桥接MCP

一个Chrome扩展，用于在网页和本地MCP服务器之间建立WebSocket连接，实现与网页资源的交互和MCP服务器功能的执行。

  • by Oanakiaja
  • JavaScript
  • 本地部署
  • 32 星标
  • 更新于
在 GitHub 查看 Oanakiaja/chrome-extension-bridge-mcp

使用说明

Chrome扩展桥MCP

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

灵感来自 playcanvas/编辑器mcp服务器.

概述

该项目由两个主要部分组成：

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

通过此设置，您可以：

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

安装

设置

  1. 克隆存储库：
git clone https://github.com/yourusername/chrome-extension-socket-mcp.git
cd chrome-extension-socket-mcp
  1. 安装依赖项：
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";

// 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 ..."
}

许可证

麻省理工学院

相关 MCP