使用说明

项目简介

本项目是一个 Chrome 扩展程序和本地 MCP 服务器的桥梁，允许您从本地服务器安全地与网页进行交互。通过 WebSocket 连接，服务器可以调用浏览器 API、操作 DOM 元素、执行 JavaScript 函数以及检索网页资源。特别适用于需要从本地环境控制和访问浏览器上下文的应用场景，例如自动化测试、数据抓取或集成 Web 编辑器等。

主要功能点

浏览器 API 访问: 允许 MCP 服务器端代码调用和使用浏览器提供的各种 API，例如 'navigator.userAgent' 等。
DOM 操作: 支持从 MCP 服务器端操作和访问网页的 DOM 结构。
JavaScript 代码执行: 可以在网页上下文中执行 JavaScript 函数，实现更复杂的功能控制。
网页资源获取: 能够从网页中提取和获取各种资源信息。
基于 MCP 协议: 遵循 Model Context Protocol 标准，提供结构化的上下文服务。
WebSocket 通信: 使用 WebSocket 协议实现服务器和 Chrome 扩展之间的双向通信。

安装步骤

克隆仓库:

git clone https://github.com/Oanakiaja/chrome-extension-bridge-mcp.git
cd chrome-extension-bridge-mcp

安装依赖:
```
npm install
```
构建扩展程序:
```
npm run debug
```
这将在项目根目录下生成 'extension' 文件夹，其中包含构建好的 Chrome 扩展程序。
加载 Chrome 扩展程序:
- 打开 Chrome 浏览器，访问 'chrome://extensions/'。
- 开启右上角的 "开发者模式" 开关。
- 点击 "加载已解压的扩展程序"，选择项目根目录下的 'extension' 文件夹。
- 扩展程序安装成功后，在任何网页的右上角应该能看到红色的 "MCP Extension Loaded" 指示器。

服务器配置

MCP 客户端 (例如 LLM 应用) 需要配置以下信息以连接到此 MCP 服务器：

{
  "serverName": "Extension-Socket-Server",
  "command": "node",
  "args": ["examples/mcp.ts"]
}

配置参数说明:

'serverName': MCP 服务器的名称，这里设置为 "Extension-Socket-Server"，与服务器代码中定义的一致。
'command': 启动 MCP 服务器的命令，这里使用 'node' 运行 Node.js 环境。
'args': 启动命令的参数，这里指定运行 'examples/mcp.ts' 文件作为服务器入口。

注意: 确保您的系统已安装 Node.js 环境，并且可以在命令行中通过 'node' 命令运行 JavaScript 文件。

基本使用方法

启动 MCP 服务器: 在克隆仓库的根目录下，打开终端并运行以下命令启动 MCP 服务器：
```
npm run example
```
或者直接使用 node 命令：
```
node examples/mcp.ts
```
服务器默认监听 'ws://localhost:54319' 地址，等待 Chrome 扩展程序连接。
在网页中使用扩展程序: 打开任意网页，Chrome 扩展程序会自动注入脚本并尝试连接到本地 MCP 服务器。
从 MCP 客户端与服务器交互: 您可以编写 MCP 客户端代码，通过标准输入/输出 (Stdio) 或 WebSocket (如果客户端支持直接 WebSocket 连接到扩展，但本例主要演示 Stdio 方式) 与 MCP 服务器进行通信。服务器端代码 ('examples/mcp.ts') 示例展示了如何注册工具 (tool) 和资源 (resource)，客户端可以按照 MCP 协议请求调用这些工具和资源。

例如，要从 MCP 客户端调用 'alert' 工具，您可以发送符合 MCP 协议的 JSON-RPC 请求到服务器的标准输入。服务器会通过 WebSocket 向 Chrome 扩展程序发送指令，最终在浏览器中执行 'window.alert()'。

同样，要获取 'userAgent' 资源，客户端发送资源请求，服务器会指示扩展程序获取 'navigator.userAgent' 的值并返回给客户端。

示例 (MCP 客户端请求 - Stdio 方式, 假设您使用 MCP 客户端 SDK):

{
  "jsonrpc": "2.0",
  "method": "callTool",
  "params": {
    "toolName": "alert",
    "arguments": { "message": "Hello from MCP Client!" }
  },
  "id": "1"
}

服务器会将这个请求转发给 Chrome 扩展，并在浏览器中执行 alert，然后将结果返回给 MCP 客户端。

关键词