MCP 服务AI Agent浏览器控制GUI 自动化工具调用人工智能AI 应用【免费下载链接】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点击查看免费下载本文以仓库根目录 README.md 为主线系统讲解 Chrome MCP Server 的定位、核心特性、安装配置、工具能力与底层架构。Chrome MCP Server 是一个基于 Chrome 扩展的 Model Context ProtocolMCP服务器它把用户日常使用的 Chrome 浏览器能力暴露给 Claude 等 AI 助手实现复杂的浏览器自动化、内容分析与语义搜索。读完本文你将掌握从下载扩展、安装本地桥接服务到接入任意 MCP 客户端的完整链路并理解其工具注册与原生消息通信的实现原理。一、项目定位让 AI 接管你的日常浏览器Chrome MCP Server 的核心思想与 Playwright 等传统浏览器自动化方案截然不同它直接使用用户日常在用的 Chrome 浏览器而不是启动一个独立的、干净的浏览器实例。这意味着复用登录态与配置你已登录的网站会话、安装的扩展、浏览器设置被完整保留AI 操作时无需重新登录零资源冗余不需要额外下载浏览器二进制、安装 Playwright 依赖只需激活扩展即可开始工作完全本地运行MCP Server 纯本地运行保证用户隐私模型无关任意 LLM、Chatbot 客户端或 Agent只要支持 MCP 协议即可接入。项目当前仍处于早期快速迭代阶段仓库 README 中明确说明 still in its early stages and is under intensive development但已提供 20 个工具覆盖浏览器管理、截图、网络监控、内容分析、交互操作与数据管理六大类能力。二、核心特性一览根据 README.md 的核心特性清单项目的能力支柱如下特性说明Chatbot/模型无关任意支持 MCP 的客户端均可自动化操作浏览器使用原本的浏览器无缝集成用户既有环境配置、登录态等完全本地运行纯本地 MCP Server保护隐私Streamable HTTP推荐使用的连接方式跨标签页跨标签页的上下文能力语义搜索内置向量数据库与本地小模型智能发现标签页内容智能内容分析AI 驱动的文本提取与相似度匹配20 工具截图、网络监控、交互操作、书签管理、浏览历史等SIMD 加速 AI自定义 WebAssembly SIMD 优化向量运算速度提升 4-8 倍其中SIMD 加速并非营销话术而是有明确的源码支撑仓库 packages/wasm-simd/src/lib.rs 使用 Rust 编写 SIMD 数学函数并编译为 WebAssemblydocs/ARCHITECTURE.md 中给出了基于wide::f32x4的 SIMD 余弦相似度实现示例4 通道并行计算点积与范数。围绕它还有配套的 Web Workerapp/chrome-extension/workers/similarity.worker.js与语义相似度引擎app/chrome-extension/utils/semantic-similarity-engine.ts。三、与 Playwright 类 MCP 服务器的对比README 给出了一个直观的对比表帮助理解两种技术路线的差异对比维度基于 Playwright 的 MCP Server基于 Chrome 扩展的 MCP Server资源占用需启动独立浏览器进程安装 Playwright 依赖、下载浏览器二进制无需启动独立浏览器进程直接利用用户已打开的 Chrome用户会话复用需重新登录自动使用已登录状态浏览器环境保持干净环境缺少用户设置完整保留用户环境API 访问权限受限于 Playwright APIChrome 原生 API 全访问启动速度需启动浏览器进程只需激活扩展响应速度50-200ms 进程间通信更快需要说明的是对比表中的响应速度更快是项目 README 的自我表述实际表现取决于具体场景但从架构上可以确认Chrome 扩展方案通过 Native Messaging 直连本地 Node 服务避免了启动浏览器 驱动协议的开销。四、快速开始完整安装三步走4.1 前置条件Node.js 20.0.0npm 或 pnpm 均可这一要求与 app/native-server/package.json 中engines: { node: 20.0.0 }的声明一致Chrome/Chromium 浏览器。4.2 第一步下载 Chrome 扩展从项目的 Release 页面下载最新版 Chrome 扩展压缩包解压后得到一个扩展文件夹例如chrome-mcp-server-lastest.zip解压出的目录。4.3 第二步全局安装 mcp-chrome-bridgemcp-chrome-bridge是发布到 npm 的本地桥接包负责 Native Messaging 主机注册与 MCP 服务启动。安装方式分 npm 与 pnpm 两种npm 方式npm install -g mcp-chrome-bridgepnpm 方式# 方法1全局启用脚本推荐 pnpm config set enable-pre-post-scripts true pnpm install -g mcp-chrome-bridge # 方法2如果 postinstall 没有运行手动注册 pnpm install -g mcp-chrome-bridge mcp-chrome-bridge register为什么 pnpm 需要额外设置pnpm v7 出于安全默认禁用 postinstall 脚本。enable-pre-post-scripts设置控制是否运行 pre/post 安装脚本。若自动注册失败用mcp-chrome-bridge register手动注册即可。从源码看注册流程的核心逻辑位于 app/native-server/src/scripts/register.ts它先写入 Node.js 路径文件writeNodePathFile再调用registerWithElevatedPermissions()完成 Native Messaging 主机的注册成功后可让 Chrome 扩展通过 Native Messaging 与本地服务通信。package.json中的postinstall脚本node dist/scripts/postinstall.js与bin字段mcp-chrome-bridge、chrome-mcp-bridge、mcp-chrome-stdio三个可执行入口共同构成了自动化安装链路。4.4 第三步加载 Chrome 扩展打开 Chrome访问chrome://extensions/启用右上角的开发者模式点击加载已解压的扩展程序选择第一步解压得到的扩展文件夹点击扩展图标打开插件点击连接即可看到 MCP 配置信息。五、在 MCP 协议客户端中使用5.1 方式一Streamable HTTP 连接推荐将以下配置添加到任意支持 MCP 的客户端README 以 CherryStudio 为例{ mcpServers: { chrome-mcp-server: { type: streamableHttp, url: http://127.0.0.1:12306/mcp } } }该地址对应 Native Server 上暴露的 MCP 端点。从源码看这一 HTTP 服务基于 Fastify 构建依赖fastify ^5.3.2MCP Server 实例定义于 app/native-server/src/mcp/mcp-server.ts服务名ChromeMcpServer能力声明tools。5.2 方式二STDIO 连接备选如果客户端仅支持 stdio 连接方式则需要进行以下配置第一步查询已安装 npm 包的安装位置# npm 查看方式 npm list -g mcp-chrome-bridge # pnpm 查看方式 pnpm list -g mcp-chrome-bridge假设命令输出路径为/Users/xxx/Library/pnpm/global/5则 stdio 入口的最终路径为/Users/xxx/Library/pnpm/global/5/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js第二步将下述配置中的路径替换为你得到的最终路径{ mcpServers: { chrome-mcp-stdio: { command: npx, args: [ node, /Users/xxx/Library/pnpm/global/5/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js ] } } }从源码实现看stdio 模式是一个代理设计app/native-server/src/mcp/mcp-server-stdio.ts 通过StdioServerTransport对外提供 MCP 服务内部读取同目录下 app/native-server/src/mcp/stdio-config.json默认内容{url: http://127.0.0.1:12306/mcp}并用StreamableHTTPClientTransport建立到 HTTP 端点的内部客户端连接将 stdio 侧的callTool请求代理转发给 HTTP 侧的 MCP 服务器。该文件还给出了两个实现细节工具调用默认超时2 * 60 * 10002 分钟源码注释说明此前曾误用2*6*100012 秒除ListTools、CallTool外还实现了 MCP 协议要求的ListResources与ListPrompts处理器。六、可用工具全景完整的工具 API 文档见 docs/TOOLS.md。以下是 README 中按类别归纳的工具清单 浏览器管理6 个工具get_windows_and_tabs- 列出所有浏览器窗口和标签页chrome_navigate- 导航到 URL 并控制视口chrome_switch_tab- 切换当前显示的标签页chrome_close_tabs- 关闭特定标签页或窗口chrome_go_back_or_forward- 浏览器导航控制chrome_inject_script- 向网页注入内容脚本chrome_send_command_to_inject_script- 向已注入的内容脚本发送指令 截图和视觉1 个工具chrome_screenshot- 高级截图捕获支持元素定位、全页面和自定义尺寸 网络监控4 个工具chrome_network_capture_start/stop- webRequest API 网络捕获chrome_network_debugger_start/stop- Debugger API 包含响应体chrome_network_request- 发送自定义 HTTP 请求 内容分析4 个工具search_tabs_content- AI 驱动的浏览器标签页语义搜索chrome_get_web_content- 从页面提取 HTML/文本内容chrome_get_interactive_elements- 查找可点击元素chrome_console- 捕获和获取浏览器标签页的控制台输出 交互操作3 个工具chrome_click_element- 使用 CSS 选择器点击元素chrome_fill_or_select- 填充表单和选择选项chrome_keyboard- 模拟键盘输入和快捷键 数据管理5 个工具chrome_history- 搜索浏览器历史记录支持时间过滤chrome_bookmark_search- 按关键词查找书签chrome_bookmark_add- 添加新书签支持文件夹chrome_bookmark_delete- 删除书签工具的底层注册机制从源码看工具注册采用静态 Schema 动态 Flow双通道机制。核心实现在 app/native-server/src/mcp/register-tools.ts静态工具TOOL_SCHEMAS定义于共享包 packages/shared/src/tools.ts在ListToolsRequestSchema处理器中被直接返回动态 Flow 工具服务启动时会向扩展发送rr_list_published_flows请求把已发布的录制流程动态注册为flow.slug形式的工具支持tabTarget、refresh、captureNetwork、returnLogs、timeoutMs等运行选项。调用flow.*工具时会先按 slug 解析出 flowId再通过record_replay_flow_run请求执行流程调用转发普通工具调用通过 Native Messaging 将{ name, args }封装为CALL_TOOL消息发送给 Chrome 扩展等待响应超时 120 秒避免性能分析等长任务超时成功则返回response.data失败返回isError: true的 MCP 错误结构。所有工具统一遵循 MCP 标准响应格式{ content: [ { type: text, text: JSON string containing the actual response data } ], isError: false }七、典型使用场景与示例README 中提供了大量真实使用案例展示了自然语言 → AI 自主调用工具的完整闭环场景示例指令/查询涉及能力网页内容总结 Excalidraw 绘图帮我总结当前页面内容然后画个图帮我理解内容提取 交互图片分析后复刻到 Excalidraw先分析图片内容再结合分析复刻图片视觉 交互注入脚本修改网页样式帮我修改当前页面的样式去掉广告脚本注入自动捕获网络请求我想知道某平台的搜索接口是哪个响应体结构是什么样的网络监控浏览历史分析分析一下我近一个月的浏览记录历史检索网页对话翻译并总结当前网页内容分析自动截图整页把某网站首页截个图截图自动截图元素把某网站首页的图标截取下来元素截图书签管理将当前页面添加到书签中放到合适的文件夹书签 API自动关闭网页关闭所有 shadcn 相关的网页标签页管理其中两个场景配套了可直接复用的 Prompt 模板存放在仓库 prompt 目录下prompt/excalidraw-prompt.md让 AI 总结内容后用 Excalidraw 自动绘图prompt/content-analize.md先分析图片内容再复刻prompt/modify-web.md指导 AI 注入脚本修改页面样式如去广告。这些 Prompt 与场景演示实际调用的正是第六节所列的chrome_navigate、chrome_screenshot、chrome_network_capture_*、chrome_click_element、chrome_bookmark_*等工具链。八、底层架构与数据流若想深入了解实现仓库提供了专门的架构文档 docs/ARCHITECTURE.md。其整体架构分为六个层次AI Assistant LayerClaude Desktop、自定义 MCP 客户端、其他 AI 工具MCP Protocol LayerHTTP/SSE 传输、MCP Server 实例、工具注册表Native Server LayerFastify HTTP 服务器、Native Messaging Host、会话管理Chrome Extension Layer后台脚本主编排器与工具执行器、内容脚本、Popup 界面、Offscreen 文档Browser APIs LayerChrome APIs、Web APIs、Native MessagingAI Processing Layer语义引擎、向量数据库、SIMD 数学引擎、Web Workers。一次完整工具调用的数据流为AI Assistant → (1. Tool Call) → Native Server → (2. Native Message) → Chrome Extension → (3. Execute Tool) → Browser APIs → (4. API Response) → Chrome Extension → (5. Tool Result) → Native Server → (6. MCP Response) → AI AssistantAI 处理链路语义搜索则为内容提取 → 文本分块 → 语义引擎Embedding→ 向量数据库检索→ 相似文档返回。AI 与性能优化要点语义相似度引擎支持 BGE-small-en-v1.5、E5-small-v2、Universal Sentence Encoder 等模型在 Web Worker 中非阻塞执行配合 LRU 缓存与 SIMD 加速向量数据库基于 hnswlib-wasmHierarchical Navigable Small World 算法WebAssembly 实现持久化于 IndexedDB 并支持自动清理。示例配置参数为dimension: 384、maxElements: 10000、efConstruction: 200、M: 16、efSearch: 100、maxRetentionDays: 30内存管理Float32Array 缓冲池复用、AI 模型按需懒加载、Embedding LRU 淘汰、大对象显式回收。对应实现文件包括 app/chrome-extension/utils/semantic-similarity-engine.ts、app/chrome-extension/utils/vector-database.ts、app/chrome-extension/utils/simd-math-engine.ts 以及 packages/wasm-simd 下的 Rust 源码。九、扩展开发指南README 指引开发者参考 docs/CONTRIBUTING.md 参与贡献。从 docs/ARCHITECTURE.md 的扩展点章节可以确认三种扩展方式新增工具在packages/shared/src/tools.ts定义 Schema → 实现继承BaseBrowserToolExecutor的执行器 → 在工具 index 中注册 → 补充测试自定义 AI 模型集成到SemanticSimilarityEngine→ 增加 Worker 支持 → 配置模型预设 → 基准测试验证性能协议扩展自定义 MCP 能力、新的传输层、连接认证与性能监控。十、更多文档与后续路线docs/ARCHITECTURE.md详细技术架构说明docs/TOOLS.md完整工具 API 文档docs/TROUBLESHOOTING.md常见问题解决方案docs/VisualEditor.md面向 Claude Code / Codex 的可视化编辑器说明README 2025/12/30 新增特性项目路线图Future Roadmap上规划了身份认证、录制与回放、工作流自动化、Firefox 扩展支持等方向其中录制与回放Recording and Playback与工作流自动化在当前仓库中已能看到大量相关实现如record-replay、record-replay-v3目录与动态 Flow 工具机制可以推断这些能力正在快速落地。说明本文所有架构、参数、命令与配置均以当前仓库 README.md 及其引用的源码、docs/ARCHITECTURE.md、docs/TOOLS.md 为准项目处于早期迭代阶段接口与配置可能随版本演进调整。赞分享MCP 服务AI Agent浏览器控制GUI 自动化工具调用人工智能AI 应用【免费下载链接】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点击查看免费下载相关推荐Chrome MCP Server 完全指南基于 Chrome 扩展的浏览器自动化 MCP 服务器实战Chrome MCP Server 完全指南基于 Chrome 扩展的浏览器自动化 MCP 服务器实战 本文以 README_zh.md 为核心骨架系统讲解MCP 服务AI Agent浏览器控制GUI 自动化工具调用人工智能AI 应用Chrome MCP Server完整指南零基础掌握浏览器自动化神器想要让AI助手帮你自动操作浏览器吗Chrome MCP Server正是这样一个革命性的工具它通过Model Context Protocol MCP 将CMCP 服务AI Agent浏览器控制GUI 自动化工具调用人工智能AI 应用Chrome MCP Server开启浏览器AI自动化的全新维度在人工智能技术飞速发展的今天如何让AI助手真正理解并操作浏览器环境成为了一个关键挑战。Chrome MCP Server作为基于Model Context PMCP 服务AI Agent浏览器控制GUI 自动化工具调用人工智能AI 应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
