把日常 Chrome 交给 AI 自动化：mcp-chrome 安装配置与典型用法指南-酒店常州论坛

把日常 Chrome 交给 AI 自动化：mcp-chrome 安装配置与典型用法指南

【免费下载链接】mcp-chromeChrome MCP Server is a Chrome extension-based Model Context Protocol (MCP) server that exposes your Chrome browser functionality to AI assistants like Claude, enabling complex browser automation, content analysis, and semantic search.项目地址: https://gitcode.com/gh_mirrors/mc/mcp-chrome

你让 AI 助手"把当前网页总结一下"，它却只能靠截图猜测内容；你想让它自动填表单、抓接口、整理书签，又怕再装一个全新的浏览器、把所有网站重新登录一遍。mcp-chrome（Chrome MCP Server）把日常使用的 Chrome 通过 MCP（模型上下文协议，让 AI 客户端能调用外部工具的一套标准）开放给 AI 助手，让它直接操作你已登录的浏览器，完成网页自动化、内容分析与语义搜索。整个过程本地运行，不引入额外的浏览器进程。

先看一个场景：AI 直接操作你在用的 Chrome

传统基于 Playwright 的自动化方案会启动一个独立的浏览器实例，这意味着它不认得你已登录的账户、你收藏的页面和你自定义的配置，每次都要重新来过。mcp-chrome 的思路不同：它以一个 Chrome 扩展 + 本地服务的方式，接入你正开着的那个浏览器。

你已有的登录态、书签、浏览历史直接被 AI 复用，省去重复登录
不额外占用一个浏览器进程的内存，启动只需激活扩展
AI 能调用的是完整的 Chrome 原生能力，而不是被某个自动化工具的 API 裁剪过的子集

这套结构面向两类读者：想用 AI 处理网页内容、减少重复操作的人，以及希望在现有工作流里加入浏览器自动化的开发者。它解决的核心问题是"让 AI 用一个现成的、带登录态的浏览器干活"。

梳理核心能力：从页面操作到语义搜索的工具集

项目把浏览器能力拆成 20 多个可调用的工具，按用途大致分为几组，理解分组比逐个记工具名更实用。

页面与窗口管理：列出窗口/标签页、跳转 URL、切换与关闭标签页、前进后退、向页面注入脚本
截图：支持整页、指定元素、自定义尺寸的截图
网络监控：捕获网页发起的请求、带响应体的调试抓取、主动发送自定义 HTTP 请求
内容分析：跨标签页的语义搜索、提取页面 HTML/文本、定位可点击元素、读取控制台输出
交互操作：按选择器点击元素、填写表单与下拉选择、模拟键盘输入与快捷键
数据管理：按时间检索浏览历史、搜索/新增/删除书签

其中"语义搜索"值得单独一提：它内置本地向量数据库和小模型，把标签页内容转成向量后再检索，所以你能用自然语言找"哪个标签页里讲到过某个主题"，而不是靠关键词硬匹配。

三步完成安装：从获取扩展到配置客户端

🚀 下面按"获取扩展 → 安装本地服务 → 配置客户端"三步走，每步说明目的。

第 1 步：拿到 Chrome 扩展

可以从 Releases 下载打包好的扩展，也可以自行从源码构建：

git clone https://gitcode.com/gh_mirrors/mc/mcp-chrome cd mcp-chrome pnpm install cd app/chrome-extension pnpm run build

pnpm run build会在app/chrome-extension/dist下生成可加载的扩展目录。

第 2 步：全局安装本地桥接服务

这个 npm 包负责在系统和 Chrome 扩展之间建立通道：

# 使用 npm npm install -g mcp-chrome-bridge # 使用 pnpm（先开启安装脚本，避免自动注册失败） pnpm config set enable-pre-post-scripts true pnpm install -g mcp-chrome-bridge

说明：pnpm 7+ 默认关闭 postinstall 脚本，若自动注册没生效，可手动执行mcp-chrome-bridge register。

第 3 步：加载扩展并接入 MCP 客户端

打开chrome://extensions/，开启"开发者模式"
点"加载已解压的扩展程序"，选择上一步得到的扩展目录
点扩展图标打开面板，点"连接"即可查看 MCP 配置
在支持 MCP 的客户端（如 Cherry Studio）中按下方格式添加配置

推荐用 Streamable HTTP 方式连接：

{ "mcpServers": { "chrome-mcp-server": { "type": "streamableHttp", "url": "http://127.0.0.1:12306/mcp" } } }

如果客户端只支持 stdio 连接，README 里给出了定位mcp-server-stdio.js脚本路径并填入command/args的备选写法，可按需查阅。

这些场景最值得先试

配置完成后，可以用自然语言指令直接触发，几个见效快的例子：

"总结当前页面内容，再画一张图帮助我理解" —— 组合了内容提取与绘图
"帮我看看这个搜索接口是什么、返回结构长什么样" —— 用网络监控捕获并解析请求
"分析我最近一个月的浏览历史" —— 直接读取历史数据做归纳
"把当前页面加入书签并放进合适的文件夹" —— 自动完成数据管理
"翻译并总结当前网页" —— 内容提取 + 语言处理
"截一张 Hugging Face 首页的图" —— 整页或指定元素截图

项目还内置了录制回放与可视化编辑能力，可以把操作流程存为可重复执行的任务，这部分源码在 app/chrome-extension/entrypoints/background/record-replay/，可视化编辑的说明见 docs/VisualEditor_zh.md。

适用边界与使用注意事项

仅限 Chrome/Chromium：目前能力建立在 Chrome 扩展 API 之上，不涉及 Firefox 等其他浏览器
运行环境：需要 Node.js >= 20.0.0 以及 npm 或 pnpm，本地服务依赖 Node 环境
隐私即本地：MCP 服务与语义模型都在本地跑，页面数据不出本机，但 AI 能读到标签页内容与网络请求，敏感站点请自行留意
权限范围：AI 可执行点击、填表、发请求等操作，建议对高风险动作（如下单、删除）保持人工确认

继续深入了解的入口

完整工具参数参考：docs/TOOLS_zh.md
架构与数据流设计：docs/ARCHITECTURE_zh.md
常见问题排查：docs/TROUBLESHOOTING_zh.md
扩展核心源码：app/chrome-extension/
本地服务与 MCP 协议实现：app/native-server/

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析