项目简介

本项目是一个基于Model Context Protocol (MCP) 的服务器实现，旨在通过Chrome浏览器扩展程序，为大型语言模型 (LLM) 应用提供网页自动化和信息获取能力。它允许LLM通过标准化的MCP接口，控制Chrome浏览器执行网页导航、元素交互、数据提取等操作，从而扩展LLM在Web环境中的应用场景。

主要功能点

页面导航与交互: 支持URL导航、元素点击、文本输入、表单填充、页面滚动、表格数据提取和JavaScript代码执行等功能，实现对网页的精细控制。
元素操作: 能够获取网页元素的各种信息（尺寸、样式、可见性等），等待元素出现，甚至动态修改页面背景颜色，增强LLM对页面状态的感知和操作能力。
页面分析: 可以获取网页HTML内容、统计链接数量、提取Meta标签、获取图片信息、分析表单结构和流式传输页面内容，为LLM提供丰富的网页信息。
浏览器特性: 支持书签管理、访问浏览历史记录、处理下载任务、显示浏览器通知、管理剪贴板和Cookie，充分利用浏览器自身的功能。
系统集成: 能够获取系统信息、访问地理位置、监控电源/电池状态和进行屏幕截图，实现更深层次的系统交互。

安装步骤

环境准备:
- 安装 Python 3.12 或更高版本。
- 安装 Google Chrome 浏览器，并按照后续步骤安装 Chrome 扩展程序。
- 推荐使用 'uv' (Python 包管理器) 或 Docker 进行安装。
安装服务器:
- 通过 Smithery (推荐，Claude Desktop 用户): 如果您使用 Claude Desktop，可以通过 Smithery 自动安装：
```
npx -y @smithery/cli install @dlwjdtn535/mcp-chrome-integration --client claude
```
- 手动安装 (uv 或 Docker): 请参考仓库 README.md 中的详细安装指南，根据您的操作系统选择 'uv' 或 Docker 安装方式。
安装 Chrome 扩展程序:
- 前往 'mcp-client' 目录。
- 在 Chrome 浏览器中打开 'chrome://extensions/'。
- 启用右上角的 "开发者模式"。
- 点击左上角的 "加载已解压的扩展程序"。
- 选择 'mcp-client' 目录。
- 安装完成后，Chrome 工具栏会出现 MCP 扩展程序的图标。
配置 Chrome 扩展程序:
- 点击 Chrome 工具栏的 MCP 扩展程序图标。
- 在弹出的界面中，输入 MCP 服务器的 WebSocket URL。默认情况下，如果服务器运行在本地，URL 为 'ws://localhost:8012'。
- 点击 "Connect" 按钮连接服务器。连接状态应变为 "Connected"。

服务器配置

MCP 客户端（如 Claude 或其他 LLM 应用）需要配置 MCP 服务器的启动命令和参数才能连接。以下是使用 'uv' 启动服务器的配置示例，请根据您的操作系统选择相应的配置，并将其添加到 MCP 客户端的配置文件中。

Windows 配置示例:

{
  "mcpServers": {
    "mcp-chrome-integration": {
      "command": "uv",
      "args": [
        "run",
        "--directory",
        "%LOCALAPPDATA%\\Programs\\mcp-chrome-integration\\src",
        "mcp-server"
      ],
      "env": {
        "WEBSOCKET_PORT": "8012"
      }
    }
  }
}

macOS/Linux 配置示例:

{
  "mcpServers": {
    "mcp-chrome-integration": {
      "command": "uv",
      "args": [
        "run",
        "--directory",
        "/usr/local/bin/mcp-chrome-integration/src",
        "mcp-server"
      ],
      "env": {
        "WEBSOCKET_PORT": "8012"
      }
    }
  }
}

配置参数说明:

'command': 启动服务器的命令，这里使用 'uv' 包管理器。
'args': 命令参数列表：
- '"run"': 'uv run' 命令表示运行 Python 脚本。
- '"--directory"': 指定工作目录为服务器代码所在的 'src' 目录。
- '"%LOCALAPPDATA%\Programs\mcp-chrome-integration\src"' (Windows) 或 '"/usr/local/bin/mcp-chrome-integration/src"' (macOS/Linux): 服务器代码 'src' 目录的路径，需要根据实际安装路径调整。
- '"mcp-server"': 指定运行 'src' 目录下的 'mcp-server' 脚本 (实际上会执行 'src/server.py')。
'env': 环境变量设置：
- '"WEBSOCKET_PORT": "8012"': 设置 WebSocket 服务器监听端口为 '8012'。确保 Chrome 扩展程序也配置为连接到相同的端口。

基本使用方法

启动 MCP 服务器: 按照仓库 README 中的服务器启动步骤，启动 'mcp-server'。确保服务器成功运行并监听在配置的 WebSocket 端口 (默认为 8012)。
连接 Chrome 扩展程序: 确保 Chrome 扩展程序已安装并连接到运行中的 MCP 服务器。扩展程序状态应显示 "Connected"。

在 LLM 应用中使用工具: 在支持 MCP 协议的 LLM 应用 (如 Claude) 中，可以使用以下格式调用服务器提供的工具函数，实现浏览器自动化操作：

# 导航到指定 URL
tool_navigate_to(url="https://example.com", tab_id="your_tab_id")

# 点击网页元素
tool_click_element(selector="#submit-button", tab_id="your_tab_id")

# 在输入框中输入文本
tool_type_text(selector="#search", text="query", tab_id="your_tab_id")

# 获取页面状态
tool_state(tab_id="your_tab_id")

# 执行 JavaScript 代码
tool_execute_script(script="console.log('Hello')", tab_id="your_tab_id")

# 提取表格数据
tool_extract_table(selector=".data-table", tab_id="your_tab_id")

# 获取元素信息
tool_get_element_info(selector=".my-element", tab_id="your_tab_id")

请参考仓库 README 中的 "Usage Examples" 和服务器代码 ('mcp-server/src/server.py') 中 '@mcp.tool()' 注解定义的工具函数，了解更多可用的工具和参数。

标签页管理: 所有操作都需要 'tab_id' 参数来指定目标标签页。可以使用 'tool_tab_list()' 工具函数获取当前连接的标签页列表。

重要提示:

请务必阅读仓库 README.md 中的 "Important Notes" 和 "Troubleshooting" 部分，了解 Chrome 安全限制、标签页管理和错误处理等重要信息。
确保 Chrome 扩展程序已正确安装并连接到 MCP 服务器。
根据实际需求和网页结构，调整 CSS 选择器 (selector) 和其他参数。

关键词

项目简介

主要功能点

安装步骤

服务器配置

基本使用方法

信息