Chrome MCP Server是一款开源工具，可让AI助手直接接管本地Chrome浏览器，实现安全高效的自动化操作。
接下来我用 Chrome插件 + Trae MCP 结合，进行一些网页的信息整合。
Chrome MCP Server通过本地运行、复用现有Chrome环境和自然语言交互，实现了安全、便捷且无需额外配置的浏览器自动化。
实战
安装与配置Chrome MCP Server
chrome 安装插件
环境准备
Chrome浏览器：版本80+（需启用开发者模式安装插件）。
Trae：安装并登录。
uv工具：通过命令安装。
node：Node.js ≥ 18.19.0 + npm
快速部署和使用:
1、安装Chrome扩展插件 从 GitHub Releases 下载最新扩展包，在 chrome://extensions 中启用开发者模式并加载解压的文件夹。
2、安装桥接工具
npm install -g mcp-chrome-bridge
3、打开Chrome浏览器，点击扩展程序进入配置页。
安装Chrome MCP插件
（1）下载插件：从开源仓库获取插件压缩包。
（2）启用开发者模式：Chrome地址栏输入 chrome://extensions/，开启“开发者模式”。
（3）加载插件：点击“加载已解压的扩展程序”，选择插件目录。
配置Trae连接MCP Server
底层
底层原理：
->：Chrome MCP Server 可以把 Chrome 的功能暴露给任意 LLM，实现浏览器自动化、内容分析、语义搜索等操作。
支持跨标签页上下文、内置向量数据库和 20 多种本地运行工具，大幅提升工作效率。
先在插件那边打开一个端口连接（默认是12306），然后Trae这边的MCP粘贴进去：
{
"mcpServers": {
"chrome-mcp-server": {
"url": "http://127.0.0.1:12306/mcp"
}
}
}
查看是否已成功✅：
功能示例分类
1. 内容分析与可视化
- 总结网页并绘图
excalidraw-prompt：分析网页内容后用 Excalidraw 自动生成示意图。
示例：总结视频内容并绘制图解。
- 图片元素分析与复现
excalidraw-prompt|content-analize：解析图片是否可绘制，列出步骤后模仿。
示例：复现视频中的图表。
2. 网页操作与修改
-
样式修改
modify-web-prompt：动态注入脚本调整页面样式（如去广告）。
示例：移除页面广告。 -
网络请求捕获
直接指令：抓取接口数据（如小红书搜索接口结构）。
示例：分析接口响应。
3. 用户行为管理
-
浏览记录分析
直接指令：统计和分析历史浏览数据。
示例：分析一个月内的访问记录。 -
书签管理
直接指令：智能分类保存书签。
示例：将当前页面归档到指定文件夹。 -
标签页控制
直接指令：批量关闭特定网页。
示例：关闭所有含 "shadcn" 的标签页。
4. 截图功能
-
全页截图
直接指令：捕获整个网页。
示例：截取 Hugging Face 首页。 -
元素截图
直接指令：精确截取页面局部（如图标）。
示例：截取 Hugging Face 的 logo。
5. 内容交互
- 网页翻译与总结
直接指令：实时翻译并提炼网页内容。
示例：翻译总结当前页面。
Trae + Chrome MCP Server
💪🏻 在内容创作中，AI 可自动总结网页内容并调用 Excalidraw 绘制思维导图；
💪🏻 在监控方面，能定时截图竞品网站首页并进行布局对比分析；
💪🏻 工作流优化中可实现自动填写表单、批量关闭标签页和整理书签；
💪🏻 开发调试时则支持网络请求拦截与 API 结构分析，显著提升效率。
