Browser Inspector MCP

Browser Inspector MCP 是一个强大的浏览器控制和调试工具，基于 Model Context Protocol (MCP) 实现。它提供了丰富的浏览器操作 API，可以无缝集成到支持 MCP 的 AI 应用（如 Cursor）中。

🌟 特性

• 🚀 浏览器控制：启动、管理和操作 Chrome 浏览器实例
• 📝 控制台日志：实时捕获和分析浏览器控制台日志
• 🔍 DOM 审查：强大的 DOM 元素查找、审查和操作功能
• 🌐 网络监控：拦截、分析和修改网络请求
• 📸 页面快照：支持页面和元素截图
• 📊 性能分析：收集和分析页面性能指标
• 🔒 安全可靠：内置安全机制，防止恶意操作
• 🔌 易于集成：支持多种传输方式，易于与其他应用集成

🛠️ 技术栈

• Node.js (>=16.0.0)
• Chrome DevTools Protocol (CDP)
• Model Context Protocol (MCP)
• TypeScript/JavaScript
• Express (可选 HTTP 服务器)

📦 安装

确保你的系统已安装 Node.js (>=16.0.0) 和 Chrome 浏览器。

# 克隆仓库
git clone https://github.com/yourusername/browser-inspector-mcp.git

# 进入项目目录
cd browser-inspector-mcp

# 安装依赖
npm install

🚀 快速开始

基本用法

# 启动服务
npm start

# 启用调试模式
npm run debug

与 Cursor 集成

1. 在 Cursor 中打开命令面板 (Cmd+Shift+P 或 Ctrl+Shift+P)
2. 输入 "MCP: Connect to Local MCP Server"
3. 按提示操作完成连接

代码示例

// 启动浏览器
const browser = await launchBrowser({
  headless: true,
  defaultViewport: { width: 1280, height: 720 }
});

// 执行 JavaScript
await executeJavaScript(browser.instanceId, 'document.title');

// 查找元素
const elements = await queryElements(browser.instanceId, 'h1', {
  includeHTML: true,
  highlight: true
});

📚 API 文档

浏览器管理 API

• launchBrowser(options): 启动新的浏览器实例
• closeInstance(instanceId): 关闭指定的浏览器实例
• getActiveInstances(): 获取所有活动的浏览器实例

DOM 操作 API

• queryElements(instanceId, selector, options): 查找 DOM 元素
• modifyElement(instanceId, selector, modifications): 修改元素属性
• waitForElementState(instanceId, selector, state): 等待元素状态变化

网络控制 API

• enableInterception(instanceId, patterns): 启用请求拦截
• addRequestHandler(instanceId, urlPattern, handler): 添加请求处理器
• disableInterception(instanceId): 禁用请求拦截

更多 API 详情请查看 API 文档。

🔧 配置

环境变量

# 服务器配置
SERVER_NAME=Browser Inspector MCP
SERVER_VERSION=1.0.0
SERVER_DESCRIPTION=Browser control and inspection service

# HTTP 配置
HTTP_ENABLED=true
HTTP_PORT=3000
HTTP_CORS=true

# 日志配置
LOG_LEVEL=info

配置文件

详细配置选项请参考 配置指南。

🤝 贡献指南

我们欢迎任何形式的贡献！如果你想为项目做出贡献，请：

1. Fork 本仓库
2. 创建你的特性分支 (git checkout -b feature/AmazingFeature)
3. 提交你的改动 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启一个 Pull Request

更多详情请查看 贡献指南。

📄 许可证

本项目基于 MIT 许可证开源 - 查看 LICENSE 文件了解更多详情。

🙏 致谢

• Chrome DevTools Protocol
• Model Context Protocol
• Cursor

📞 联系我们

• 提交 Issue: GitHub Issues
• 邮件联系: your.email@example.com
• Twitter: @YourTwitterHandle

🎯 路线图

• 支持更多浏览器（Firefox、Safari）
• WebSocket 传输支持
• 浏览器扩展集成
• 性能优化工具集
• 更多 AI 助手集成支持

🌟 Star History