1. 项目概述与背景
最近在开发一个需要与Chrome浏览器深度交互的项目时,我发现了一个非常实用的工具链——MCP(Message Channel Protocol)协议栈。这套方案允许我们在本地Python环境和Chrome DevTools之间建立双向通信通道,实现比传统扩展更底层的浏览器控制能力。
核心组件包括:
- mcp-chrome-bridge:Node.js实现的桥接服务
- chrome-devtools-mcp:官方提供的协议实现库
- 自定义Python服务端:处理业务逻辑
这种架构特别适合需要精细控制浏览器行为但又不想开发完整Chrome扩展的场景。比如我做过的几个典型用例:
- 网页自动化测试时的实时DOM监控
- 高性能网络请求拦截/修改
- 页面渲染过程的性能数据采集
需要模型API调用? 免费领10W Token,多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 环境准备与工具安装
2.1 Node.js环境配置
首先需要安装Node.js作为基础运行环境。推荐使用nvm管理多版本:
bash复制curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
nvm install 18
nvm use 18
注意:必须使用Node.js 16+版本,低版本可能缺少必要的ES模块支持
2.2 安装核心组件
通过npm全局安装桥接服务:
bash复制npm install -g mcp-chrome-bridge
验证安装是否成功:
bash复制mcp-chrome-bridge --version
# 应输出类似 1.2.0 的版本号
2.3 Chrome插件配置
-
从项目release页面下载最新crx文件:
https://github.com/hangwin/mcp-chrome/releases -
在Chrome地址栏输入:
code复制chrome://extensions -
开启"开发者模式",将crx文件拖入安装
-
安装后记下扩展ID(类似
abcdefghijklmnopqrstuvwxyz123456)
