Chrome上下文MCP v2.0
统一浏览器自动化MCP服务器。将真实Chrome浏览器中的任意JS执行（使用Cookie和身份验证）、可访问性树快照与基于引用的交互、被动控制台/网络捕获、设备模拟和Lighthouse审计相结合。
建筑
Claude Code
| MCP (JSON-RPC 2.0 over HTTP)
v
+-------------------------------------------+
| mcp-server.js (port 9223) |
| /mcp — MCP protocol endpoint |
| /jobs — extension polls for pending jobs |
| /results — extension posts results |
| /execute — legacy CLI endpoint |
| /health, /status — monitoring |
| |
| + Lighthouse runner (headless Chrome) |
+-------------------+-----------------------+
|
| HTTP polling (~6s)
v
+-------------------------------------------+
| Chrome Extension (background.js) |
| Bundled from src/ modules via esbuild |
| |
| Capabilities: |
| - A11y tree snapshots via CDP |
| - Ref-based click/type/hover/drag |
| - Passive console + network capture |
| - Screenshots (viewport, full, element) |
| - Arbitrary JS execution |
| - Tab management, navigation |
| - Device/viewport emulation |
| - PDF export, HTML extraction |
+-------------------+-----------------------+
|
| chrome.debugger CDP 1.3
v
+-------------------------------------------+
| Your Real Chrome Browser |
| (cookies, auth, real sessions) |
+-------------------------------------------+
快速开始
1.安装依赖项
cd chrome-context
npm install
2.构建扩展
npm run build
3.加载Chrome扩展程序
- 打开
chrome://extensions/ - 启用 开发者模式
- 点击 加载未打包的 → 选择
chrome-context/extension/
4.启动MCP服务器
npm start
5.配置克劳德代码
claude mcp add chrome-context http://localhost:9223/mcp
可用工具（32）
导航和选项卡
| 工具 | 说明 |
|---|
browser_tabs | 列出、创建、关闭或选择选项卡 |
browser_navigate | 将选项卡导航到URL |
browser_navigate_back | 回到历史 |
browser_navigate_forward | 在历史中前进 |
browser_reload | 重新加载页面 |
可访问性快照和交互
| 工具 | 说明 |
|---|
browser_snapshot | 获取带有引用ID的可访问性树 |
browser_click | 按ref单击元素 |
browser_type | 按ref在元素中键入文本 |
browser_fill_form | 填写多个表单字段 |
browser_select_option | 按参照选择下拉选项 |
browser_hover | 通过ref将鼠标悬停在元素上 |
browser_drag | 通过引用将元素拖动到另一个元素 |
browser_press_key | 按键或组合键 |
browser_scroll | 滚动页面或元素 |
browser_file_upload | 上传文件到ref输入 |
观察与捕捉
| 工具 | 说明 |
|---|
browser_take_screenshot | 屏幕截图（视口、整页或元素） |
browser_console_messages | 获取捕获的控制台消息 |
browser_network_requests | 获取捕获的网络请求 |
browser_get_network_request | 获取请求的响应正文 |
browser_save_pdf | 将页面另存为PDF |
browser_get_html | 获取页面/元素HTML |
browser_handle_dialog | 接受/关闭JS对话框 |
JavaScript执行
| 工具 | 说明 |
|---|
browser_evaluate | 通过chrome.scripting运行JS（无调试横幅） |
browser_evaluate_debugger | 通过CDP运行JS（全功能，显示横幅） |
仿真与设备
| 工具 | 说明 |
|---|
browser_resize | 设置视口大小 |
browser_emulate_device | 模拟设备（30+预设） |
browser_emulate_media | 暗/亮模式，打印介质 |
browser_set_geolocation | 覆盖地理位置 |
browser_wait_for | 等待文本/时间/条件 |
调试器管理
| 工具 | 说明 |
|---|
browser_attach_debugger | 连接CDP调试器（启用被动捕获） |
browser_detach_debugger | 分离CDP调试器 |
审计
| 工具 | 说明 |
|---|
browser_lighthouse_audit | 运行Lighthouse审计（单独的无头Chrome） |
发展
# Build extension from source modules
npm run build
# Watch mode (auto-rebuild on changes)
npm run build:watch
# Build and start server
npm run dev
# Start server only (extension must already be built)
npm start
在中编辑扩展名源文件后 extension/src/，重建并重新加载扩展名 chrome://extensions/.
文件结构
chrome-context/
├── package.json
├── mcp-server.js # MCP + Bridge server (port 9223)
├── context-executor.js # CLI tool (backward compat)
├── build.js # esbuild bundler
├── lib/
│ ├── tools.js # Tool definitions + handlers
│ ├── devices.js # Device preset registry
│ └── lighthouse.js # Lighthouse audit runner
└── extension/
├── manifest.json
├── background.js # Bundled service worker (built from src/)
├── popup.html
├── popup.js
└── src/
├── main.js # Entry: polling, dispatch, event listeners
├── bridge-polling.js # HTTP polling communication
├── debugger-manager.js # CDP attach/detach lifecycle
├── snapshot-engine.js # Accessibility tree + refMap
├── input-dispatcher.js # Ref-based click/type/hover/drag
├── screenshot-engine.js # Screenshots, PDF, HTML, dialog
├── passive-capture.js # Console + network buffering
└── emulation-engine.js # Device, viewport, geolocation
