当前位置： 首页 > news >正文

AI智能体如何通过MCP协议直接操作浏览器？DrissionPage-MCP-Server实践指南

news 2026/5/10 6:11:46

1. 项目概述：当浏览器自动化遇上AI智能体

最近在折腾AI智能体（Agent）和自动化工具链的整合，发现一个挺有意思的痛点：很多AI助手，比如Claude、Cursor的AI编程伙伴，它们能理解你的指令，也能生成代码，但要让它们真正“动手”去操作一个网页，比如帮你登录后台、抓取数据、填写表单，中间总隔着一道鸿沟。你需要把生成的脚本复制出来，自己配置环境，再手动运行。这个过程不仅割裂，效率也大打折扣。

就在这个当口，我注意到了GitHub上一个名为persist-1/DrissionPage-MCP-Server的项目。这个名字乍一看有点复杂，拆解一下其实非常清晰：DrissionPage是一个强大的Python网页自动化库，而MCP指的是Model Context Protocol。这个项目的核心目标，就是搭建一座桥梁，让AI模型能够通过标准化的协议，直接、安全地调用DrissionPage的能力，从而实现对网页的“所见即所得”式操作。

简单来说，它让AI助手从“代码生成器”变成了“网页操作员”。你可以直接对AI说：“帮我去某某网站搜索最新的开源项目，把前五个项目的名称和星标数整理成表格给我。” AI就能通过这个MCP服务器，驱动浏览器完成整个操作，并将结果直接返回给你，整个过程无需你离开对话界面。

这个思路让我非常兴奋，因为它触及了AI应用落地的关键一环——工具调用（Tool Use）的易用性和标准化。我花了一些时间深入研究、部署并测试了这个项目，本文将从一个实践者的角度，为你完整拆解它的工作原理、部署细节、核心玩法以及我踩过的一些坑。无论你是想提升日常工作效率的开发者，还是对AI智能体集成感兴趣的探索者，相信都能从中获得实用的参考。

2. 核心架构与MCP协议解析

2.1 什么是Model Context Protocol (MCP)？

要理解这个项目，必须先搞懂MCP。它不是某个AI模型公司的私有物，而是一个由Anthropic主导推动的开放协议。你可以把它想象成AI世界的“USB协议”雏形。

在MCP出现之前，每个AI应用（如Claude Desktop、Cursor）如果想连接外部工具（如数据库、搜索引擎、文件系统），都需要开发者为其编写特定的插件或集成代码，这是一种“点对点”的紧耦合方式，开发成本高，且难以复用。

MCP的目标就是解决这个问题。它定义了一套标准的通信规范，包括：

  1. 工具（Tools）： 服务器向客户端（AI应用）暴露的可调用功能，每个工具都有明确的名称、描述、参数格式。
  2. 资源（Resources）： 服务器可以提供的数据源，如文件内容、数据库查询结果，客户端可以读取这些资源来丰富模型的上下文。
  3. 提示（Prompts）： 服务器可以预定义一些高质量的提示模板，供客户端直接调用。

MCP的核心工作流程是：一个MCP服务器（Server）启动后，会通过标准输入输出（stdio）或SSE（Server-Sent Events）与MCP客户端（Client，如Claude Desktop）建立连接。连接成功后，服务器会向客户端“广告”自己提供了哪些工具、资源和提示。当用户在客户端与AI对话时，AI模型可以根据对话上下文，判断是否需要调用某个工具，然后通过MCP协议向服务器发送调用请求。服务器执行相应的操作（比如操作浏览器）后，将结果返回给客户端，客户端再呈现给用户。

DrissionPage-MCP-Server就是一个实现了MCP协议的服务器，它“广告”的工具，全部是围绕DrissionPage库的网页自动化能力封装的。

2.2 DrissionPage：更优雅的浏览器自动化选择

项目另一端的关键是DrissionPage。你可能更熟悉Selenium或Playwright。DrissionPage是一个国产的Python库，它的设计理念是融合并简化浏览器自动化操作。其最大特点是同时支持WebDriver（驱动浏览器）和Requests（直接发送HTTP包）两种模式，并且可以在它们之间无缝切换。

举个例子，用Selenium登录一个网站，你需要等待页面加载、定位元素、输入内容、点击按钮，每一步都可能需要等待。而DrissionPage允许你：

  • 混合模式： 用WebDriver打开页面进行登录（解决复杂的JS验证），登录成功后，获取到Cookies，然后切换到Requests模式，用这个Cookies去请求后续的数据接口或页面。Requests模式的速度远超WebDriver，非常适合大规模数据抓取。
  • 简化的API： 它的定位语法更简洁，内置了更智能的等待策略，减少了编写冗余等待代码的麻烦。

DrissionPage-MCP-Server项目正是将DrissionPage这些强大的功能，封装成了一个个标准的MCP工具，比如open_browser,goto,ele,click,get_html等。

2.3 项目整体架构图（逻辑描述）

整个系统的数据流是这样的：

用户 (在 Claude Desktop/Cursor 中) -> 输入自然语言指令（如“查一下天气”） -> AI模型 (Claude 3.5 Sonnet) -> 识别指令需要调用“浏览器搜索”工具 -> MCP客户端 (Claude Desktop) -> 通过 stdio 调用 `DrissionPage-MCP-Server` -> 服务器执行对应 DrissionPage 操作（打开浏览器，访问百度，输入“天气”，解析结果） -> 将结果（结构化数据或文本）通过 MCP 协议返回给客户端 -> AI模型接收结果并组织成自然语言回复 -> 用户看到最终答案

这个架构的优势在于解耦和标准化。AI应用（客户端）无需关心浏览器如何驱动，只需按协议调用工具；工具服务器也无需适配每一个AI应用，只需遵循协议提供服务。这为生态的繁荣打下了基础。

3. 详细部署与配置指南

理论讲完了，我们动手把它跑起来。这里我以在本地开发环境（macOS/Linux同理）通过Claude Desktop来连接为例，给出最详细的步骤。

3.1 前置环境准备

首先，确保你的系统已经准备好：

  1. Python环境： 需要Python 3.8及以上版本。建议使用conda或venv创建独立的虚拟环境，避免包冲突。
    # 创建并激活虚拟环境 python -m venv dp-mcp-env source dp-mcp-env/bin/activate # Linux/macOS # dp-mcp-env\Scripts\activate # Windows
  2. 安装DrissionPage： 这是核心依赖。
    pip install drissionpage
  3. 浏览器驱动：DrissionPage的WebDriver模式底层依赖浏览器驱动。推荐使用Chromium内核的浏览器（Chrome/Edge）。
    • 简单方法： 使用DrissionPage自带的工具自动下载和管理驱动。
    # 在Python交互环境中运行 from DrissionPage.easy_set import set_paths # 这会自动检测你的Chrome/Edge浏览器版本，并下载对应的chromedriver到指定位置 set_paths(browser_path=None, driver_path='./') # driver_path可以指定存放目录
    • 手动方法： 你也可以从 ChromeDriver官网 或 EdgeDriver官网 下载与你的浏览器版本完全一致的驱动，并将其所在目录添加到系统PATH环境变量中。

3.2 获取与安装MCP服务器

项目代码托管在GitHub，我们可以直接克隆。

git clone https://github.com/persist-1/DrissionPage-MCP-Server.git cd DrissionPage-MCP-Server pip install -e . # 以可编辑模式安装，方便后续修改代码

安装完成后，你可以尝试直接运行服务器，测试是否安装成功：

python -m drissionpage_mcp_server

如果看到类似"DrissionPage MCP server running on stdio"的日志，说明服务器核心功能正常。

3.3 配置Claude Desktop集成

这是最关键的一步，让Claude Desktop知道这个MCP服务器的存在。

  1. 找到Claude Desktop配置目录：

    • macOS:~/Library/Application Support/Claude/claude_desktop_config.json
    • Windows:%APPDATA%\Claude\claude_desktop_config.json
    • Linux:~/.config/Claude/claude_desktop_config.json

  2. 编辑配置文件： 如果文件不存在，就创建一个。我们需要在其中添加MCP服务器的配置。

    { "mcpServers": { "drissionpage": { "command": "/绝对/路径/到/你的/dp-mcp-env/bin/python", "args": [ "-m", "drissionpage_mcp_server" ], "env": { "PYTHONPATH": "/绝对/路径/到/DrissionPage-MCP-Server" } } } }

    重要参数解释：

    • command: 这里必须填写你之前创建的虚拟环境中Python解释器的绝对路径。这是最常见的错误来源。在终端中激活虚拟环境后，执行which python(Linux/macOS) 或where python(Windows) 可以获取到。
    • args: 指定运行模块drissionpage_mcp_server。
    • env.PYTHONPATH: 确保Python能找到我们安装的drissionpage_mcp_server模块。通常如果用了-e .安装，虚拟环境的site-packages里已经有了，但指定一下更保险。

    注意： 配置文件修改后，必须完全退出并重启Claude Desktop，配置才会生效。简单的关闭窗口可能不行，需要在任务栏/程序坞中彻底退出。

  3. 验证连接： 重启Claude Desktop后，新建一个对话。如果配置成功，你通常不会看到明显的提示。但你可以通过一个简单指令测试，比如输入：“请列出你现在可以使用的工具。” Claude的回复中应该会出现一系列以drissionpage_开头的工具，例如drissionpage_open_browser、drissionpage_goto等。这表明MCP连接已建立。

3.4 可选：使用SSE模式进行调试

Stdio模式适合生产集成，但不方便看日志。项目也支持SSE（Server-Sent Events）模式，方便调试。

  1. 启动SSE服务器：
    python -m drissionpage_mcp_server.sse
    默认会在http://localhost:8070启动。
  2. 你可以使用一个独立的MCP客户端（如mcp-cli）进行连接测试，或者修改Claude Desktop配置，将command和args替换为通过curl或专用客户端连接SSE端口的命令。不过对于日常使用，stdio模式配置好后更便捷。

4. 核心工具详解与实战案例

服务器跑通了，我们来看看它到底提供了哪些“武器”，以及怎么用。所有工具都以drissionpage_为前缀。

4.1 浏览器生命周期管理工具

这是所有操作的起点和终点。

  • drissionpage_open_browser: 启动一个浏览器实例。可以指定headless=True以无头模式运行（不显示图形界面），适合后台任务。
  • drissionpage_close_browser: 关闭当前浏览器实例。务必在操作结束后调用，否则浏览器进程会一直残留。

实战技巧： 对于一次性的查询任务，你可以在对话中不显式调用open_browser，因为AI可能会在需要时自动调用。但对于一个复杂的、多步骤的会话，我建议在开始时明确让AI“打开浏览器”，在结束时让它“关闭浏览器”，这样更容易管理资源。

4.2 页面导航与内容获取工具

  • drissionpage_goto: 导航到指定URL。这是最常用的工具之一。
  • drissionpage_get_html: 获取当前页面的HTML源码。
  • drissionpage_get_markdown: 一个非常实用的工具，它尝试将当前页面的主要内容转换为Markdown格式，可读性远超HTML。
  • drissionpage_get_screenshot: 获取当前页面的截图，并以base64格式返回。AI可以“看到”页面长什么样，这对于需要视觉确认的操作（如验证码、复杂布局）很有帮助。

案例：快速获取网页核心内容你可以直接对AI说：“请访问知乎首页，并将主要内容以Markdown格式总结给我。” AI会依次调用open_browser->goto->get_markdown，并将清晰的文本内容返回。

4.3 元素定位与交互工具

这是自动化操作的灵魂。DrissionPage提供了多种定位方式（CSS选择器、XPath、文本等），MCP工具主要暴露了以下两种：

  • drissionpage_ele: 根据CSS选择器定位单个元素。
  • drissionpage_eles: 根据CSS选择器定位多个元素。

定位到元素后，可以对其执行操作，这些操作通常作为ele或eles工具的后续步骤，由AI模型在内部逻辑中组合使用（虽然它们可能不作为独立工具暴露，但AI知道可以这么用）。核心操作包括：

  • .click(): 点击元素。
  • .input(‘text’): 向输入框输入文本。
  • .text: 获取元素的文本内容。
  • .attr(‘attribute_name’): 获取元素的属性值。

案例：自动化搜索与信息提取我们来完成一个经典任务：“请用浏览器打开百度，搜索‘今日天气’，然后从搜索结果中提取前三条信息的标题和链接。” AI需要执行的逻辑链是：

  1. open_browser(可能带headless=True)
  2. goto(“https://www.baidu.com”)
  3. 定位搜索框：ele(“#kw”)并.input(“今日天气”)
  4. 定位搜索按钮：ele(“#su”)并.click()
  5. 等待结果加载（DrissionPage有内置等待）。
  6. 定位所有结果标题元素：eles(“.result .t a”)或更精确的选择器。
  7. 循环前三个元素，获取每个元素的.text(标题) 和.attr(‘href’)(链接)。
  8. 将数据组织成表格或列表返回给用户。
  9. close_browser

在这个过程中，AI需要理解CSS选择器#kw和#su是百度首页的搜索输入框和按钮。这可以通过两种方式实现：一是AI本身具备一定的网页结构常识；二是在之前的对话中，你通过get_html工具获取过页面源码并让AI分析过。后者更精确。

4.4 高级功能与模式切换

  • drissionpage_execute_script: 在当前页面执行JavaScript代码。功能非常强大，可以处理那些仅靠HTML交互无法解决的复杂场景，比如滚动页面、操作Shadow DOM、获取动态计算的数据。
    • 示例： “请滚动到页面底部，直到不再加载新内容。” AI可以调用此工具执行window.scrollTo(0, document.body.scrollHeight)并配合循环检测。
  • drissionpage_switch_to_requests: 从WebDriver模式切换到Requests模式。切换后，后续的页面请求将直接使用HTTP库，速度极快，但无法执行JavaScript。
  • drissionpage_switch_to_webdriver: 从Requests模式切换回WebDriver模式。

混合模式实战案例：登录后抓取数据假设你要抓取一个需要登录的网站后台的数据列表。

  1. 用WebDriver模式 (open_browser) 打开登录页。
  2. 定位账号、密码输入框并输入，点击登录。这个过程可以处理JS加密、验证码等复杂情况。
  3. 登录成功后，获取当前的Cookies（可以通过execute_script获取document.cookie，或使用DrissionPage的内置方法）。
  4. 调用switch_to_requests，并将获取到的Cookies设置到Requests会话中。
  5. 使用Requests模式直接请求数据API接口（速度飞快），解析JSON响应。
  6. 将数据返回。

这个案例展示了如何利用DrissionPage的混合模式优势，由AI智能地决定在何时使用何种模式，平衡了兼容性与效率。

5. 常见问题、调试技巧与安全考量

在实际使用中，你肯定会遇到一些问题。以下是我总结的常见坑点和解决方案。

5.1 连接与配置问题排查表

问题现象可能原因解决方案
Claude对话中完全不提drissionpage工具1. MCP配置未生效
2. 配置文件路径或格式错误
3. Claude Desktop未重启		1. 检查配置文件路径是否正确。
2. 使用JSON验证工具检查配置文件语法。
3.彻底退出并重启Claude Desktop。
调用工具时报“Server error”或连接失败1. Python命令路径错误
2. 虚拟环境依赖缺失
3. MCP服务器脚本启动失败		1. 在终端中手动运行配置中的command和args，看能否启动服务器并看到日志。
2. 在虚拟环境中确认pip list包含drissionpage和drissionpage-mcp-server。
3. 查看Claude Desktop的日志文件（位置因系统而异），通常会有更详细的错误信息。
浏览器无法启动1. 浏览器驱动未安装或版本不匹配
2. 浏览器路径未正确设置		1. 使用set_paths()自动配置，或检查chromedriver版本是否与已安装的Chrome/Edge主版本号一致。
2. 在代码或配置中指定browser_path参数。

5.2 自动化操作中的稳定性技巧

  1. 元素定位失败： 这是最常见的问题。网页结构可能动态变化。
    • 技巧： 教导AI使用更健壮的选择器。优先使用id，其次是稳定的class。避免使用绝对XPath。可以结合多个属性，如input[name=‘username’]。
    • 技巧： 让AI在操作前先使用get_html获取当前页面结构，分析后再生成定位器，而不是依赖过时的知识。
  2. 等待与超时： AI可能在一个元素还没加载出来时就尝试操作。
    • 技巧：DrissionPage本身有智能等待。但你可以提示AI，在关键操作（如goto后、click一个会跳转的按钮后）之后，明确要求它“等待页面加载完成”或“等待某个特定元素出现”。这可以通过让AI执行一段简单的等待JS或利用ele操作自带的等待来实现。
  3. 处理弹窗和新窗口： 某些操作会触发新标签页或浏览器弹窗。
    • 技巧：DrissionPage有latest_tab和switch_to方法来管理标签页。你需要让AI在操作后检查是否有新窗口，并进行切换。一个简单的策略是，在可能触发新窗口的操作后，让AI获取所有窗口句柄并切换到最后一个。

5.3 安全与责任边界

将浏览器自动化能力开放给AI，力量巨大，风险也并存。

  • 权限控制： 目前这个MCP服务器运行在本地，权限与你当前用户相同。绝对不要将其部署到公开服务器并暴露给不可信的AI模型使用。它本质上是一个本地工具。
  • 操作范围： AI可能会执行一些具有副作用的操作，如提交表单、发送邮件、购买商品。在发出涉及“写”操作的指令（如“帮我登录”、“提交这份申请”）时，务必非常谨慎，最好先在测试环境或无痕窗口中进行。
  • 隐私数据： 避免让AI操作包含个人敏感信息（如银行、社保网站）的页面。虽然流量在本地，但指令和结果可能会被发送到AI服务提供商（如Anthropic）用于模型改进（取决于你的设置），存在隐私泄露风险。
  • 伦理与合规： 仅将工具用于合法的自动化场景，遵守目标网站的robots.txt协议，避免对他人服务器造成过大压力。

5.4 性能优化建议

  • 善用无头模式： 对于不需要视觉反馈的后台任务，始终在open_browser时设置headless=True。这能显著减少资源占用。
  • 复用浏览器会话： 在一个Claude对话会话中，AI会倾向于保持浏览器打开状态以执行连续任务。但长时间不操作可能导致浏览器僵死。对于长时间任务，可以提示AI定期执行一个轻量级操作（如获取页面标题）来保持会话活跃。
  • 及时清理： 明确告知AI任务完成后调用close_browser。养成检查系统进程的习惯，避免残留大量浏览器进程。

6. 进阶应用场景与生态展望

掌握了基础操作后，我们可以探索一些更高级的玩法，并展望一下这个模式带来的可能性。

6.1 构建专属的自动化工作流

你可以将DrissionPage-MCP-Server作为AI智能体的“手”和“眼”，结合其“脑”（推理规划能力），构建端到端的自动化流水线。

场景一：每日信息聚合与报告每天早上，对AI说：“请收集以下信息：1. GitHub Trending上Python语言的前5个项目。2. 某新闻网站科技版块的头条。3. 我关注的某个博客是否有更新。将所有信息整理成一份简洁的Markdown日报，并发送到我的邮箱。” AI需要规划多个任务，依次打开不同网站，使用get_markdown和元素定位提取信息，最后可能还要调用另一个“发送邮件”的MCP工具（如果存在）或生成邮件内容让你自己发送。

场景二：自动化测试与监控让AI扮演测试员：“请监控我们的产品官网登录页面，每隔一小时检查一次登录功能是否正常，并尝试用测试账号登录。如果登录失败或页面响应异常，立即通知我（例如，生成一条提醒消息）。” 这需要AI具备定时触发和状态判断的逻辑。

6.2 扩展MCP服务器能力

当前项目聚焦于DrissionPage的核心功能。你可以基于其代码进行扩展：

  • 添加自定义工具： 比如，封装一个drissionpage_download_file工具，专门处理文件下载和保存到指定路径。
  • 集成其他库： 在同一个MCP服务器里，除了DrissionPage，你还可以集成pandas（数据处理）、smtplib（邮件发送）、sqlalchemy（数据库操作）等，打造一个功能更全面的“AI操作系统工具箱”。
  • 增加资源提供： 让服务器可以提供“当前浏览器所有打开的标签页URL列表”作为资源，供AI决策时参考。

6.3 在其他AI客户端中的应用

虽然本文以Claude Desktop为例，但MCP协议是开放的。理论上，任何支持MCP的客户端都可以连接这个服务器。

  • Cursor： 作为AI编程IDE，Cursor已支持MCP。你可以配置它连接DrissionPage-MCP-Server，这样在编写爬虫或自动化脚本时，AI伙伴可以直接操作浏览器来帮你调试选择器、验证流程，甚至直接生成可运行的DrissionPage代码。
  • 自制客户端： 你可以使用MCP的SDK（如JavaScript/TypeScript的@modelcontextprotocol/sdk）开发自己的客户端应用，定制化程度更高。

这个项目的真正价值在于，它为我们提供了一个清晰的范本，展示了如何将任何一个成熟的Python库（或任何其他语言的能力）安全、标准地“赋能”给大语言模型。随着MCP生态的成熟，未来我们可能会看到一个丰富的“MCP应用商店”，里面有数据库操作服务器、云资源管理服务器、图形图像处理服务器等等。AI智能体将能根据任务需求，动态组合调用这些工具，真正成为数字世界里的超级助手。

从我个人的实践体验来看，persist-1/DrissionPage-MCP-Server项目的完成度已经相当高，它稳定地将一个强大的自动化库变成了AI可调用的基础能力。最大的挑战目前可能不在于工具本身，而在于如何更精准地通过自然语言指挥AI去使用这些工具。这需要我们在提示词（Prompt）中提供更清晰的上下文和约束，也需要模型本身在工具调用规划能力上持续进步。无论如何，这扇门已经打开，剩下的就是我们的想象力了。

http://www.jsqmd.com/news/787694/

相关文章：

  • 基于Claude API的智能代码生成工具设计与实现
  • slidemason：本地AI驱动的PPT生成工具，保护隐私的文档自动化方案
  • 连接组启发AI：构建高效鲁棒的稀疏注意力与自适应学习系统
  • 为本地Azure DevOps Server构建AI助手：MCP协议与48个工具实战
  • 从信托义务到AI对齐：构建可信人工智能的技术与治理框架
  • 艾尔登法环帧率解锁与视觉增强终极指南
  • 面试必问：“你调过最难的 bug 是什么？“
  • 开源软件自动化引擎OpenClaw：从原理到实战的RPA开发指南
  • Resonix-AG：实时音频动态处理库的架构、算法与工程实践
  • 四川钢板企业排行榜、四川钢板最具影响力企业 - 四川盛世钢联营销中心
  • 医疗生成式AI的伦理挑战与GREAT PLEA治理框架实践指南
  • universal-dev-mcp：让AI助手直接操作本地开发环境的MCP服务器指南
  • x-cmd技能：为AI助手注入命令行执行能力，实现自然语言驱动系统操作
  • ARMv8-A架构HCR_EL2寄存器解析与虚拟化控制
  • 四川型钢企业排行榜、四川型钢最具影响力企业 - 四川盛世钢联营销中心
  • 资源管理库resourcelib：统一加载、缓存与生命周期管理的工程实践
  • AI意识评估：从理论到工程实践的科学探索
  • Transformer架构核心原理与实战：从自注意力到多模态应用
  • 开源情绪感知交互空间：从传感器到氛围生成的软硬件实现
  • WarcraftHelper：三步解决魔兽争霸III在现代系统上的兼容性问题
  • AI 写代码比人更规范？听起来刺耳，但是真的
  • AI对话一键导出工具：Tampermonkey脚本实现跨平台知识留存
  • Flyback转换器无损缓冲电路设计与优化
  • 基于MCP协议的Grafana监控数据智能分析实践
  • SDP：基于管道抽象的数据流传输工具设计与实战
  • 告别输入法词库孤岛：深蓝词库转换如何成为你的数字习惯守护者
  • AI统一网关：构建多模型集成工具箱的设计与实践
  • Python基础篇之初识Python必看攻略
  • 开源数据集成工具meridian-intelligence：架构解析与实战指南
  • Mermaid Live Editor：5分钟从代码到专业图表的可视化革命