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