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

news/2025/9/22 14:30:01/文章来源:https://www.cnblogs.com/hogwarts/p/19105226

你是否想过让AI不仅能回答问题,还能直接操作浏览器帮你做事?比如自动填写网页表单、抓取特定数据、或者点击按钮?现在,通过Dify和Chrome MCP的结合,你可以在3分钟内搭建一个能真正"动手"操作网页的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识别操作失败的情况并自动尝试替代方案
推荐学习
Playwright自动化测试框架与AI智能体应用课程,限时免费,机会难得。扫码报名,参与直播,希望您在这场公开课中收获满满,开启智能自动化测试的新篇章!

image

总结:你现在拥有了什么?
通过这个3分钟搭建的系统,你获得了一个能够:

✅ 用自然语言指挥的网页自动化助手
✅ 自动完成重复性的网页操作任务
✅ 抓取和分析网页数据的智能代理
✅ 7×24小时待命的数字员工
无论是自动填表、数据监控、内容抓取还是网页测试,这个Dify+Chrome MCP组合都能帮你自动化完成。最重要的是,这一切都不需要你编写复杂的代码——只需要用自然语言告诉AI你想要做什么。

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/909395.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

以下内容在if判定的时候会被判定为 假

Javascript中被判定为 假 值的情况false 0 和 -0 "" 空字符串 null undefined NaN望粥汁!

Python __init__.py文件

作用在python中,存在__init__.py的文件夹被认为是包。 __init__.py文件一般用来加载包内代码依赖资源和设定包的导出行为。执行时机第一次通过"import xxx"或"from xxx import yyy"的方式, 导入包…

20250330_信安一把梭_考试篇

流量分析, 应急响应, http, ssh, icmp, ftp, telnet, 信安一把梭Tags:流量分析, 应急响应, http, ssh, icmp, ftp, telnet, 信安一把梭 0x00. 题目 某集团的路由器设备被黑客攻击了,运维工程师小辉辉正在打王者走不开…

VS Code配置Conda环境完整指南

1. 配置Anaconda PowerShell Prompt 找到Miniconda路径 [安装路径]\miniconda3\Scripts\activate.bat # 例如: D:\miniconda3\Scripts\activate.bat # 或: C:\Users\[用户名]\miniconda3\Scripts\activate.bat配置VS C…

不同Windows系统中支持的最新.Net Framework/.NET版本

在前面我写过一篇关于不同系统版本中,支持.Net Framework版本情况的文章。 https://www.cnblogs.com/zhaotianff/p/16963712.html 最近在技术群里讨论时,有涉及到Windows XP最高支持到哪个.Net Framework版本的问题。…

avalonia android TextBox多行模式下回车会关闭输入法问题

参考:https://github.com/AvaloniaUI/Avalonia/issues/19220 设置一下就行了。TextInputOptions.SetMultiline(textBox, true); TextInputOptions.SetReturnKeyType(textBox, TextInputReturnKeyType.Return);

每周读书与学习-初识JMeter 元件(二)

每周读书与学习是由清华大学出版社出版的《JMeter核心技术、性能测试与性能分析》一书的作者推出,分享作者多年的IT从业经历,希望对很多计算机科学技术IT类专业毕业生以及IT从业者有所帮助。 1、前置处理器 在Jmeter…

深入解析:【Spring 全家桶】Spring MVC 快速入门,开始web 更好上手(下篇) , 万字解析, 建议收藏 ! ! !

深入解析:【Spring 全家桶】Spring MVC 快速入门,开始web 更好上手(下篇) , 万字解析, 建议收藏 ! ! !2025-09-22 14:10 tlnshuju 阅读(0) 评论(0) 收藏 举报pre { white-space: pre !important; word-wr…

client-go限速之QPS、Burst 和 RateLimiter

QPS、Burst这两个是rest.Config里的配置,由ctrl.GetConfigOrDie()获得 QPS、Burst的默认值为: k8s.io/client-go@v0.25.0/rest/config.go1 const ( 2 DefaultQPS float32 = 5.0 3 DefaultBurst int = …

三度蝉联Gartner SASE领导者:唯一厂商的技术实力解析

帕洛阿尔托网络凭借Prisma SASE平台第三次获评Gartner SASE魔力象限领导者,该平台集成AI驱动的安全与网络能力,提供零信任访问、多云高可用架构及5倍应用性能提升,为企业提供全球规模的安全连接解决方案。2025年Gar…

水水水 || CSP-S 2025 初赛

95.5pts.初赛随便玩玩。 已严肃完成今日「You have no egg!!!」大学习。Day -1 甚至没有 Day -1.Day 0 只打 S,所以上午没事,摆摆摆。 J 填程最后一题黑题弱化版这么恐怖吗,还是个交互题。 下午出发,结果车上上来一…

python实现网站登录会话脚本 - wanghongwei

# -*- coding: utf-8 -*- import os import requests from bs4 import BeautifulSoupdef login(username, password):"""Args:username: 用户名password: 密码Returns:session: 登录后的会话对象"…

HCM 性能优化函数

HR_INITIALIZE_BUFFER 功能:为特定员工(通过参数 pernr 指定)初始化人事数据缓冲区。作用机制: 加载该员工的主数据(如组织分配、工资信息等)到内存缓冲区中,后续访问同一员工数据时直接从内存读取,避免重复查…

Nginx配置里alias和root的区别

我们用一种非常容易理解的方式来解释 alias 和 root 的区别。 核心比喻:问路 想象一下你在问路:root 就像告诉你一个「大本营」的地址alias 就像给你一个「精确的目的地」地址1. root 指令:告诉你大本营在哪里 工作…

国产DevOps生态崛起:Gitee如何赋能企业数字化转型

国产DevOps生态崛起:Gitee如何赋能企业数字化转型 在数字化转型浪潮席卷全球的当下,中国企业的IT架构正在经历前所未有的变革。根据《中国DevOps现状调查报告》最新数据显示,2022年国内企业DevOps实践率实现了显著增…

【OpenCV】10 图像滤波

作用 将一幅图像通过滤波器转换为另一幅图像。 滤波器又称为卷积核,滤波过程称为卷积。 卷积核 卷积核一般为奇数,如 3x3 5x5 7x7 为什么取奇数?增加padding 保证锚点在中间,防止图像偏移大小的影响? 在深度学习中…

基于java+springboot的社区居民诊疗健康管理系统(源代码+文档+讲解视频) - 指南

基于java+springboot的社区居民诊疗健康管理系统(源代码+文档+讲解视频) - 指南pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font…

时序数据库IoTDB的六大实用场景盘点 - 指南

时序数据库IoTDB的六大实用场景盘点 - 指南pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "…

50系GPU上安装MMCV

50系GPU上安装MMCV# env conda create --name my_env python=3.12 conda activate my_env pip install torch==2.8.0+cu129 torchvision==0.23.0+cu129 --index-url https://download.pytorch.org/whl/cu129 conda ins…

K8S的CoreDns配置文件添加域名解析

一、CoreDns的概述 负责为整个k8s集群提供 DNS 服务,属于DNS插件。基于dns的接口去实现集群内部的dns内部域名解析的一种能力。k8s集群创建后,会在kube-system名称空间下默认生成两个coredns的pod,所有pod的…