modelscope·@Sugatraj/Cursor-Browser-Tools-MCP
暂无描述。
让您的AI工具对浏览器的感知和交互能力提升10倍
该应用程序是一个强大的浏览器监控和交互工具，通过Anthropic的Model Context Protocol (MCP) 使基于AI的应用程序能够通过Chrome扩展程序捕获和分析浏览器数据。
请阅读我们的文档以获取完整的安装、快速入门和贡献指南。
查看我们的项目路线图：Github Roadmap / Project Board
v1.2.0已发布！以下是更新内容的简要概述：
请确保在IDE/MCP客户端中更新版本如下：
npx @agentdeskai/browser-tools-mcp@1.2.0
同时，请在此处下载最新版本的Chrome扩展程序： v1.2.0 BrowserToolsMCP Chrome Extension
之后，您可以像这样运行本地Node服务器：
npx @agentdeskai/browser-tools-server@1.2.0
请务必指定版本1.2.0，因为NPX缓存可能会阻止您获取最新版本！每次更新时只需执行一次。一旦执行过一次，您就应该处于最新版本。
打开Chrome开发者工具后，日志应该会被发送到您的服务器 🦾
如果您有任何问题或遇到任何问题，请随时创建一个问题工单！如果您有任何改进的想法，也欢迎联系我们或创建带有增强标签的问题工单，或者通过@tedx_ai on x联系我。
像Cursor这样的编码代理可以无缝地对当前页面运行这些审核。通过利用Puppeteer和Lighthouse npm库，BrowserTools MCP现在可以：
...所有这些都不需要离开您的IDE 🎉
| 审核类型 | 描述 |
|---|---|
| 可访问性 | 符合WCAG标准的颜色对比度检查、缺少alt文本、键盘导航陷阱、ARIA属性等。 |
| 性能 | 由Lighthouse驱动的渲染阻塞资源、过度DOM大小、未优化图像以及其他影响页面速度的因素的分析。 |
| SEO | 评估页面SEO因素（如元数据、标题和链接结构）并提出改进建议以提高搜索可见性。 |
| 最佳实践 | 检查Web开发的一般最佳实践。 |
| 审计模式 | 依次运行所有审计工具。 |
| 调试模式 | 依次运行所有调试工具。 |
请确保：
无头浏览器自动化：
Puppeteer 自动化一个无头 Chrome 实例来加载页面并收集审计数据，即使对于单页应用（SPA）或通过 JavaScript 加载的内容也能确保结果准确。
无头浏览器实例在最后一次审计调用后保持活跃60秒，以高效处理连续的审计请求。
结构化结果：
每次审计都以结构化的 JSON 格式返回结果，包括总体评分和详细的问题列表。这使得 MCP 兼容客户端能够轻松解释发现的问题并提供可操作的见解。
MCP 服务器提供了对当前页面进行审计的工具。以下是一些可以用来触发它们的示例查询：
runAccessibilityAudit)确保页面符合 WCAG 等无障碍标准。
示例查询：
- "这个页面有无障碍问题吗？"
- "运行无障碍审计。"
- "检查此页面是否符合 WCAG 标准。"
runPerformanceAudit)识别性能瓶颈和加载问题。
示例查询：
- "为什么这个页面加载这么慢？"
- "检查这个页面的性能。"
- "运行性能审计。"
runSEOAudit)评估页面针对搜索引擎的优化程度。
示例查询：
- "我如何改进这个页面的 SEO？"
- "运行 SEO 审计。"
- "检查此页面的 SEO。"
runBestPracticesAudit)检查网页开发中的通用最佳实践。
示例查询：
- "运行最佳实践审计。"
- "检查此页面的最佳实践。"
- "这个页面有没有最佳实践方面的问题？"
runAuditMode)按特定顺序运行所有审计。如果检测到框架，则会运行 NextJS 审计。
示例查询：
- "运行审计模式。"
- "进入审计模式。"
runNextJSAudit)检查 NextJS 应用程序的最佳实践和 SEO 改进建议
示例查询：
- "运行 NextJS 审计。"
- "运行 NextJS 审计，我使用的是 app 路由。"
- "运行 NextJS 审计，我使用的是 page 路由。"
runDebuggerMode)按特定顺序运行所有调试工具
示例查询：
- "进入调试模式。"
有三个核心组件用于捕获和分析浏览器数据：
┌─────────────┐ ┌──────────────┐ ┌───────────────┐ ┌─────────────┐ │ MCP 客户端 │ ──► │ MCP 服务器 │ ──► │ Node 服务器 │ ──► │ Chrome │ │ (例如 │ ◄── │ (协议处理) │ ◄── │ (中间件) │ ◄── │ 扩展 │ │ Cursor) │ │ │ │ │ │ │ └─────────────┘ └──────────────┘ └───────────────┘ └─────────────┘Model Context Protocol (MCP) 是由 Anthropic AI 模型支持的一种功能，它允许你为任何兼容的客户端创建自定义工具。像 Claude Desktop、Cursor、Cline 或 Zed 这样的 MCP 客户端可以运行一个 MCP 服务器，该服务器会“教导”这些客户端如何使用新的工具。
这些工具可以调用外部 API，但在我们的案例中，所有日志都存储在你的本地机器上，并且永远不会发送到任何第三方服务或 API。BrowserTools MCP 运行一个本地的 NodeJS API 服务器实例，该服务器与 BrowserTools Chrome 扩展程序进行通信。
所有使用 BrowserTools MCP 服务器的消费者都通过相同的 NodeJS API 和 Chrome 扩展程序进行交互。
安装步骤可以在我们的文档中找到：
一旦安装并配置好，系统将允许任何兼容的 MCP 客户端执行以下操作：
快递100 MCP Server提供快递信息查询、快递运费预估比价、快递时效查询（含发货前时效查询与在途动态时效查询）等功能。
暂无描述。
一个提供网页开发工具的MCP服务器，例如屏幕捕捉功能，可以让AI代理获取并处理用户屏幕的截图。
一个从网站提取有意义内容并将HTML转换为高质量Markdown的MCP服务器，使用Mozilla的Readability引擎。
一种模型上下文协议服务器，它使大型语言模型能够通过结构化的可访问性快照与网页交互，而无需使用视觉模型或截图。
桌面通知、个性化声音、ntfy 手机应用通知、邮件通知和 API 推送，减少 AI 任务等待焦虑，舒适地享用一杯咖啡。