关键词

浏览器自动化网页内容提取浏览器扩展LLM工具上下文服务

使用说明

项目简介

Browser MCP 是一个浏览器扩展和 MCP 服务器的组合，旨在作为 Model Context Protocol (MCP) 的服务器端实现，为大型语言模型 (LLM) 应用提供浏览器环境的上下文信息和操作能力。通过 Browser MCP，LLM 可以安全、可控地访问和操作用户的浏览器，实现诸如获取网页内容、修改页面样式、查询浏览历史等功能，从而扩展 LLM 在浏览器环境中的应用场景。

主要功能点

  • 资源访问 (Resources)： 虽然仓库信息中没有明确提及资源管理，但作为 MCP 服务器，理论上支持资源托管和访问，未来可能扩展资源管理功能。
  • 工具注册和执行 (Tools)： 已实现多个浏览器操作工具，包括：
    • 'get_current_page_markdown': 获取当前浏览网页的 Markdown 格式内容，方便 LLM 理解网页文本信息。
    • 'append_style': 向当前网页注入 CSS 样式，允许 LLM 修改网页的视觉呈现，例如切换夜间模式。
    • 'history_search': 搜索浏览器历史记录，使 LLM 能够回顾用户浏览行为。
  • Prompt 模板 (Prompts)： 仓库信息中未明确提及 Prompt 模板功能，但 MCP 服务器具备支持 Prompt 模板的潜力，未来可能加入以支持更灵活的 LLM 交互模式。
  • JSON-RPC 协议通信： 服务器和扩展程序通过 WebSocket 建立连接，并使用 JSON-RPC 协议进行通信，符合 MCP 标准。
  • 会话管理和能力声明： 服务器端负责管理连接会话，并通过 MCP 协议声明自身提供的工具能力。
  • 多种传输协议支持： 当前使用 WebSocket 协议，未来可能扩展支持其他传输协议。

安装步骤

  1. 安装 Node.js 和 pnpm: 确保你的系统已安装 Node.js 和 pnpm 包管理器。如果未安装，请根据你的操作系统环境安装。
  2. 克隆仓库: 使用 Git 克隆 'browser-mcp' 仓库到本地： 
    git clone https://github.com/djyde/browser-mcp.git
cd browser-mcp
  3. 安装依赖: 在仓库根目录下运行以下命令安装项目依赖： 
    pnpm install
  4. 构建服务器: 进入 'server' 目录并构建服务器代码： 
    cd server
npm run build
cd ..
  5. 构建浏览器扩展: 进入 'extension' 目录，选择你使用的浏览器类型（Chrome, Edge, Firefox）并构建扩展程序。例如，构建 Chrome 扩展： 
    cd extension
npm run build
cd ..
    构建完成后，扩展程序文件将位于 'extension/.output' 目录中。
  6. 加载浏览器扩展:
    • Chrome/Edge: 打开浏览器，访问 'chrome://extensions/' 或 'edge://extensions/'，开启 “开发者模式”，点击 “加载已解压的扩展程序”，选择 'browser-mcp/extension/.output' 目录。
    • Firefox: 打开浏览器，访问 'about:debugging#/runtime/this-firefox'，点击 “加载临时附加组件”，选择 'browser-mcp/extension/.output/manifest.json' 文件。
  7. 启动 MCP 服务器: 在 'server' 目录下，运行以下命令启动 MCP 服务器： 
    cd server
npm run dev
    或者运行构建后的服务器程序： 
    node dist/cli.js
    服务器默认监听 WebSocket 端口 '11223'。

服务器配置

MCP 客户端需要配置 MCP 服务器的启动命令 (command) 及其参数 (args) 才能与 Browser MCP 服务器建立连接。以下是 Browser MCP 服务器的典型配置信息，请将其添加到你的 MCP 客户端配置中：

{
  "mcpServers": {
    "browser-mcp": {
      "command": "node",
      "args": [
        "path/to/browser-mcp/server/dist/cli.js"  // 请替换为实际的 server/dist/cli.js 文件路径
      ]
    }
  }
}

配置参数说明:

  • '"browser-mcp"': 服务器名称，可以自定义。
  • '"command": "node"': 启动服务器的命令，这里使用 Node.js 解释器。
  • '"args"': 命令参数数组，包含服务器脚本的路径。你需要将 '"path/to/browser-mcp/server/dist/cli.js"' 替换为你本地 'browser-mcp' 仓库中 'server/dist/cli.js' 文件的绝对或相对路径。

注意: 请确保 MCP 客户端能够访问到 'server/dist/cli.js' 文件。如果使用相对路径，请确保相对路径是相对于 MCP 客户端的启动目录而言的。

基本使用方法

  1. 连接服务器: 启动 MCP 客户端，并确保已正确配置 Browser MCP 服务器信息。客户端应该能够自动连接到 Browser MCP 服务器。浏览器扩展程序会在连接成功后显示绿色勾号图标。
  2. 调用工具: 在 LLM 应用中，你可以通过 MCP 协议调用 Browser MCP 服务器提供的工具。例如，要使用 'get_current_page_markdown' 工具获取当前网页的 Markdown 内容，你可以向 MCP 服务器发送一个 'CallToolRequest' 请求，指定工具名称为 'get_current_page_markdown'。
  3. 查看结果: 服务器执行工具后，会将结果以 JSON-RPC 响应的形式返回给 MCP 客户端。你可以解析响应结果，并在 LLM 应用中使用这些信息。

示例 Prompt:

假设你希望 LLM 总结当前网页的内容，你可以指示 LLM 调用 'get_current_page_markdown' 工具，然后基于返回的 Markdown 内容进行总结。

总结当前网页的主要内容。

LLM 应用内部需要实现 MCP 客户端逻辑，以发送工具调用请求并处理服务器返回的响应。具体实现方式取决于你使用的 MCP 客户端库和 LLM 应用框架。

信息

分类

网页与API

访问项目