AI导哈

浏览器运行时MCP服务器

BRMS是一个将浏览器状态（DOM、网络、控制台、样式、布局）暴露为结构化MCP工具的服务，专为AI代理如Cursor设计。

  • by Alaap008
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 Alaap008/golliath

使用说明

BRMS——浏览器运行时MCP服务器

将实时浏览器状态（DOM、网络、控制台、样式、布局）作为结构化MCP工具公开给Cursor等AI代理。

建筑

Chrome Extension ←→ Native Messaging ←→ brms-host (Node.js) ←→ Cursor (HTTP MCP)
  • Chrome 扩展 （Manifest V3）：原生捕获DOM、网络、控制台、样式和屏幕截图
  • brms主机 （Node.js）：MCP服务器上 http://localhost:3100/mcp 使用流式HTTP传输
  • 本地消息传递：Chrome在扩展程序和主机进程之间的内置IPC

快速开始

1.加载Chrome扩展程序

  1. 打开 chrome://extensions
  2. 启用 开发者模式
  3. 点击 装载时未包装 → 选择 extension/ 文件夹
  4. 复制 扩展ID 卡片（32个字符串）

2.安装本机消息主机

如果 brms-host 发布在npm上：

npx brms-host install --extension-id=<your-extension-id>

如果从源代码运行：

cd host
npm install
npm run build
node build/bin/install.js install --extension-id=<your-extension-id>

3.配置光标

添加到您的项目 .cursor/mcp.json:

{
  "mcpServers": {
    "brms": {
      "url": "http://localhost:3100/mcp"
    }
  }
}

4.验证

点击Chrome浏览器中的BRMS扩展图标——它应该显示 连接。然后问Cursor： “连接到我的浏览器并列出打开的选项卡。”

可用工具（15）

连接

工具 说明
connect_browser 通过Chrome扩展程序连接到浏览器
list_pages 列出所有打开的选项卡
select_page 按索引选择选项卡

DOM检查

工具 说明
get_dom_tree 完整或范围DOM树快照
query_dom 带属性的CSS选择器查询

网络

工具 说明
get_network_calls 通过过滤捕获网络请求

控制台

工具 说明
get_console_errors 控制台错误和警告

样式和布局

工具 说明
get_computed_styles 使用祖先链和伪元素计算CSS
get_layout_info 边界框、可见性、重叠、剪切、滚动
get_visible_elements 视口中带有11y信息的交互元素

视觉的

工具 说明
capture_screenshot 带有突出显示选项的页面或元素截图

事件

工具 说明
get_event_listeners 通过Chrome DevTools协议的事件监听器

AI调试

工具 说明
debug_element 可点击性/可见性的11点诊断
diagnose_network 定时、CORS、速率限制、错误体分析
correlate_issues 交叉引用网络、控制台和DOM问题

项目结构

golliath/
├── shared/
│   └── protocol.ts            # Message types (host ↔ extension)
├── extension/
│   ├── manifest.json          # Chrome MV3 manifest
│   ├── background.js          # Service worker (native messaging, debugger, routing)
│   ├── content.js             # DOM operations (styles, layout, debug)
│   ├── popup.html/js/css      # Setup wizard + status UI
│   └── icons/
├── host/
│   ├── package.json           # Publishable as "brms-host"
│   ├── tsconfig.json
│   └── src/
│       ├── index.ts           # HTTP server + Streamable HTTP transport
│       ├── server.ts          # McpServer + 15 tool registrations
│       ├── bin/install.ts     # npx brms-host install
│       ├── bridge/            # Native messaging protocol
│       ├── browser/           # Proxy layer (via bridge)
│       ├── tools/             # MCP tool handlers
│       ├── types/             # TypeScript interfaces
│       └── utils/             # Logger, error helpers
├── package.json               # Root workspace
└── README.md

发展

# Install all dependencies
npm install

# Build the host
npm run build

# Watch mode
npm run dev

更改主机后，在Chrome中重新加载BRMS扩展程序以获取新版本。

运作原理

  1. 当Chrome扩展程序启动时，它会连接到本机消息主机
  2. 主机在端口3100上启动HTTP服务器
  3. 光标连接到 http://localhost:3100/mcp 通过流式HTTP MCP传输
  4. 工具调用流程： 光标→ Host → 扩展→ 浏览器→ 扩展→ Host → 光标
  5. 网络和控制台数据实时从扩展推送

故障排除

症状 修复
弹出窗口显示“已断开连接” 重新加载扩展 chrome://extensions
“本机主机已退出”错误 使用正确的扩展ID再次运行安装命令
端口3100已在使用中 杀死过时的主机： lsof -ti :3100 | xargs kill 然后重新加载扩展名
工具返回“扩展未连接” 调用 connect_browser 首先

隐私

Chrome Web Store发布需要此扩展程序的权限配置文件的隐私政策。
使用 PRIVACY_POLICY.md 在您的列表的此存储库中（或托管等效的策略URL）。

许可证

麻省理工学院

相关 MCP