浏览器工具MCP项目安装与配置指南

浏览器工具MCP项目安装与配置指南

browser-tools-mcp Monitor browser logs directly from Cursor and other MCP compatible IDEs. 项目地址: https://gitcode.com/gh_mirrors/br/browser-tools-mcp

1. 项目基础介绍

浏览器工具MCP（BrowserTools MCP）是一个开源项目，旨在通过 Anthropic 的模型上下文协议（Model Context Protocol, MCP）使AI应用能够捕获和分析浏览器数据。本项目包含一个Chrome扩展，可以捕获浏览器的截图、控制台日志、网络活动和DOM元素。

主要编程语言：JavaScript（用于Chrome扩展和Node.js服务器）

2. 项目使用的关键技术和框架

• Chrome扩展框架：用于开发浏览器内运行的扩展程序。
• Node.js：作为中间服务器，处理Chrome扩展和MCP服务器之间的通信。
• Puppeteer：用于自动化无头Chrome实例以执行页面审计。
• Lighthouse：集成在项目中，用于执行网页性能、可访问性、最佳实践的审计。

3. 安装和配置准备工作

在开始安装之前，请确保您的系统中已经安装以下软件：

• Node.js：本项目需要Node.js环境，建议使用LTS版本。
• Git：用于克隆和操作项目代码。
• Chrome浏览器：本项目为Chrome扩展开发，需要安装Chrome浏览器。

安装步骤

克隆项目

首先，使用Git克隆项目到本地：

git clone https://github.com/AgentDeskAI/browser-tools-mcp.git

安装依赖

进入项目目录，安装Node.js的依赖：

cd browser-tools-mcp
npm install

配置Chrome扩展

1. 打开Chrome浏览器，输入 chrome://extensions/ 在地址栏并进入扩展页面。
2. 开启开发者模式。
3. 点击“加载已解压的扩展”，选择项目中的Chrome扩展文件夹。

启动Node.js服务器

在项目目录中，运行以下命令启动Node.js服务器：

npx @agentdeskai/browser-tools-server@latest

运行MCP服务器

打开一个新的终端窗口，运行以下命令启动MCP服务器：

npx @agentdeskai/browser-tools-mcp@latest

使用Chrome扩展

1. 打开Chrome的开发者工具。
2. 在开发者工具中找到“BrowserToolsMCP”面板。
3. 通过该面板，您可以开始使用项目提供的各种功能。

确保在整个过程中，您的浏览器、Node.js服务器和MCP服务器都是开启状态。

以上就是浏览器工具MCP项目的详细安装与配置指南。如果您在安装或配置过程中遇到任何问题，请查阅项目文档或创建问题报告。

browser-tools-mcp Monitor browser logs directly from Cursor and other MCP compatible IDEs. 项目地址: https://gitcode.com/gh_mirrors/br/browser-tools-mcp