快速搞定 Dify+Chrome MCP：打造能操作网页的 AI 助手

无需复杂代码，用自然语言让 AI 帮你自动填表、抓数据、点按钮

你是否想过让 AI 不仅能回答问题，还能直接操作浏览器帮你做事？比如自动填写网页表单、抓取特定数据、或者点击按钮？现在，通过 Dify 和 Chrome MCP 的结合，你可以在 3 分钟内搭建一个能真正"动手"操作网页的 AI 助手。

本文将手把手教你如何在本地部署 Dify 并配置 Chrome MCP 服务器，打造你的私人网页自动化助手。

测试开发全景图：人工智能测试、智能驱动、自动化、测试开发、左移右移与DevOps的持续交付

准备工作：确保你的环境就绪

在开始前，请确保你的系统已安装：

• Docker 和 Docker Compose（用于快速部署 Dify）

• Node.js 18+（用于运行 Chrome MCP 服务器）

• Git（用于克隆项目仓库）

第一步：快速部署 Dify（仅需 1 分钟）

Dify 是一个强大的 LLM 应用开发平台，我们通过 Docker 快速部署：

# 创建项目目录mkdir dify-chrome-mcp && cd dify-chrome-mcp
# 下载Docker部署配置curl -o docker-compose.yml https://raw.githubusercontent.com/langgenius/dify/main/docker/docker-compose.yml
# 启动Dify服务docker-compose up -d

等待 1 分钟左右，访问 http://localhost:80 就能看到 Dify 管理界面。首次使用需要创建账号并完成初始化设置。

第二步：安装 Chrome MCP 服务器（1 分钟）

打开新的终端窗口，安装并启动 Chrome MCP 服务器：

# 安装Chrome MCP服务器npm install -g @modelcontextprotocol/server-chrome
# 启动Chrome MCP服务（会自动打开Chrome浏览器）server-chrome

服务启动后，你会看到类似下面的输出，表示 MCP 服务器正在 9999 端口监听：

Server running on http://localhost:9999Chrome browser launched and connected successfully

第三步：在 Dify 中配置 Chrome MCP（1 分钟）

现在回到 Dify 管理界面，进行关键配置：

1. 进入设置 > 模型供应商 > MCP 服务器

2. 点击添加 MCP 服务器

3. 填写配置信息：

4. 服务器名称: Chrome-Automation

5. 服务器 URL: http://localhost:9999

6. 点击验证并保存，看到绿色成功提示

效果验证：让 AI 帮你操作网页

配置完成后，你就可以在 Dify 的 Playground 中测试你的网页自动化 AI 助手了。

试试这些实用场景：

场景 1：自动网页搜索

请打开百度首页，在搜索框中输入"最新AI技术发展"，点击搜索按钮，然后告诉我第一页的搜索结果标题。

场景 2：自动填写表单

请打开https://example.com/contact页面，在姓名栏填写"张三"，邮箱栏填写"zhangsan@email.com"，在留言区填写"咨询产品信息"，然后点击提交按钮。

场景 3：数据抓取与分析

请打开https://news.example.com/technology页面，抓取所有新闻标题和发布时间，然后分析今天最热门的技术话题是什么。

工作原理：为什么这很厉害？

这个组合的厉害之处在于分工明确：

• Dify：负责与 LLM 对话，理解你的自然语言指令，并将其分解成具体的浏览器操作步骤

• Chrome MCP 服务器：负责实际控制 Chrome 浏览器，执行具体的网页操作命令

• LLM（大语言模型）：作为大脑，理解你的意图并规划操作流程

常见问题排查

1. Chrome 无法启动：确保系统已安装 Chrome 浏览器，或者指定 Chrome 路径：CHROME_PATH=/path/to/chrome server-chrome
   

2. 连接失败：检查 Dify 和 Chrome MCP 服务器是否在同一个网络环境下，防火墙是否允许 9999 端口通信

3. 操作超时：复杂网页加载需要时间，可以增加超时设置：server-chrome --timeout=60000
   

4. 权限问题：在 MacOS/Linux 上可能需要权限：sudo npm install -g @modelcontextprotocol/server-chrome
   

进阶使用技巧

掌握了基础用法后，你还可以尝试这些高级功能：

• 多页面管理：同时控制多个浏览器标签页，完成更复杂的任务

• 用户身份保存：让 AI 记住登录状态，下次直接操作无需重新登录

• 定时任务：结合 Dify 的工作流功能，设置定时自动化任务

• 异常处理：教会 AI 识别操作失败的情况并自动尝试替代方案

总结：你现在拥有了什么？

通过这个 3 分钟搭建的系统，你获得了一个能够：

• ✅ 用自然语言指挥的网页自动化助手

• ✅ 自动完成重复性的网页操作任务

• ✅ 抓取和分析网页数据的智能代理

• ✅ 7×24 小时待命的数字员工

无论是自动填表、数据监控、内容抓取还是网页测试，这个 Dify+Chrome MCP 组合都能帮你自动化完成。最重要的是，这一切都不需要你编写复杂的代码——只需要用自然语言告诉 AI 你想要做什么。

现在就开始你的网页自动化之旅吧！

测试开发全景图：人工智能测试、智能驱动、自动化、测试开发、左移右移与DevOps的持续交付