浏览器自动化服务器

Chrome MCP Server是一款基于Chrome扩展的模型上下文协议服务器,可将浏览器功能暴露给AI助手,实现复杂的自动化、内容分析和语义搜索。

  • by HamzaaAkmal
  • TypeScript
  • 混合部署
  • 更新于
在 GitHub 查看 HamzaaAkmal/ChromeMCP

使用说明

Chrome MCP服务器🚀

🌟 将您的Chrome浏览器变成您的智能助手 -让AI控制您的浏览器,将其转变为强大的AI控制的自动化工具。

📖 文档: 英语 | 中文

该项目仍处于早期阶段,正在加紧开发。更多功能、稳定性改进和其他增强功能将随之而来。


🎯 什么是Chrome MCP服务器?

Chrome MCP服务器是基于Chrome扩展程序的 模型上下文协议(MCP)服务器 这将您的Chrome浏览器功能暴露给Claude等人工智能助手,实现复杂的浏览器自动化、内容分析和语义搜索。与传统的浏览器自动化工具(如Playwright)不同, Chrome MCP服务器 直接使用您的日常Chrome浏览器,利用现有的用户习惯、配置和登录状态,允许各种大型模型或聊天机器人控制您的浏览器,真正成为您的日常助手。

✨ 新功能(2025/12/30)

  • Claude Code&Codex的可视化编辑器,更多详情请点击此处: 可视化编辑器

✨ 核心功能

  • 😁 聊天机器人/模型不可知:让您喜欢的任何LLM或聊天机器人客户端或代理自动化您的浏览器
  • ⭐️ 使用您的原始浏览器:与您现有的浏览器环境无缝集成(您的配置、登录状态等)
  • 💻 完全本地化:纯本地MCP服务器,确保用户隐私
  • 🚄 可流式传输的HTTP:流式HTTP连接方法
  • 🏎 交叉表:跨选项卡上下文
  • 🧠 语义搜索:内置矢量数据库,用于智能浏览器选项卡内容发现
  • 🔍 智能内容分析:AI驱动的文本提取和相似性匹配
  • 🌐 20+工具:支持截图、网络监控、交互操作、书签管理、浏览历史记录和20多种其他工具
  • 🚀 SIMD加速人工智能:自定义WebAssembly SIMD优化,矢量运算速度提高4-8倍

🆚 与类似项目的比较

比较维度 基于剧作家的MCP服务器 基于Chrome扩展程序的MCP服务器
资源使用情况 ❌ 需要启动独立的浏览器进程、安装Playwright依赖项、下载浏览器二进制文件等。 ✅ 无需启动独立的浏览器进程,直接利用用户已经打开的Chrome浏览器
用户会话重用 ❌ 需要重新登录 ✅ 自动使用现有登录状态
浏览器环境 ❌ 清洁环境缺少用户设置 ✅ 完全保留用户环境
API访问 ⚠️ 仅限于剧作家API ✅ 完全访问Chrome原生API
启动速度 ❌ 需要启动浏览器进程 ✅ 只需激活扩展
响应速度 50-200ms进程间通信 ✅ 更快

🚀 快速开始

先决条件

  • Node.js>=20.0.0和pnpm/npm
  • Chrome/Chromium浏览器

安装步骤

  1. 从GitHub下载最新的Chrome扩展程序

下载链接:https://github.com/hangwin/mcp-chrome/releases

  1. 在全球范围内安装mcp铬桥

npm

npm install -g mcp-chrome-bridge

pnpm

# Method 1: Enable scripts globally (recommended)
pnpm config set enable-pre-post-scripts true
pnpm install -g mcp-chrome-bridge

# Method 2: Manual registration (if postinstall doesn't run)
pnpm install -g mcp-chrome-bridge
mcp-chrome-bridge register

注意:出于安全考虑,pnpm v7+默认禁用安装后脚本。这 enable-pre-post-scripts 设置控制安装前/安装后脚本是否运行。如果自动注册失败,请使用上面的手动注册命令。

  1. 加载Chrome扩展程序
    • 打开Chrome浏览器并转到 chrome://extensions/
    • 启用“开发人员模式”
    • 点击“加载解包”并选择 your/dowloaded/extension/folder
    • 点击扩展图标打开插件,然后点击连接查看MCP配置

与MCP协议客户端一起使用

使用流式HTTP连接(👍🏻 推荐)

将以下配置添加到MCP客户端配置中(以CherryStudio为例):

建议使用流式HTTP连接方法

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

使用STDIO连接(替代方案)

如果您的客户端只支持stdio连接方法,请使用以下方法:

  1. 首先,检查你刚刚安装的npm包的安装位置
# npm check method
npm list -g mcp-chrome-bridge
# pnpm check method
pnpm list -g mcp-chrome-bridge

假设上面的命令输出路径为:/Users/xxx/Library/pnpm/global/5 那么你的最终路径是:/Users/xxx/Library/pnpm/global/5/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stio.js

  1. 用您刚刚获得的最终路径替换下面的配置
{
  "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"
      ]
    }
  }
}

例如:增强中的配置:

🛠️ 可用工具

完整的工具列表: 完整工具清单

📊 Browser Management (6 tools)
  • 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 -向注入的内容脚本发送命令
📸 Screenshots & Visual (1 tool)
  • chrome_screenshot -具有元素定位、全页面支持和自定义尺寸的高级屏幕截图捕获
🌐 Network Monitoring (4 tools)
  • chrome_network_capture_start/stop -webRequest API网络捕获
  • chrome_network_debugger_start/stop -带有响应主体的调试器API
  • chrome_network_request -发送自定义HTTP请求
🔍 Content Analysis (4 tools)
  • search_tabs_content -跨浏览器选项卡的人工智能语义搜索
  • chrome_get_web_content -从页面中提取HTML/文本内容
  • chrome_get_interactive_elements -查找可点击的元素
  • chrome_console -从浏览器选项卡捕获和检索控制台输出
🎯 Interaction (3 tools)
  • chrome_click_element -使用CSS选择器单击元素
  • chrome_fill_or_select -填写表格并选择选项
  • chrome_keyboard -模拟键盘输入和快捷键
📚 Data Management (5 tools)
  • chrome_history -使用时间过滤器搜索浏览器历史记录
  • chrome_bookmark_search -按关键字查找书签
  • chrome_bookmark_add -添加具有文件夹支持的新书签
  • chrome_bookmark_delete -删除书签

🧪 使用示例

AI帮助您汇总网页内容,并自动控制Excalidraw进行绘图

提示: 提取提示 说明:帮助我总结当前页面内容,然后绘制图表以帮助我理解。 https://www.youtube.com/watch?v=3fBPdUBWVz0

https://github.com/user-attachments/assets/fd17209b-303d-48db-9e5e-3717141df183

在分析图像内容后,LLM会自动控制Excalidraw复制图像

提示: 提取提示|和内容 说明:首先,分析图像的内容,然后通过将分析与图像的内容相结合来复制图像。 https://www.youtube.com/watch?v=tEPdHZBzbZk

https://github.com/user-attachments/assets/60d12b1a-9b74-40f4-994c-95e8fa1fc8d3

AI自动注入脚本并修改网页样式

提示: 修改web提示 说明:帮助我修改当前页面的样式并删除广告。 https://youtu.be/twI6apRKHsk

https://github.com/user-attachments/assets/69cb561c-2e1e-4665-9411-4a3185f9643e

AI自动为您捕获网络请求

查询:我想知道小红书的搜索API是什么,响应结构是什么

https://youtu.be/1hHKr7XKqnQ

https://github.com/user-attachments/assets/dc7e5cab-b9af-4b9a-97ce-18e4837318d9

AI帮助分析您的浏览历史

查询:分析我过去一个月的浏览历史记录

https://youtu.be/jf2UZfrR2Vk

https://github.com/user-attachments/assets/31b2e064-88c6-4adb-96d7-50748b826eae

网页对话

query:翻译和总结当前网页 https://youtu.be/FlJKS9UQyC8

https://github.com/user-attachments/assets/aa8ef2a1-2310-47e6-897a-769d85489396

AI会自动为您截图(网页截图)

查询:截取Hugging Face主页的截图 https://youtu.be/7ycK6iksWi4

https://github.com/user-attachments/assets/65c6eee2-6366-493d-a3bd-2b27529ff5b3

AI会自动为您截图(元素截图)

查询:从Hugging Face主页上捕获图标 https://youtu.be/ev8VivANIrk

https://github.com/user-attachments/assets/d0cf9785-c2fe-4729-a3c5-7f2b8b96fe0c

AI帮助管理书签

query:将当前页面添加到书签中,并将其放在适当的文件夹中

https://youtu.be/R_83arKmFTo

https://github.com/user-attachments/assets/15a7d04c-0196-4b40-84c2-bafb5c26dfe0

自动关闭网页

query:关闭所有与shadcn相关的网页

https://youtu.be/2wzUT6eNVg4

https://github.com/user-attachments/assets/83de4008-bb7e-494d-9b0f-98325cfea592

🤝 贡献

我们欢迎捐款!请参阅 贡献.md 详细指南。

🚧 未来路线图

我们对Chrome MCP服务器的未来发展有着令人兴奋的计划:

  • []身份验证
  • []录制和播放
  • []工作流自动化
  • []增强的浏览器支持(Firefox扩展)

想为这些功能做出贡献吗? 看看我们的 贡献指南 加入我们的发展社区!

📄 许可证

此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。

📚 更多文档