Chrome Extension Bridge MCP - MCP服务，MCP服务器，MCP教程

基本能力

产品定位

Chrome Extension Bridge MCP 是一个用于连接 Chrome 浏览器和本地 MCP 服务器的工具，旨在实现浏览器自动化开发和调试。

核心功能

1. WebSocket 连接：在网页和本地服务器之间建立实时通信。
2. 浏览器 API 访问：从本地服务器调用浏览器 API（如 window.alert）。
3. DOM 操作：执行 JavaScript 函数以操作网页 DOM。
4. 资源获取：从网页中检索资源（如用户代理信息）。
5. 全局对象访问：访问网页中的全局对象（如 window.editor）。

适用场景

1. 开发调试：开发人员可以通过本地服务器直接控制网页行为。
2. 自动化测试：自动化执行网页操作和验证功能。
3. 网页资源监控：实时获取网页资源信息。
4. 编辑器控制：通过本地服务器控制网页中的编辑器（如 Three.js 编辑器）。

工具列表

1. alert 工具：调用浏览器的 window.alert 函数。
2. userAgent 资源：获取浏览器的用户代理信息。

常见问题解答

1. 如何修改 WebSocket 端口？：可以在 extension/content.js 中修改默认端口（54319）。
2. 如何加载扩展？：在 Chrome 的 chrome://extensions/ 页面中启用开发者模式并加载解压的扩展。

使用教程

使用依赖

1. 确保已安装 Node.js 和 npm。
2. 克隆仓库并安装依赖：
   bash
git clone https://github.com/yourusername/chrome-extension-socket-mcp.git
cd chrome-extension-socket-mcp
npm install

安装教程

1. 构建开发模式的扩展：
   bash
npm run debug
2. 在 Chrome 中加载扩展：
3. 打开 chrome://extensions/。
4. 启用“开发者模式”。
5. 点击“加载解压的扩展”并选择项目的 extension 文件夹。

调试方式

1. 启动本地 MCP 服务器并确保扩展已连接。
2. 使用以下命令测试工具和资源：
   ```typescript
   // 调用 alert 工具
   await client.callToolExtension("alert", { message: "Hello, World!" });

// 获取 userAgent 资源
await client.callResourceExtension("navigator.userAgent");
```