😲AI 💪🏻超级整合时代已经到来~

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粘贴进去：

js 复制代码

{
  "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 结构分析，显著提升效率。

😲AI 💪🏻超级 整合时代 已经 到来~

实战