AI导哈

浏览器自动化协议

MCP Chrome Integration 是一个允许AI模型控制Chrome浏览器并执行网页自动化的协议，适用于网页导航、元素操作、页面分析和系统集成等多种场景。

  • by dlwjdtn535
  • Python
  • 本地部署
  • 6 星标
  • 更新于
在 GitHub 查看 dlwjdtn535/mcp-chrome-integration

使用说明

MCP Chrome集成

一种协议，使AI模型能够控制Chrome浏览器并执行网络自动化。

安装

先决条件

  • Python 3.12
  • 已安装谷歌Chrome浏览器扩展程序（websocket客户端）
  • uv（Python包安装程序）或Docker

通过Smithery安装

通过以下方式自动安装适用于Claude Desktop的Chrome浏览器自动化服务器 史密瑟里:

npx -y @smithery/cli install @dlwjdtn535/mcp-chrome-integration --client claude

配置设置

根据您的环境选择以下设置方法之一：

1.使用紫外线（推荐）

Windows安装程序：

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

macOS设置：

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

Linux设置：

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

主要特点

1.页面导航和交互

  • URL导航
  • 元素点击
  • 文本输入
  • 表格填写
  • 页面滚动
  • 表数据提取
  • JavaScript代码执行

2.元素操作

  • 获取图元信息（尺寸、样式、可见性）
  • 等待元素
  • 更改背景颜色
  • 获取页面状态和内容

3.页面分析

  • 获取HTML内容
  • 计数链接
  • 提取元标签
  • 获取图像信息
  • 形状分析
  • 页面内容流

4.浏览器功能

  • 书签管理
  • 访问浏览器历史记录
  • 处理下载
  • 显示通知
  • 剪贴板管理
  • Cookie处理

5.系统集成

  • 获取系统信息
  • 访问地理位置
  • 监控电源/电池状态
  • 拍摄屏幕截图

使用示例

# Navigate to URL
tool_navigate_to(url="https://example.com", tab_id="your_tab_id")

# Click Element
tool_click_element(selector="#submit-button", tab_id="your_tab_id")

# Type Text
tool_type_text(selector="#search", text="query", tab_id="your_tab_id")

# Check Page State
tool_state(tab_id="your_tab_id")

# Execute JavaScript
tool_execute_script(script="console.log('Hello')", tab_id="your_tab_id")

# Extract Table Data
tool_extract_table(selector=".data-table", tab_id="your_tab_id")

# Get Element Info
tool_get_element_info(selector=".my-element", tab_id="your_tab_id")

重要提示

1.Chrome安全限制

  • 不适用于chrome://URL
  • 仅适用于常规网站（http://或https://）
  • 某些网站的内容安全策略（CSP）可能会限制某些操作
  • 执行JavaScript时考虑网站的CSP

2.选项卡管理

  • 所有操作都需要tab_id
  • 使用tool_tab_list（）检查可用选项卡
  • 操作前检查选项卡状态

3.错误处理

  • 检查成功/失败状态的返回值
  • 处理等待操作的超时
  • 考虑网站加载状态

安装和设置

1.Chrome扩展程序安装和设置

  1. 准备扩展

    # Navigate to extension directory
cd mcp-client

  2. 在Chrome浏览器中安装

    • 打开Chrome浏览器
    • 进入 chrome://extensions/ 在地址栏中
    • 启用右上角的“开发人员模式”切换
    • 点击左上角的“加载解包”按钮
    • 选择 mcp-client 目录

  3. 配置扩展

    • 点击Chrome工具栏中的MCP扩展图标
    • 输入服务器URL（默认值： ws://localhost:8012)
    • 点击“连接”按钮连接到服务器
    • 连接状态应更改为“已连接”

  4. 使用扩展

    • 在连接的选项卡中自动工作
    • 对于新选项卡，单击扩展图标并连接
    • 在日志窗口中监视操作
    • 点击“断开连接”结束连接

2.服务器设置

# Navigate to server directory
cd mcp-server

# Install dependencies
pip install -r requirements.txt

# Start server
python src/server.py

扩展功能

1.弹出界面

  • 服务器URL配置
  • 连接/断开按钮
  • 当前选项卡状态
  • 日志消息查看器

2.背景特征

  • 选项卡管理
  • WebSocket连接维护
  • 自动重新连接
  • 错误恢复

3.安全功能

  • HTTPS支持
  • CSP合规性
  • 安全脚本执行
  • 权限管理

4.调试

  • 开发人员工具中的日志查看
  • 详细错误消息
  • 网络通信监控
  • 执行状态跟踪

故障排除

1.连接问题

  • 验证服务器URL
  • 检查服务器状态
  • 检查防火墙设置
  • 验证WebSocket端口（8012）的可用性

2.执行错误

  • 检查CSP限制
  • 授予所需权限
  • 查看控制台错误消息
  • 验证选项卡ID

3.性能问题

  • 监控内存使用情况
  • 断开未使用的选项卡
  • 调整状态更新频率
  • 优化大数据处理

许可证

麻省理工学院

相关 MCP