用 WorkBuddy 制作 MCP：从网页抓取到浏览器控制

这是一篇从 0 到 1 的 MCP 制作教程。你会先做一个网页抓取 MCP，再了解什么时候需要浏览器控制 MCP，最后把它们接入 WorkBuddy。

一、为什么要做 MCP

WorkBuddy 本身已经能帮你写文案、整理资料、生成代码。但有些事，光靠对话不够：抓网页正文、读取页面元信息、控制已经登录的浏览器、从动态页面里提取数据。这些都需要一个能被 AI 调用的工具。

MCP 可以理解成一套工具接口。你把一个小工具做成 MCP Server，WorkBuddy 连接后，就能在对话里自动判断什么时候调用它。

只靠普通对话时

• AI 只能根据你粘贴的内容回答
• 网页正文、元信息、链接需要手动复制
• 动态页面和登录页面基本处理不了
• 每次操作都靠临时指令，难复用

接入 MCP 以后

• AI 可以调用你做好的工具
• 网页抓取、元信息提取、链接提取都能复用
• 遇到动态页面，可以走浏览器控制工具
• 以后只要说人话，WorkBuddy 自动选工具

二、整条流程怎么跑

• 说清需求
• 生成 MCP
• 安装依赖
• 写入配置
• 手动启用
• 实测场景

先把这件事想简单

你不是从零学编程，也不是手写协议。你的任务是把业务需求说清楚：要解决什么问题、做几个工具、怎么测试、最后在哪里启用。具体代码、依赖、测试脚本，让 WorkBuddy 去完成。

三、先做第一个 MCP：web-fetch

从静态网页抓取开始，最容易跑通。

第一个 MCP 不要选太复杂的方向。网页抓取比较适合入门：需求清楚、工具边界明确，也能马上用在内容运营、竞品研究、公众号文章存档里。

先让 WorkBuddy 帮你列出几个 MCP 方向，再选“网页抓取”。选定以后，让它直接生成完整项目：主程序、依赖、README、测试脚本和 WorkBuddy 配置。

正式生成前，先跑一遍方案拆解

如果这是第一次带学员做 MCP，可以先让 WorkBuddy 只拆方案，不创建文件，也不安装依赖。这样大家能先看懂工具边界、项目结构、测试方法和接入步骤，再进入正式生成。

【角色】我是一名技术运营，使用 WorkBuddy 作为日常 AI 工作搭档 【目标】制作一个日常高频使用的 MCP Server，扩展 WorkBuddy 的能力边界 【要求】 1. 请列举 5-8 个适合个人制作、日常使用频率高的 MCP 方向 2. 每个方向说明：解决什么问题、核心工具设计、技术难度（★-★★★）、适合人群 3. 优先推荐：无需复杂依赖、可本地运行、即做即用的方向 【输出格式】表格呈现，便于我对比选型

【选定方向】网页抓取 MCP 【技术栈】语言由你决定，选择生态最成熟、维护成本最低的方案 【工具设计要求】 1. fetch_url —— 抓取网页正文，智能提取（去广告/导航/脚本噪音），支持 markdown 和 text 两种输出 2. fetch_metadata —— 只提取元信息（标题/描述/作者/发布日期/站点名/语言），不返回正文 3. extract_links —— 提取页面所有链接，自动补全绝对地址，支持关键词过滤和数量限制 【工程要求】 - 使用官方 mcp SDK，遵循 MCP 协议规范 - 依赖隔离：创建独立 venv，不污染系统环境 - 编写 MCP 协议测试脚本（initialize → tools/list → tools/call 全链路验证） - 写入 ~/.workbuddy/mcp.json 配置，做完直接接入 WorkBuddy 【输出】完整的 MCP Server 项目（server.py + requirements.txt + README.md + 测试脚本）

这一节要看什么结果

• 项目目录里有可运行的 MCP Server。
• 工具至少包含抓正文、取元信息、提取链接。
• 依赖要放在独立 venv 里，不污染系统环境。
• 测试脚本能跑通 MCP 协议链路。

四、接入 WorkBuddy 并启用

配置写好不等于已经可用，最后一步要手动信任。

WorkBuddy 可以把 MCP 配置写进 ~/.workbuddy/mcp.json，但你还需要到连接器管理页里手动信任。很多 MCP “做完了但调不到”，问题都卡在这里。

• 打开 WorkBuddy，进入连接器管理页。
• 找到右上角的自定义连接器入口。
• 在列表里找到刚做好的 MCP，比如 web-fetch。
• 点击信任，返回对话查看连接状态。

【任务】抓取指定 URL 的正文内容 【URL】https://www.tencent.com/zh-cn/about.html 【输出格式】markdown 【要求】自动过滤导航栏、页脚、脚本等噪音，只保留正文

【场景】内容运营日常需要存档优质公众号文章，建立行业知识库 【任务】抓取以下公众号文章并完整存档 【URL】https://mp.weixin.qq.com/s/XXXX（替换为真实文章链接） 【存档要求】 1. 同时抓取正文（fetch_url）和元信息（fetch_metadata） 2. 元信息块放顶部：标题、作者、发布日期、原文链接、存档时间 3. 正文按逻辑补二级/三级标题，规范 Markdown 排版 4. 保存为 .md 文件，文件名格式：存档-文章标题.md 【输出】可直接归档的规范 Markdown 文件

成功标志

你说“抓取这个链接的正文”，WorkBuddy 能自动调用 fetch_url。如果它只是普通回答，没有调用工具，先回去看连接器有没有启用。

五、进阶：动态页面怎么办

web-fetch 适合公开静态页面，比如文章、新闻、博客。遇到淘宝搜索页、后台数据页、需要登录的会员页，它通常拿不到真实内容。原因很简单：这些数据由浏览器里的 JavaScript 渲染，或者必须依赖你已经登录的会话。

这时不要继续拧 web-fetch。换一条路：让 WorkBuddy 控制真实浏览器。

进阶阅读

先安装 browser-use skill，再封装成 browser-control MCP

browser-use 能连接本机已登录的 Chrome，保留 cookies 和登录态，还能打开页面、执行 JavaScript、截图。你先让 WorkBuddy 安装并检查这个 skill，再把它封装成第二个 MCP。

【场景】需要抓取淘宝商品搜索页的数据（商品名/价格/销量），但 web-fetch 静态抓取只能拿到 SEO 文案 【需求】安装一个浏览器自动化能力，能驱动真实 Chrome（保留登录态） 【要求】 1. 从 WorkBuddy 推荐市场搜索并安装 browser-use skill 2. 安装后做安全审计（检查是否有数据外泄、危险命令） 3. 创建独立 Python venv 安装 browser-use CLI 依赖 4. 验证 CLI 可正常连接本机 Chrome

六、第二个 MCP：browser-control

browser-control 负责动态页面，和 web-fetch 互补。

这个 MCP 不替代 web-fetch。静态文章仍然用 web-fetch，速度快、结构干净；动态页面才交给 browser-control。这样工具边界清楚，WorkBuddy 也更容易自动选择。

【目标】制作「浏览器控制 MCP」，封装 browser-use CLI 为 MCP 工具，接入 WorkBuddy 【与 web-fetch 的关系】互补：web-fetch 处理静态页（快），browser-control 处理动态页（强） 【工具设计要求】 1. browser_fetch —— 用真实浏览器打开 URL，等 JS 渲染完返回页面文本 - 自动分段获取（绕过 js() 4KB 返回限制） - 保留 Chrome 登录态（连接本机已登录的 Chrome） - 抓完自动关闭标签页 2. browser_eval —— 在页面执行 JavaScript 返回结果 - 适合精确提取结构化数据（商品名/价格/销量） - 可指定 URL 或在当前页面执行 3. browser_screenshot —— 对页面截图保存为 PNG - 可选全页截图或可视区域 【工程要求】 - 通过 subprocess 调用 browser-use CLI - 使用官方 mcp SDK，遵循 MCP 协议规范 - 独立 venv 隔离依赖 - 写协议层测试 + 功能测试（initialize → tools/list → tools/call 全链路）

安全边界

浏览器控制会使用你本机的登录状态。只在可信网站和明确任务里使用，不要让它执行来源不明的脚本，也不要把账号隐私数据交给不清楚的页面。

七、实战：抓淘宝商品数据

电商选品是 browser-control 的典型场景。淘宝页面是动态渲染，还经常依赖登录态。这个时候，WorkBuddy 应该判断页面类型，先用浏览器打开页面，再执行 JavaScript 提取商品标题、价格、销量，最后整理成表格。

【场景】电商选品调研，需要采集淘宝搜索页的热销商品数据 【URL】https://uland.taobao.com/sem/tbsearch?keyword=女鞋&q=女鞋&tab=all 【采集字段】产品名称、价格、销量（回头客数量） 【处理要求】 1. 判断页面类型：淘宝是 JS 动态渲染 + 登录态，web-fetch 拿不到 → 用 browser-control 2. 用 browser_fetch 打开页面（连接本机 Chrome 保留登录态） 3. 用 browser_eval 执行 JS，提取商品卡片的结构化数据 4. 销量字段解析：将"回头客10万"转为数字，按销量降序排列 5. 生成 HTML 表格：含排名、产品名称、价格、销量徽章、店铺 【输出】热销商品榜 HTML 表格，按销量降序

这一节不要只看“能不能抓到”

更重要的是看 AI 有没有做对工具选择：静态抓取拿不到，就切到 browser-control；页面打开后，再用 browser_eval 提取结构化数据。工具链跑顺了，以后换关键词、换类目都能复用。

八、完整 Prompt 集合

这一组是原教程里的精简版 Prompt，方便带走复用。下面内容保持原样，不做改写。

【Prompt 1 · 需求探索】 【角色】我是一名技术运营，使用 WorkBuddy 作为日常 AI 工作搭档 【目标】制作一个日常高频使用的 MCP Server 【要求】列举 5-8 个适合个人制作的 MCP 方向，附难度评级和选型建议 【输出】表格呈现

【Prompt 2 · 制作 web-fetch MCP】 【选定方向】网页抓取 MCP 【工具设计】fetch_url（抓正文）/ fetch_metadata（元信息）/ extract_links（提取链接） 【工程要求】官方 mcp SDK + 独立 venv + 协议测试 + 写入 mcp.json 【输出】完整 MCP Server 项目

【Prompt 3 · 公众号存档实战】 【场景】内容运营需存档优质公众号文章，建立行业知识库 【URL】https://mp.weixin.qq.com/s/XXXX 【要求】同时抓正文+元信息，元信息块放顶部，正文规范 Markdown 排版 【输出】存档-文章标题.md

【Prompt 4 · 装 browser-use】 【场景】需抓取淘宝商品数据，web-fetch 拿不到（JS动态渲染+登录态） 【需求】安装浏览器自动化能力，能驱动真实 Chrome 保留登录态 【要求】从推荐市场安装 + 安全审计 + 独立 venv + 验证连接 Chrome

【Prompt 5 · 制作 browser-control MCP】 【目标】封装 browser-use CLI 为 MCP，与 web-fetch 互补 【工具设计】browser_fetch（动态抓取）/ browser_eval（执行JS）/ browser_screenshot（截图） 【工程要求】subprocess 调用 CLI + 官方 mcp SDK + 独立 venv + 全链路测试

【Prompt 6 · 电商选品实战】 【场景】电商选品调研，采集淘宝搜索页热销商品 【URL】淘宝搜索链接 【采集字段】产品名称/价格/销量 【处理】browser_fetch 打开 → browser_eval 提取 → 销量转数字排序 → 生成 HTML 表格

九、发布前检查清单

• 第一个 MCP 是否先从静态网页抓取开始，而不是一上来做复杂动态页面？
• 生成项目后，是否已经跑过 MCP 协议测试？
• ~/.workbuddy/mcp.json 写入后，是否手动进入连接器管理页信任？
• web-fetch 和 browser-control 的边界是否讲清楚：静态页用前者，动态页用后者？
• 浏览器控制是否只用于明确、可信的任务？
• 完整 Prompt 是否仍然可以复制使用？

最后带走一句话

做 MCP 的重点不是炫技，而是把一个常用动作变成 WorkBuddy 能反复调用的工具。先做小，跑通，再扩展。