Browser kit

在人工智能辅助编程日益普及的今天，一个显著的痛点始终存在：强大的AI编码代理被限制在代码编辑器和命令行工具之中，无法触及我们最常用的交互界面——浏览器。当你需要AI帮助分析网页结构、自动填写表单、提取页面数据，或是复现一个复杂的前端交互bug时，往往只能手动描述场景。mcp-browser-kit 的出现，正是为了解决这一鸿沟，它通过浏览器扩展与MCP服务器的协同，为AI助手装上了操控本地浏览器的“手”和观察网页的“眼”。

项目基本信息

信息项	详情
项目名称	mcp-browser-kit
GitHub地址	https://github.com/ndthanhdev/mcp-browser-kit
项目描述	An MCP Server that enables AI assistants to interact with your local browsers.
作者	ndthanhdev
开源协议	MIT License
开源状态	公开状态
Languages	TypeScript / Go
支持平台	Windows / macOS / Linux
最后更新	2026-04-20

一、项目介绍

mcp-browser-kit 是一个设计精巧的MCP（模型上下文协议）服务器，它的核心目标是让AI编程助手能够安全、高效地与运行在你本地的浏览器进行双向通信。它并非另一个基于Puppeteer或Playwright的无头浏览器自动化工具，而是直接连接到你真实的、已登录的、带有所有Cookie和扩展的日常浏览器。

这一设计理念带来了根本性的不同。它由两部分协同工作：

MCP服务器：作为AI客户端（如Claude Desktop、Cursor）与浏览器之间的桥梁，负责接收指令并转发。
浏览器扩展：需要安装在你的Chrome、Firefox、Edge等浏览器中，负责在页面中执行具体的操作指令，并将结果（如DOM快照、截图）回传给服务器。

通过这种方式，AI可以执行的操作包括但不限于：获取页面标题和URL、提取页面内容、执行JavaScript脚本、填写表单、点击按钮、切换标签页等。由于它操控的是你的真实浏览器环境，AI可以无缝继承你的登录状态和站点偏好，无需每次都处理复杂的登录验证流程。

二、核心优势

与日常浏览器无缝集成

这是mcp-browser-kit最突出的优势。相比于每次都要启动一个全新、隔离的浏览器实例，它直接利用你现有的浏览器配置文件。这意味着AI可以立即访问你需要登录的网站（如公司内网、GitHub、各类SaaS工具），无需额外配置认证信息，极大降低了自动化流程的中断和复杂度。

跨浏览器兼容性强

项目通过提供两种构建版本（M2和M3）来兼容主流浏览器。M2构建基于Manifest V2，功能更强大，兼容Firefox、Safari和部分Chromium浏览器（如Brave、Edge）；M3构建基于Manifest V3，专为Chrome等强制要求V3的浏览器设计。这种清晰的兼容性策略确保了在不同浏览器生态下的可用性。

MIT开源协议，社区驱动

项目采用对商业应用极其友好的MIT许可证，这意味着你可以自由地使用、修改甚至将其集成到商业产品中。同时，项目保持活跃的更新状态，版本迭代迅速，体现了社区驱动的活力。

清晰的模块化架构

项目代码主要以TypeScript编写（占98.4%），结构清晰。从提交记录来看，项目维护者正在积极进行模块化拆分与重构（如引入moonrepo进行monorepo管理），这为开发者贡献代码或进行二次开发提供了良好的基础。

三、适用场景

AI辅助的前端开发与调试

你可以直接在Cursor或VS Code中，让AI检查当前打开的开发页面。例如，指令“检查当前页面控制台是否有报错”，AI将通过扩展获取控制台消息并返回。或者，“找到页面上所有的‘了解更多’链接，并告诉我它们的URL”，AI会执行DOM查询并给出清单。

Web自动化与数据提取

对于没有公开API的网站，你可以指挥AI助手进行自动化操作和数据抓取。比如，让AI每天定时打开某个报表页面，提取关键数据并汇总成表格。由于使用的是你的真实浏览器，登录态得以保留，整个流程更加可靠。

端到端测试的轻量级替代方案

在开发早期或进行探索性测试时，编写完整的Playwright或Selenium脚本可能过于繁重。使用mcp-browser-kit，你可以通过自然语言指令让AI执行一系列操作，例如：“打开设置页面，将主题切换为‘暗色’，然后截图保存”。这对于快速验证功能逻辑非常高效。

教育与演示

技术讲师可以事先“教会”AI一套网页操作流程，然后在课堂上通过简单的指令让AI实时演示，使教学过程更加生动和直观。

四、安装教程

mcp-browser-kit的安装分为配置MCP服务器和安装浏览器扩展两大步骤。

第一步：配置MCP服务器

在你的MCP客户端配置文件（如Claude Desktop的claude_desktop_config.json或Cursor的mcp.json）中添加以下配置：

{
  "mcpServers": {
    "browser-kit": {
      "command": "npx",
      "args": ["@mcp-browser-kit/server@latest"]
    }
  }
}

第二步：选择并安装浏览器扩展

根据你的浏览器类型，查阅官方兼容性表确定应使用的扩展构建版本（M2或M3）。
- Chrome用户：需要使用M3构建。
- Firefox/Safari用户：需要使用M2构建。
- Edge/Brave用户：两者皆可，优先选择功能更强的M2构建。
前往项目的 Releases 页面，下载对应你浏览器的最新版本扩展文件（.zip或.xpi）。

第三步：加载扩展

Chromium类浏览器 (Chrome, Edge, Brave)
1. 解压下载的.zip文件到一个固定目录。
2. 在浏览器地址栏输入 chrome://extensions/ 并回车。
3. 打开右上角的“开发者模式”开关。
4. 点击左上角的“加载已解压的扩展程序”，选择你刚才解压的文件夹。
Firefox
1. 在浏览器地址栏输入 about:addons 并回车。
2. 点击页面右侧的齿轮图标，选择“从文件安装附加组件”。
3. 选择你下载的.xpi文件进行安装。

第四步：验证连接

确保扩展已在浏览器中启用。
刷新所有你需要AI交互的浏览器标签页，以确保扩展的脚本被正确注入。
在你的MCP客户端中，向AI发送测试指令，例如：使用 browser-kit，告诉我当前浏览器活动标签页的标题。如果AI正确返回了标题，说明配置成功。

五、使用示例

以下是使用mcp-browser-kit与AI助手进行交互的几个典型例子。

示例一：获取页面基本信息

用户指令：使用 browser-kit，总结一下我当前打开的这篇GitHub README的主要功能。

AI的操作与回复:
AI会通过扩展获取当前活动标签页的DOM结构或文本内容，然后进行摘要。

AI回复：根据页面内容，mcp-browser-kit 是一个MCP服务器，它通过配套的浏览器扩展，让AI助手能够与你本地的浏览器进行交互。它支持获取页面信息、执行脚本、模拟用户操作等。

示例二：自动化网页操作

用户指令：帮我在当前这个GitHub仓库页面上，点击右上角的 "Star" 按钮。

AI的操作与回复:
AI会尝试定位“Star”按钮，并执行点击操作。如果操作成功，页面的Star状态会更新。

AI回复：我已尝试点击页面上的 "Star" 按钮。请查看浏览器，确认仓库是否已被标记为Star。如果操作失败，可能需要你手动将鼠标悬停在按钮附近，以便扩展更好地定位元素。

示例三：执行脚本提取数据

用户指令：列出当前页面上所有指向外部文档的链接。

AI的操作与回复:
AI会通过扩展注入一小段JavaScript代码来查询DOM，并返回结果。

// AI内部执行的逻辑示意
Array.from(document.querySelectorAll('a[href^="http"]'))
  .map(a => ({ text: a.innerText, href: a.href }))

AI回复：在当前页面上找到以下外部链接：
npm package: https://npmjs.org/package/@mcp-browser-kit/server
Fronteir AI: https://...

六、常见问题

问：AI无法控制我的浏览器，或者提示找不到活动标签页，怎么办？

答：请按以下顺序排查：

确认扩展已加载并启用：在浏览器的扩展管理页面（如 chrome://extensions/）查看MCP Browser Kit是否处于开启状态。
刷新标签页：在配置好MCP服务器并启用扩展后，必须刷新你想要交互的每一个浏览器标签页。
检查端口占用：项目默认使用59089和2769-2799端口。确保这些端口没有被防火墙或其他程序阻止。

问：为什么我的Chrome浏览器必须使用M3构建，而Firefox用M2？

答：这取决于浏览器对扩展平台Manifest版本的支持策略。Google Chrome已逐步淘汰Manifest V2扩展，强制要求使用Manifest V3。M3在权限和后台运行机制上更严格。而Firefox和Safari目前对Manifest V2仍有良好支持，并且M2构建能提供更完整的API，因此功能更强。

问：使用mcp-browser-kit安全吗？我担心AI会访问到我的敏感数据。

答：这是一个非常重要的考量。项目官方文档在“User Notes”部分明确提示：该工具目前处于Alpha阶段，建议使用独立的浏览器配置文件或专用浏览器实例。由于它直接操控你的真实浏览器，存在AI意外访问或泄露敏感信息的潜在风险。建议不要在包含网银、内部管理系统等高敏感度登录态的日常主用浏览器上直接使用。

问：我可以通过远程主机使用这个工具吗？

答：项目设计初衷是针对本地浏览器。官方明确提醒，Keep ports 59089 and 2769-2799 on your device network only，不建议将这些端口暴露在公网，因为目前缺乏请求认证机制。如果需要远程使用，建议考虑官方提到的Fronteir AI等托管部署方案。

七、总结

mcp-browser-kit 提供了一个创新且务实的方案，弥合了AI编码助手与真实Web浏览环境之间的鸿沟。它通过MCP协议和浏览器扩展的经典组合，让AI得以继承你的会话状态，操控真实的浏览器，从而在自动化、前端调试、数据提取等场景中发挥出巨大价值。尽管目前尚处Alpha阶段，在安全性和稳定性方面需要使用者多加留意，但其清晰的架构、友好的开源协议以及活跃的开发状态，都预示着它将成为AI辅助开发工具链中一颗值得关注的新星。

对于追求极致自动化、希望AI助手能深入Web开发与交互环节的开发者而言，mcp-browser-kit是一个值得投入时间探索和尝试的强力工具。

登录

注册账号