Chrome Extension Bridge MCP
2025.03.31
9
JavaScript浏览器自动化开发效率浏览器自动化开发效率
Chrome Extension Bridge MCP 是一个 Chrome 扩展，用于在网页和本地 MCP 服务器之间建立 WebSocket 连接。通过该扩展，用户可以从本地服务器与网页资源进行交互，执行 JavaScript 函数，并访问网页中的全局对象（如 `window.editor`）。该工具特别适用于开发人员需要从本地环境控制网页内容的场景。
View on GitHub
Overview
基本能力
产品定位
Chrome Extension Bridge MCP 是一个用于连接 Chrome 浏览器和本地 MCP 服务器的工具，旨在实现浏览器自动化开发和调试。
核心功能
- WebSocket 连接：在网页和本地服务器之间建立实时通信。
- 浏览器 API 访问：从本地服务器调用浏览器 API（如
window.alert）。 - DOM 操作：执行 JavaScript 函数以操作网页 DOM。
- 资源获取：从网页中检索资源（如用户代理信息）。
- 全局对象访问：访问网页中的全局对象（如
window.editor）。
适用场景
- 开发调试：开发人员可以通过本地服务器直接控制网页行为。
- 自动化测试：自动化执行网页操作和验证功能。
- 网页资源监控：实时获取网页资源信息。
- 编辑器控制：通过本地服务器控制网页中的编辑器（如 Three.js 编辑器）。
工具列表
alert工具：调用浏览器的window.alert函数。userAgent资源：获取浏览器的用户代理信息。
常见问题解答
- 如何修改 WebSocket 端口？：可以在
extension/content.js中修改默认端口（54319）。 - 如何加载扩展？：在 Chrome 的
chrome://extensions/页面中启用开发者模式并加载解压的扩展。
使用教程
使用依赖
- 确保已安装 Node.js 和 npm。
- 克隆仓库并安装依赖：
git clone https://github.com/yourusername/chrome-extension-socket-mcp.git
cd chrome-extension-socket-mcp
npm install
安装教程
- 构建开发模式的扩展：
npm run debug
- 在 Chrome 中加载扩展：
- 打开
chrome://extensions/。 - 启用“开发者模式”。
- 点击“加载解压的扩展”并选择项目的
extension文件夹。
调试方式
- 启动本地 MCP 服务器并确保扩展已连接。
- 使用以下命令测试工具和资源：
// 调用 alert 工具
await client.callToolExtension("alert", { message: "Hello, World!" });
// 获取 userAgent 资源
await client.callResourceExtension("navigator.userAgent");