# Sugatraj
## 基本信息
- Slug: `sugatraj-cursor-browser-tools-mcp`
- Source: modelscope
- Publisher: @Sugatraj/Cursor-Browser-Tools-MCP
- Categories: browser-automation / web-scraping / rag-systems
- Hosted: No
- License: MIT License
- Source URL: https://www.modelscope.cn/mcp/servers/@Sugatraj/Cursor-Browser-Tools-MCP
## 简介
暂无描述。
## MCP Server 详情

# BrowserTools MCP

> 让您的AI工具对浏览器的感知和交互能力提升10倍

该应用程序是一个强大的浏览器监控和交互工具，通过Anthropic的Model Context Protocol (MCP) 使基于AI的应用程序能够通过Chrome扩展程序捕获和分析浏览器数据。

请阅读我们的[文档](https://browsertools.agentdesk.ai/)以获取完整的安装、快速入门和贡献指南。

## 路线图

查看我们的项目路线图：[Github Roadmap / Project Board](https://github.com/orgs/AgentDeskAI/projects/1/views/1)

## 更新

v1.2.0已发布！以下是更新内容的简要概述：
- 您现在可以在DevTools面板中启用“允许自动粘贴到光标”。屏幕截图将自动粘贴到光标（请确保点击或聚焦到Cursor中的代理输入字段，否则不起作用！）
- 集成了一套SEO、性能、可访问性和最佳实践分析工具，通过Lighthouse实现
- 实现了一个特定于NextJS的提示，用于改善NextJS应用程序的SEO
- 添加了调试模式作为工具，按特定顺序执行所有调试工具，并附带一个改进推理的提示
- 添加了审计模式作为工具，按特定顺序执行所有审计工具
- 解决了Windows连接问题
- 改进了BrowserTools服务器、扩展程序与MCP服务器之间的网络连接，包括主机/端口自动发现、自动重连和优雅关闭机制
- 增加了使用Ctrl+C更轻松退出Browser Tools服务器的功能

请确保在IDE/MCP客户端中更新版本如下：
`npx @agentdeskai/browser-tools-mcp@1.2.0`

同时，请在此处下载最新版本的Chrome扩展程序：
[v1.2.0 BrowserToolsMCP Chrome Extension](https://github.com/AgentDeskAI/browser-tools-mcp/releases/download/v1.2.0/BrowserTools-1.2.0-extension.zip)

之后，您可以像这样运行本地Node服务器：
`npx @agentdeskai/browser-tools-server@1.2.0`

请务必指定版本1.2.0，因为NPX缓存可能会阻止您获取最新版本！每次更新时只需执行一次。一旦执行过一次，您就应该处于最新版本。

打开Chrome开发者工具后，日志应该会被发送到您的服务器 🦾

如果您有任何问题或遇到任何问题，请随时创建一个问题工单！如果您有任何改进的想法，也欢迎联系我们或创建带有增强标签的问题工单，或者通过[@tedx_ai on x](https://x.com/tedx_ai)联系我。

## 完整更新说明：

像Cursor这样的编码代理可以无缝地对当前页面运行这些审核。通过利用Puppeteer和Lighthouse npm库，BrowserTools MCP现在可以：

- 评估页面是否符合WCAG标准
- 识别性能瓶颈
- 标记页面上的SEO问题
- 检查是否遵循Web开发最佳实践
- 审查NextJS特定的SEO问题

...所有这些都不需要离开您的IDE 🎉

---

## 🔑 关键新增功能

| 审核类型         | 描述                                                                                                                              |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
| **可访问性**  | 符合WCAG标准的颜色对比度检查、缺少alt文本、键盘导航陷阱、ARIA属性等。                        |
| **性能**    | 由Lighthouse驱动的渲染阻塞资源、过度DOM大小、未优化图像以及其他影响页面速度的因素的分析。 |
| **SEO**            | 评估页面SEO因素（如元数据、标题和链接结构）并提出改进建议以提高搜索可见性。      |
| **最佳实践** | 检查Web开发的一般最佳实践。                                                                                    || **NextJS 审计**   | 注入用于执行 NextJS 审计的提示。                                                                                         |
| **审计模式**     | 依次运行所有审计工具。                                                                                                   |
| **调试模式**      | 依次运行所有调试工具。                                                                                                  |

---

## 🛠️ 使用审计工具

### ✅ **开始前**

请确保：

- 浏览器中有一个**活动标签页**
- **BrowserTools 扩展已启用**

### ▶️ **运行审计**

**无头浏览器自动化**：  
Puppeteer 自动化一个无头 Chrome 实例来加载页面并收集审计数据，即使对于单页应用（SPA）或通过 JavaScript 加载的内容也能确保结果准确。

无头浏览器实例在最后一次审计调用后保持活跃**60秒**，以高效处理连续的审计请求。

**结构化结果**：  
每次审计都以结构化的 JSON 格式返回结果，包括总体评分和详细的问题列表。这使得 MCP 兼容客户端能够轻松解释发现的问题并提供可操作的见解。

MCP 服务器提供了对当前页面进行审计的工具。以下是一些可以用来触发它们的示例查询：

#### 可访问性审计 (`runAccessibilityAudit`)

确保页面符合 WCAG 等无障碍标准。

> **示例查询：**
>
> - "这个页面有无障碍问题吗？"
> - "运行无障碍审计。"
> - "检查此页面是否符合 WCAG 标准。"

#### 性能审计 (`runPerformanceAudit`)

识别性能瓶颈和加载问题。

> **示例查询：**
>
> - "为什么这个页面加载这么慢？"
> - "检查这个页面的性能。"
> - "运行性能审计。"

#### SEO 审计 (`runSEOAudit`)

评估页面针对搜索引擎的优化程度。

> **示例查询：**
>
> - "我如何改进这个页面的 SEO？"
> - "运行 SEO 审计。"
> - "检查此页面的 SEO。"

#### 最佳实践审计 (`runBestPracticesAudit`)

检查网页开发中的通用最佳实践。

> **示例查询：**
>
> - "运行最佳实践审计。"
> - "检查此页面的最佳实践。"
> - "这个页面有没有最佳实践方面的问题？"

#### 审计模式 (`runAuditMode`)

按特定顺序运行所有审计。如果检测到框架，则会运行 NextJS 审计。

> **示例查询：**
>
> - "运行审计模式。"
> - "进入审计模式。"

#### NextJS 审计 (`runNextJSAudit`)

检查 NextJS 应用程序的最佳实践和 SEO 改进建议

> **示例查询：**
>
> - "运行 NextJS 审计。"
> - "运行 NextJS 审计，我使用的是 app 路由。"
> - "运行 NextJS 审计，我使用的是 page 路由。"

#### 调试模式 (`runDebuggerMode`)

按特定顺序运行所有调试工具

> **示例查询：**
>
> - "进入调试模式。"

## 架构

有三个核心组件用于捕获和分析浏览器数据：

1. **Chrome 扩展**：一个浏览器扩展，用于捕获屏幕截图、控制台日志、网络活动和 DOM 元素。
2. **Node 服务器**：一个中间服务器，促进 Chrome 扩展与任何 MCP 服务器实例之间的通信。
3. **MCP 服务器**：一个模型上下文协议服务器，为 AI 客户端提供标准化工具以与浏览器交互。


┌─────────────┐     ┌──────────────┐     ┌───────────────┐     ┌─────────────┐
│  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 扩展程序进行交互。

#### Chrome 扩展程序

- 监控 XHR 请求/响应和控制台日志
- 跟踪选中的 DOM 元素
- 将所有日志和当前元素发送到 BrowserTools Connector
- 连接到 Websocket 服务器以捕获/发送屏幕截图
- 允许用户配置 token 截断限制和屏幕截图文件夹路径

#### Node 服务器

- 作为 Chrome 扩展程序和 MCP 服务器之间的中间件
- 从 Chrome 扩展程序接收日志和当前选中的元素
- 处理来自 MCP 服务器的请求以捕获日志、屏幕截图或当前元素
- 向 Chrome 扩展程序发送 Websocket 命令以捕获屏幕截图
- 智能截断字符串和重复对象的数量，以避免超出 token 限制
- 移除 cookies 和敏感头部信息，以避免将其发送到 MCP 客户端中的 LLMs

#### MCP 服务器

- 实现 Model Context Protocol
- 为 AI 客户端提供标准化工具
- 与各种 MCP 客户端（如 Cursor、Cline、Zed、Claude Desktop 等）兼容

## 安装

安装步骤可以在我们的文档中找到：

- [BrowserTools MCP 文档](https://browsertools.agentdesk.ai/)

## 使用

一旦安装并配置好，系统将允许任何兼容的 MCP 客户端执行以下操作：

- 监控浏览器控制台输出
- 捕获网络流量
- 截取屏幕截图
- 分析选中的元素
- 清除存储在我们 MCP 服务器中的日志
- 运行可访问性、性能、SEO 和最佳实践审计

## 兼容性

- 与任何 MCP 兼容的客户端一起工作
- 主要设计用于 Cursor IDE 集成
- 支持其他 AI 编辑器和 MCP 客户端