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

零代码实战：Dify+Chrome MCP 实现网页自动化 AI 助手

news 2026/5/11 10:32:36

1. 为什么你需要网页自动化AI助手？

想象一下这样的场景：每天上班第一件事就是打开十几个网页，重复填写相同的表单数据；或者作为电商运营，需要手动抓取竞品价格信息；又或者每个月末都要在OA系统里提交几十份格式雷同的报销单。这些重复性工作不仅枯燥，还容易出错。

传统AI助手只能回答"今天天气如何"这类问题，而Dify+Chrome MCP组合打造的AI助手可以直接帮你完成这些网页操作。我去年给某外贸团队部署了这个方案，原本需要3小时完成的每日数据报送工作，现在只需对着AI说句话，30秒内自动完成，准确率100%。

这个方案最大的优势是零代码。不需要写Python脚本，不用学Selenium，就像搭积木一样把功能组合起来。下面我会手把手带你实现这个"会干活"的AI助手。

2. 技术组合原理解析

2.1 核心组件分工

这套系统的精妙之处在于两个工具的完美配合：

Dify：相当于AI助手的大脑。负责理解你说的话，比如"帮我填写XX网站的注册表单"，然后拆解成具体操作步骤。它最厉害的是内置了大模型能力，能理解模糊指令。你说"订最便宜的机票"，它能自动找到价格排序功能。
Chrome MCP：相当于AI助手的手。是一个Chrome浏览器插件，专门执行具体操作。比如点击按钮、输入文字、提取数据等。我测试过，在复杂网页上它的操作准确率比人工还高。

2.2 工作流程示例

以自动填写跨境电商订单为例：

你对AI说："速卖通新订单，收货人张三，电话123456，选顺丰快递"
Dify解析出：①打开速卖通 ②填写收货信息 ③选择物流方式
Chrome MCP依次执行：
- 在姓名栏输入"张三"
- 在电话栏输入"123456"
- 点击"顺丰"单选按钮
最后AI回复你："已完成订单填写，请确认收货信息"

整个过程就像有个虚拟员工在帮你操作电脑，而且它永远不会累。

3. 30分钟快速上手教程

3.1 环境准备

先准备好这些"食材"：

Dify账号：直接官网注册，免费版足够用。建议选"团队协作"模式，方便后期管理。
Chrome浏览器：必须是Chrome！其他浏览器不支持插件开发。
代码编辑器：VSCode就行，用来修改插件配置。

安装Chrome MCP插件时有个小技巧：先开启开发者模式，然后加载已解压的扩展文件夹。我遇到过插件不生效的情况，通常是manifest.json文件格式错误导致的。

3.2 配置Dify工具

在Dify后台新建"网页操作助手"应用时，注意这几个关键设置：

系统提示词：告诉AI它的角色。建议这样写： "你是一个网页操作专家，当用户需要操作网页时，必须先确认：1.目标网址 2.要执行的操作类型 3.所需参数（如选择器）。确保每一步都经过用户确认后再执行。"
API工具配置：这里要填Chrome MCP的服务地址。本地测试用http://localhost:3000，线上环境记得换成HTTPS。

测试时常见问题是API调用失败。先用手工发送POST请求测试接口是否通畅，再用Dify调用。我一般用Postman做这个调试。

4. 开发Chrome MCP核心功能

4.1 基础组件开发

在background.js里，我们需要实现三个基础能力：

// 表单填写组件 app.post('/api/mcp/fill-form', async (req, res) => { const { tabId, fields } = req.body; await chrome.scripting.executeScript({ target: { tabId }, func: (fields) => { fields.forEach(item => { const el = document.querySelector(item.selector); if (el) el.value = item.value; }); }, args: [fields] }); res.json({ code: 200 }); });

实际项目中我发现几个优化点：