做网站上面的图标wordpress幻灯片修改
你是否曾经希望AI不仅能回答你的问题，还能直接操作浏览器，帮你自动填写表单、抓取数据，甚至点击页面按钮？现在，借助 Dify 和 Chrome MCP 的配合，只需短短几分钟，你就能搭建出一个真正可以“动手”操作网页的AI助手。
这篇文章将一步步带你完成在本地部署 Dify 并配置 Chrome MCP 服务器的全过程，轻松打造一个属于你自己的网页自动化智能助手。
准备工作：确保你的环境就绪
在开始前，请确保你的系统已安装：
-
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:9999
Chrome browser launched and connected successfully
第三步：在Dify中配置Chrome MCP（1分钟）
现在回到Dify管理界面，进行关键配置：
-
进入设置 > 模型供应商 > MCP服务器
-
点击添加MCP服务器
-
填写配置信息：
-
服务器名称: Chrome-Automation
-
服务器URL: http://localhost:9999
-
-
点击验证并保存，看到绿色成功提示
效果验证：让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（大语言模型）：作为大脑，理解你的意图并规划操作流程
常见问题排查
-
Chrome无法启动：确保系统已安装Chrome浏览器，或者指定Chrome路径：
CHROME_PATH=/path/to/chrome server-chrome -
连接失败：检查Dify和Chrome MCP服务器是否在同一个网络环境下，防火墙是否允许9999端口通信
-
操作超时：复杂网页加载需要时间，可以增加超时设置：
server-chrome --timeout=60000 -
权限问题：在MacOS/Linux上可能需要权限：
sudo npm install -g @modelcontextprotocol/server-chrome
进阶使用技巧
掌握了基础用法后，你还可以尝试这些高级功能：
-
多页面管理：同时控制多个浏览器标签页，完成更复杂的任务
-
用户身份保存：让AI记住登录状态，下次直接操作无需重新登录
-
定时任务：结合Dify的工作流功能，设置定时自动化任务
-
异常处理：教会AI识别操作失败的情况并自动尝试替代方案
总结：你现在拥有了什么？
通过这个3分钟搭建的系统，你获得了一个能够：
-
✅ 用自然语言指挥的网页自动化助手
-
✅ 自动完成重复性的网页操作任务
-
✅ 抓取和分析网页数据的智能代理
-
✅ 7×24小时待命的数字员工
无论是自动填表、数据监控、内容抓取还是网页测试，这个Dify+Chrome MCP组合都能帮你自动化完成。最重要的是，这一切都不需要你编写复杂的代码——只需要用自然语言告诉AI你想要做什么。
现在就开始你的网页自动化之旅吧！
推荐阅读
精选技术干货
精选文章
- 小白必看：AI智能体零基础搭建全攻略！
- AI 测试平台新功能揭秘：自动化测试用例运行的奥秘
- 从零开始打造AI测试平台：文档解析与知识库构建详解
- MCP、LLM与Agent：企业AI实施的新基建设计方案
- 2025大语言模型部署实战指南：从个人开发到企业落地全栈解决方案
- 10分钟无痛部署！字节Coze开源版喂饭教程
- 一文搞定 AI 智能体架构设计的10大核心技术
- Agent的深度解析：从原理到实践
技术平台与工具
自研工具与开放资源
-
爱测智能化测试平台
-
ceshiren.com 技术社区
-
开源工具 AppCrawler
-
AI测试助手霍格沃兹测试开发学社
-
开源工具Hogwarts-Browser-Use
人工智能测试开发学习专区
-
人工智能/AI/为什么测试工程师需要掌握AI
-
人工智能在音频、视觉、多模态领域的应用
-
从0到1打造AI工作流：测试用例/测试架构图/测试报告/简历/PPT全自动生成
-
视觉识别在自动化测试中的应用-UI测试与游戏测试
-
人工智能产品测试：从理论到实战
-
AI驱动的全栈测试自动化与智能体开发
-
大语言模型应用开发框架 LangChain