浏览器工具 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. 项目目录结构及介绍

本项目是基于 Model Context Protocol (MCP) 的浏览器监控和交互工具，它通过 Chrome 扩展来捕获和分析浏览器数据。以下是项目的目录结构及各部分功能的简要介绍：

browser-tools-mcp/
├── browser-tools-mcp/           # Chrome 扩展相关文件
│   ├── background.js            # 扩展的后台脚本
│   ├── content.js               # 注入到页面中的脚本
│   ├── manifest.json            # 扩展的配置文件
│   └── popup.html              # 扩展的弹出页面
├── browser-tools-server/        # 本地 Node.js 服务器，用于收集日志
│   ├── index.js                # 服务器入口文件
│   └── package.json            # 服务器依赖和配置
├── chrome-extension/           # Chrome 扩展打包文件
├── docs/                       # 文档目录
│   └── README.md               # 项目说明文件
├── .DS_Store                   # macOS 系统文件
├── .gitignore                  # git 忽略文件列表
└── LICENSE                     # 项目许可证文件

2. 项目的启动文件介绍

项目的启动主要涉及两个部分：Chrome 扩展和本地 Node.js 服务器。

Chrome 扩展

Chrome 扩展的启动文件是 manifest.json，它定义了扩展的基本信息和权限。以下是 manifest.json 的基本内容：

{
  "manifest_version": 2,
  "name": "BrowserTools MCP",
  "version": "1.0",
  "description": "Make your AI tools 10x more aware and capable of interacting with your browser.",
  "permissions": [
    "activeTab",
    "storage",
    "scripting"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  }
}

Node.js 服务器

Node.js 服务器的启动文件是 index.js，它负责启动服务器并处理来自 Chrome 扩展的数据。以下是一个简化的服务器启动示例：

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

3. 项目的配置文件介绍

本项目的主要配置文件是 manifest.json 和 package.json。

manifest.json

manifest.json 是 Chrome 扩展的配置文件，它定义了扩展的名称、版本、权限、背景脚本、动作等。开发者需要根据扩展的需求来配置这个文件。

package.json

package.json 是 Node.js 项目的配置文件，它定义了项目的依赖、脚本和元数据。以下是一个基本的 package.json 示例：

{
  "name": "browser-tools-server",
  "version": "1.0.0",
  "description": "A server for gathering logs from the browser.",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

在这个配置文件中，scripts 部分定义了启动服务器的命令，dependencies 部分列出了项目依赖的 Node.js 模块。

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