大模型实战 | Dify+Chrome MCP打造网页自动化AI助手

最新推荐文章于 2025-11-05 11:23:27 发布
原创 最新推荐文章于 2025-11-05 11:23:27 发布 · 1k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#chrome #人工智能 #大模型 #AI #LLM #Dify

该文章已生成可运行项目，

本文详细介绍了如何使用Dify本地部署Chrome MCP，打造网页自动化AI助手。教程涵盖环境准备、Chrome MCP安装配置到Dify集成全过程，实现网页截图、表单填写、数据抓取等功能。相比云端部署，本地方案具有数据安全、响应快、成本低等优势，适合处理敏感数据场景。文章提供实战案例和问题解答，帮助读者快速上手这一强大的网页自动化工具。

引言

还在为复杂的网页操作而烦恼？想让AI帮你自动填表、截图、抓取数据？今天教你用Dify本地部署Chrome MCP，打造一个强大的网页自动化AI助手！

无需云服务器，本地就能跑，3分钟上手，10分钟精通。从安装到实战，手把手教你搭建属于自己的网页操作机器人。

什么是本地Chrome MCP？

Chrome MCP（Model Context Protocol）是基于Google Chrome浏览器的网页自动化工具MCP实现版本。通过Chrome DevTools Protocol提供精细的浏览器控制能力。与传统云端部署不同，本地部署具有以下优势：

  • • 数据安全：所有操作在本地执行，敏感数据不上传
  • • 响应速度快：无网络延迟，操作更流畅
  • • 成本更低：无需购买云服务器
  • • 自由度高：可访问本地文件和内网资源

核心功能：

  • • 网页截图和PDF生成
  • • 表单自动填写
  • • 页面元素点击和交互
  • • 数据抓取和提取
  • • 文件上传下载

本地环境准备

系统要求

支持的操作系统：

  • • Windows 10/11
  • • macOS 10.15+
  • • Ubuntu 18.04+
  • • CentOS 7+

硬件要求：

  • • 内存：至少4GB（推荐8GB）
  • • 存储：至少2GB可用空间
  • • CPU：双核以上

必备软件安装

1. 安装Node.js

# Windows（使用Chocolatey）
choco install nodejs

# macOS（使用Homebrew）
brew install node

# Ubuntu/Debian
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

# CentOS/RHEL
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo yum install -y nodejs

2. 验证安装

node --version  # 应显示v18.0.0或更高版本
npm --version   # 应显示npm版本信息

本地部署Chrome MCP

1. 创建项目目录

# 创建项目目录
mkdir chrome-mcp-local
cd chrome-mcp-local

# 初始化npm项目
npm init -y

2. 下载Chrome扩展程序

首先下载Chrome MCP扩展程序：

# 创建扩展程序目录
mkdir chrome-extension
cd chrome-extension

# 下载最新版本的Chrome扩展程序
# 访问 https://github.com/hangwin/mcp-chrome/releases
# 下载最新的扩展程序压缩包并解压到此目录

3. 安装Chrome MCP桥接工具

需全局安装桥接包，推荐使用npm或pnpm：

npm install -g mcp-chrome-bridge
# 或
pnpm install -g mcp-chrome-bridge

安装完成后注册Native Messaging host：

# 注册Native Messaging host
mcp-chrome-bridge register

4. 安装和配置Chrome浏览器

验证Chrome浏览器安装
which google-chrome || which chromium-browser

如果上述命令返回空或提示"not found"，说明Chrome浏览器未安装，请按以下方式安装：

macOS系统：

# 使用Homebrew安装
brew install --cask google-chrome

Ubuntu/Debian系统：

# 下载并安装Chrome
wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
echo"deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" | sudotee /etc/apt/sources.list.d/google-chrome.list
sudo apt update
sudo apt install google-chrome-stable

CentOS/RHEL系统：

# 添加Chrome仓库并安装
sudo yum install -y wget
wget https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm
sudo yum localinstall google-chrome-stable_current_x86_64.rpm
加载Chrome扩展程序
    1. 打开Chrome浏览器，访问 chrome://extensions/
    1. 启用"开发者模式"
    1. 点击"加载已解压的扩展程序"
    1. 选择之前下载并解压的扩展程序文件夹
    1. 点击扩展程序图标，然后点击"连接"按钮启动MCP服务

验证Chrome MCP服务

1. 检查服务是否启动

当Chrome扩展程序连接成功后，MCP服务会在本地启动HTTP服务器（默认端口12306）：

curl http://127.0.0.1:12306/mcp
# 如果服务正常，应该返回MCP协议相关信息
# 如果显示"Could not connect to server"，说明Chrome扩展程序未连接

2. 通过API测试MCP工具列表

curl -X POST http://127.0.0.1:12306/mcp \
  -H "Content-Type: application/json" \
  -d '{"method": "tools/list"}'
常见问题排除

如果curl命令返回"Could not connect to server"错误：

    1. 检查Chrome扩展程序状态：
  • • 打开Chrome浏览器，访问 chrome://extensions/
  • • 确认Chrome MCP扩展程序已启用
  • • 点击扩展程序图标，查看连接状态
    1. 重新连接扩展程序：
  • • 点击扩展程序图标
  • • 如果显示"未连接"，点击"连接"按钮
  • • 等待几秒钟，直到显示"已连接"状态
    1. 检查Native Messaging注册：
    # 重新注册Native Messaging host
mcp-chrome-bridge register
# 注册后需要重启Chrome浏览器
    1. 验证端口状态：
    # 检查端口12306是否被占用
lsof -i :12306
# 如果没有输出，说明端口未被使用，需要启动扩展程序

Dify集成Chrome MCP

注意：如果你的Dify是通过Docker部署的，MCP地址不能填写127.0.0.1或localhost。应填写宿主机的实际IP地址，或使用Docker网络中的可访问地址（如host.docker.internal），否则Dify容器无法访问本地MCP服务。

1. 登录Dify控制台

  • • 访问你的Dify实例（本地）
  • • 进入「设置」→「工具」

2. 添加Chrome MCP工具

  • • 点击「添加工具」
  • • 选择「MCP工具」类型
  • • 填写配置信息：
{
"name":"Chrome MCP",
"description":"Chrome浏览器自动化工具，支持网页截图、表单填写、数据抓取等功能",
"connection":{
"type":"http",
"url":"http://host.docker.internal:12306/mcp"
},
"timeout":30000
}

3. 测试连接

  • • 点击「测试连接」按钮
  • • 确认显示"连接成功"状态
  • • 保存配置并启用工具

实战案例：自动化网页操作

案例1：网页截图助手

创建应用：

    1. 新建「Agent」应用
    1. 系统提示词：
你是一个网页截图专家，能够帮用户截取任何网页的截图。
当用户提供网址时，你需要：
1. 访问指定网页
2. 等待页面完全加载
3. 截取全屏截图
4. 返回截图结果

测试对话：
在这里插入图片描述

案例2：表单自动填写

应用场景：自动填写注册表单

系统提示词：

你是表单填写助手，能够根据用户提供的信息自动填写网页表单。
操作步骤：
1. 打开指定网页
2. 定位表单字段
3. 填入用户提供的信息
4. 提交表单（需用户确认）

实际操作：
在这里插入图片描述

案例3：数据抓取助手

功能描述：抓取电商网站商品信息

系统提示词：

你是数据抓取专家，能够从网页中提取结构化数据。
当用户需要抓取数据时：
1. 访问目标网页
2. 定位数据元素
3. 提取文本内容
4. 整理成结构化格式返回

抓取示例：

用户：帮我抓取京东某商品的价格和评价信息

AI：正在为您抓取商品信息...

商品名称：iPhone 15 Pro Max
当前价格：¥9999
原价：¥10999
折扣：9折
评价数量：2.5万+
好评率：98%

数据抓取完成！

高级配置与优化

Chrome扩展程序设置

1. 扩展程序选项页面配置

  • • 右键点击Chrome MCP扩展程序图标
  • • 选择"选项"或"扩展程序选项"
  • • 可配置以下设置：
  • • HTTP服务器端口（默认12306）
  • • 请求超时时间
  • • 调试模式开关
  • • 允许的域名列表

2. Chrome浏览器优化

# 启动Chrome时的推荐参数
open -a "Google Chrome" --args \
  --remote-debugging-port=9222 \
  --disable-web-security \
  --user-data-dir=/tmp/chrome-debug

性能优化建议

1. 浏览器资源管理

  • • 定期清理浏览器缓存和Cookie
  • • 关闭不必要的标签页
  • • 禁用不需要的Chrome扩展程序

2. 系统资源监控

# 监控Chrome进程资源使用
top -p $(pgrep -f "Google Chrome")

# 查看端口占用情况
lsof -i :12306

常见问题解答

Q1：Chrome MCP扩展程序无法连接怎么办？
A：首先确认扩展程序已正确加载，然后检查Native Messaging host是否已注册（运行mcp-chrome-bridge register），最后确认端口12306未被占用。

Q2：支持哪些浏览器？
A：目前仅支持Google Chrome浏览器，需要安装专用的Chrome扩展程序才能工作。

Q3：如何处理验证码？
A：Chrome MCP可以截图显示验证码，但需要人工识别输入。建议在测试环境中禁用验证码或使用测试账号。

Q4：扩展程序显示"未连接"状态怎么办？
A：检查Native Messaging host注册状态，重新运行mcp-chrome-bridge register命令，并确保Chrome浏览器已重启。

Q5：如何处理动态内容？
A：Chrome MCP支持等待策略，可以等待特定元素出现或页面加载完成后再执行操作。

Q6：可以同时控制多个Chrome窗口吗？
A：Chrome MCP扩展程序主要控制当前活动的Chrome窗口和标签页，建议一次专注处理一个任务。

总结

通过本教程，我们成功部署了Chrome MCP扩展程序，并将其集成到Dify中，实现了强大的网页自动化AI助手。Chrome MCP通过浏览器扩展程序的方式工作，提供了便捷的部署体验和稳定的控制能力。

核心优势：

  • • ✅ 5分钟快速部署
  • • ✅ 无需复杂配置文件
  • • ✅ 基于Chrome扩展程序，稳定可靠
  • • ✅ 支持丰富的网页操作功能
  • • ✅ 与Dify无缝集成
  • • ✅ 完全免费使用

部署要点回顾：

    1. 下载并加载Chrome扩展程序
    1. 安装并注册mcp-chrome-bridge
    1. 在Dify中配置HTTP连接（端口12306）
    1. 测试连接并开始使用

如何系统学习掌握AI大模型？

AI大模型作为人工智能领域的重要技术突破，正成为推动各行各业创新和转型的关键力量。抓住AI大模型的风口，掌握AI大模型的知识和技能将变得越来越重要。

学习AI大模型是一个系统的过程，需要从基础开始，逐步深入到更高级的技术。

这里给大家精心整理了一份全面的AI大模型学习资源，包括：AI大模型全套学习路线图（从入门到实战）、精品AI大模型学习书籍手册、视频教程、实战学习、面试题等，资料免费分享！

1. 成长路线图&学习规划

要学习一门新的技术，作为新手一定要先学习成长路线图，方向不对，努力白费。

这里，我们为新手和想要进一步提升的专业人士准备了一份详细的学习成长路线图和规划。可以说是最科学最系统的学习成长路线。

在这里插入图片描述

2. 大模型经典PDF书籍

书籍和学习文档资料是学习大模型过程中必不可少的，我们精选了一系列深入探讨大模型技术的书籍和学习文档，它们由领域内的顶尖专家撰写，内容全面、深入、详尽，为你学习大模型提供坚实的理论基础。（书籍含电子版PDF）

在这里插入图片描述

3. 大模型视频教程

对于很多自学或者没有基础的同学来说，书籍这些纯文字类的学习教材会觉得比较晦涩难以理解，因此，我们提供了丰富的大模型视频教程，以动态、形象的方式展示技术概念，帮助你更快、更轻松地掌握核心知识。

在这里插入图片描述

4. 大模型行业报告

行业分析主要包括对不同行业的现状、趋势、问题、机会等进行系统地调研和评估，以了解哪些行业更适合引入大模型的技术和应用，以及在哪些方面可以发挥大模型的优势。

在这里插入图片描述

5. 大模型项目实战

学以致用 ，当你的理论知识积累到一定程度，就需要通过项目实战，在实际操作中检验和巩固你所学到的知识，同时为你找工作和职业发展打下坚实的基础。

在这里插入图片描述

6. 大模型面试题

面试不仅是技术的较量，更需要充分的准备。

在你已经掌握了大模型技术之后，就需要开始准备面试，我们将提供精心整理的大模型面试题库，涵盖当前面试中可能遇到的各种技术问题，让你在面试中游刃有余。

在这里插入图片描述

全套的AI大模型学习资源已经整理打包，有需要的小伙伴可以微信扫描下方优快云官方认证二维码，免费领取【保证100%免费】

本文章已经生成可运行项目
Dify进阶：用语言控制浏览器行为
xiezhipu的博客
12-18 1816
为了降低该工具安装的难度（直接部署有可能出现汉字乱码等问题），也是直接采用了官方的镜像进行了安装。四是，把官方的API，按照request写成python代码，利用执行代码模块进行调用。打开浏览器，就是把刚才curl的东西，翻译成dify HTTP请求的格式即可！二是，把我们想要的功能封装成OpenAPI，再按照HTTP组件的形式进行调用。一是，把我们想要的功能封装成OpenAPI，再按照自定义工具，进行注册。三是，把官方的API，按照HTTP组件的形式进行调用。闲聊，就默认聊天就行。成功，浏览器打开了！
Dify进阶：使用FastAPI和Selenium构建远程浏览器控制与录屏服务
xiezhipu的博客
01-04 769
在Web开发和自动化测试领域，能够远程控制浏览器并录制其操作是非常有用的。这不仅有助于开发者调试网页应用，还能用于创建演示、教程或进行用户行为分析。本文将介绍如何使用Python的FastAPI框架和Selenium库来构建一个简单的HTTP API服务，该服务允许用户通过HTTP请求来控制浏览器打开特定网页，并录制浏览器屏幕为GIF动画。
快速搞定Dify+Chrome MCP：打造能操作网页的AI助手，大模型入门到精通，收藏这篇就足够了！
Y525698136的博客
09-15 990
本文将手把手教你如何在本地部署Dify并配置Chrome MCP服务器，打造你的私人网页自动化助手。
第 15 篇 Dify 应用发布与被集成的7种方式
甘蓝的专栏
11-05 1367
本文介绍了Dify应用的7种发布方式，重点详述了前4种：1）发布为公开Web站点，支持自部署或云托管；2）将Workflow工作流发布为工具，可配置参数并集成；3）发布为MCP服务端，实现AI工具间的标准化通信；4）嵌入业务网站的3种方法（iframe、script标签和浏览器扩展）。每种方式均配有操作指南和效果图示，帮助开发者将Dify应用与业务系统无缝整合。
Dify进阶：继续玩我们的selenium
xiezhipu的博客
12-25 1449
年底了，不知道各位大佬有没有做年终工作汇报啊？这几周以来，也是为了一个年审给忙得找不到北，咱的Agent项目进展也缓慢了下来。着实是对不起各位。我们今天继续玩我们的selenium。我们都用过像小爱同学这样的AI机器人。当我们说，“小爱同学，打开浏览器”它就会打开浏览器。我一直觉得这是一个十分有趣的功能。我们前面也说了，这玩意儿怎么实现。
AI产品经理面试想拿Offer？这100道题不仅告诉你答案，还揭秘出题人的小心思！
m0_65555479的博客
07-16 1332
本文系统梳理了AI大模型领域的100道核心问题，涵盖技术基础（25题）、产品设计（20题）、项目管理（15题）、商业化策略（15题）、伦理合规（15题）和行业洞察（10题）六大维度。重点包括：技术落地的四步风险控制法、产品设计的MoSCoW优先级框架、联邦学习在隐私合规中的应用、多模态产品的渐进式开发策略、伦理委员会的决策机制等实战方法论，并配套提供大模型学习路线图、100套商业化方案及200本专业书籍等资源包。文章强调AI产品经理需具备技术变现能力、合规意识和终局思维，通过"业务指标+模型指标+用户满意度
快速掌握Dify+Chrome MCP：打造网页操控AI助手
09-14 810
本文教你如何快速搭建一个能操作浏览器的AI助手：通过Dify和Chrome MCP结合，只需三步配置，即可实现自动填表、数据抓取和网页操控，无需编写代码，用自然语言就能指挥AI完成各类网页任务。
快速搞定 Dify+Chrome MCP：打造能操作网页的 AI 助手
jingpide9527的博客
09-18 1156
本文介绍如何结合Dify低代码平台与ChromeMCP扩展，快速构建能操作网页的AI助手。通过Dify负责任务决策和对话交互，调用ChromeMCP封装的网页操作组件（表单填写、按钮点击、数据提取），实现"对话即操作"的功能。文章详细演示了从环境搭建、组件开发到工作流配置的全流程，仅需30分钟即可完成基础功能开发，适用于电商、数据采集等自动化场景。该方案无需复杂编码，通过低代码方式解决了AI助手无法操作网页的痛点。
Dify集成Chrome MCP实现网页自动化实战
Dify与Chrome MCP的结合是当前网页自动化领域的一项前沿技术实践，其核心在于通过本地部署的方式实现安全、高效、可定制化的AI驱动网页操作。本文围绕“Dify+Chrome MCP实战”这一主题，深入剖析了从环境搭建到功能...
Dify本地部署Chrome MCP实战：3分钟搭建网页自动化AI助手
weixin_41246802的博客
09-29 999
Chrome MCP（Model Context Protocol）是基于Google Chrome浏览器的网页自动化工具MCP实现版本。通过Chrome DevTools Protocol提供精细的浏览器控制能力。与传统云端部署不同，本地部署具有以下优势：•数据安全：所有操作在本地执行，敏感数据不上传•响应速度快：无网络延迟，操作更流畅•成本更低：无需购买云服务器•自由度高：可访问本地文件和内网资源核心功能• 网页截图和PDF生成• 表单自动填写• 页面元素点击和交互• 数据抓取和提取。
Dify + MCP实战：用插件一分钟搞定MCP Server(含时间踩坑实践)
分享平时的学习心得和笔记
06-28 931
**摘要：**Dify平台通过MCP插件实现零代码AI服务部署，将复杂工作流快速转化为标准化MCP服务。文章详解从插件安装（需同时配置Server/Client插件）、服务发布（注意端口/IP配置）到外部调用的全流程，重点剖析四大实战坑点：版本兼容性、协议混淆、跨域问题及工具刷新机制，并给出具体解决方案。该方案使开发者无需编写代码即可构建可复用的AI服务生态，显著降低智能应用落地门槛。（150字）
Dify+Chrome MCP实战[项目源码]
最新发布
11-20
本文详细介绍了如何通过Dify本地部署Chrome MCP（Model Context Protocol）来打造一个强大的网页自动化AI助手。教程从环境准备开始，包括系统要求、必备软件安装（如Node.js和Chrome浏览器），到Chrome MCP的安装配置和Dify集成全过程。本地部署方案相比云端具有数据安全、响应速度快、成本低等优势，特别适合处理敏感数据场景。文章还提供了实战案例，如网页截图、表单自动填写和数据抓取，以及常见问题解答，帮助读者快速上手这一工具。通过本教程，读者可以掌握如何利用Chrome MCP实现高效的网页自动化操作，并将其与Dify无缝集成，打造个性化的AI助手。
Dify: 带知识库和实时搜索的智能体-1 经验截图
m0_74331272的博客
07-11 452
因为 TavilySearch 本质上是调用第三方 API（Tavily），而 Tavily 是一个商业化的网页检索服务，不是免费的。具体来说：Dify 是一个集成平台，它调用 Tavily 提供的搜索功能你使用 TavilySearch，相当于在调用 Tavily 的 API需要你在 Dify 插件里配置你的 Tavily API Key（如你注册 Tavily 后获得）按 Tavily 官方价格计费（有免费额度） 这条日志信息：是在警告：输入的 prompt 太长，被截断了。
【Dify系列教程重置精品版】第十一章：Dify与selenium
xiezhipu的博客
05-29 400
什么是slenium呢？加单来说：Selenium 是一个自动化操控浏览器的工具​​，能模拟真人操作网页（点击、输入、翻页等），常用于测试网站或批量抓取网页数据。上一章我们简单介绍了一下RAG，这一章我们讲一下slenium.这三个可以分别试一下，我的电脑阿里云的镜像才下载成功。OK，这章就到这里。第一步：配置slenium。我这里顺利完成配置。
Dify工具前奏：一个好玩的镜像，selenium
xiezhipu的博客
12-13 1061
Selenium 是一个用于自动化Web应用程序测试的工具集，它支持多种编程语言（如Java, C#, Python, JavaScript, Ruby等）和浏览器（如Chrome, Firefox, Safari, Edge等）。这是 Selenium 的核心组件，提供了一种通过编程语言与浏览器进行交互的方法。WebDriver 直接与浏览器通信，可以模拟用户的所有操作，例如点击、输入文本、选择下拉菜单选项等。
零代码平台通过文字描述调用Dify自动生成表
CCbleach的专栏
10-21 1867
在数字化时代，数据管理是每个企业和个人都无法回避的任务。传统的数据库管理需要专业的编程知识，这对于非技术人员来说是一个不小的挑战。幸运的是，零代码平台的出现，使得即使是没有编程背景的用户也能轻松管理数据。本文将介绍如何通过零代码平台，使用文字来生成表的增删改查（CRUD）功能。2、点击确定调用Dify配置的工作流，返回了零代码需要的json并显示。3、勾选需要的字段即可，无需重启瞬间完成CRUD。1、输入你想生成的表描述，比如：员工考勤。
dify案例分享-告别 PS！借助 Dify 实现 Gemini 2.0 Flash Exp 文字一键生图改图
个人技术
03-22 2584
基于 Gemini 2.0 Flash Experimental 大模型，实现了一个利用文字生成图片以及修改图片的工作流。我详细介绍了整个工作流的实现步骤，该工作流包含开始、问题分类器、会话变量、条件分支、LLM 大模型等部分。这个工作流功能十分强大，借助 Google 大模型实现了一键改图，达成了文字 P 图的功能，基本将 P 图的门槛降低到普通人都能学会的程度。
【Dify】智能表格自动化应用
Mr数据杨
10-05 776
本文介绍了一种基于Excel、Flask和Dify平台的智能表格自动化处理工作流。该系统通过ExcelLoader加载数据，FlaskServer构建本地API服务，DifyAPICaller调用AI能力进行分析处理，ResultExporter输出结构化结果。该方案支持客户信息分类、产品描述生成、成绩分析等多种场景，实现从数据导入到智能处理的完整自动化流程，适合业务人员快速上手应用。工作流详细说明了核心模型、节点功能和使用步骤，为初学者提供了智能数据处理的实战指南。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值