Page-Agent/MCP 架构，用"在 CSDN 发布一篇 AI 博客"这个任务，走一遍完整流程，看看每一层具体在干什么。
🎯 你的完整指令
你在 Claude 里输入：
"在 CSDN 发布一篇博客，标题《AI 自动化测试实战》，内容（略），标签为 AI, 测试"
🚀 全链路执行流程（外卖版）
第 1 步：你下单（Claude → MCP Server）
• 你：在 Claude 对话框输入指令。
• Claude：识别出你要用 MCP 工具，生成工具调用：
{
"tool": "execute_task",
"params": {
"task": "在 CSDN 发布一篇博客，标题《AI 自动化测试实战》，内容（略），标签为 AI, 测试"
}
}
• 怎么发：Claude 通过 stdio 管道 把这串 JSON 发给 @page-agent/mcp 服务器。
第 2 步：平台接单（MCP Server 启动）
@page-agent/mcp 服务器收到指令后，做了三件事：
-
开热线：启动 WebSocket 服务（默认端口 38401），就像美团开了个调度热线。
-
叫骑手：自动打开浏览器，访问 http://localhost:38401（Launcher Page）。
-
骑手上线：
◦ Launcher Page 触发浏览器扩展，打开一个 Hub Tab（扩展页面，URL 是 hub.html?ws=38401）。
◦ Hub Tab 立即拨通热线，和 MCP Server 建立 WebSocket 长连接。
此刻的状态：
你（顾客） → Claude（App） → MCP Server（平台） ↔️ WebSocket热线 ↔️ Hub Tab（骑手）
骑手已上线，等待接单。
第 3 步：任务下发（平台 → 骑手）
• MCP Server：通过 WebSocket 把任务原文发给 Hub Tab。
• Hub Tab：收到任务文本，它自己不会执行，而是调用：
useAgent("在CSDN发布一篇博客，标题...")
• 关键：useAgent 是扩展注入到网页的桥梁，它会启动 MultiPage Agent（厨师）。
第 4 步：厨师接单干活（Hub → MultiPage Agent）
MultiPage Agent 被唤醒，开始执行原子操作：
// 1. 打开CSDN
await agent.navigate("https://www.csdn.net");
// 2. 如果未登录，先登录
if (当前页面是登录页) {
await agent.click("登录按钮");
await agent.fill("#username", "你的账号");
await agent.fill("#password", "你的密码");
await agent.click("确认登录");
}
// 3. 进入写博客页面
await agent.click("写博客按钮");
await agent.waitForSelector(".editor-container");
// 4. 填写内容
await agent.fill(".title-input", "AI 自动化测试实战");
await agent.fill(".markdown-body", "这里是博客正文...");
await agent.fill(".tag-input", "AI,测试");
await agent.click("添加标签");
// 5. 发布
await agent.click("发布按钮");
await agent.waitForSelector(".publish-success"); // 等待成功提示
注意：这些操作是串行的，每一步都要等上一步完成，Agent 会智能等待页面加载。
第 5 步：结果回传（Agent → Hub → MCP → 你）
-
Agent 执行完成后，将结果（成功/失败、截图、最终URL）传给 Hub。
-
Hub 通过 WebSocket 将结果发回 MCP Server。
-
MCP Server 将结果通过 stdio 返回给 Claude。
-
Claude 解析结果，告诉你最终状态：
✅ 博客发布成功！
已自动截图保存发布成功页面。
🧩 各层职责清晰版
组件 在本任务中的具体工作 类比
你 说出"在 CSDN 发布一篇博客..." 顾客点餐
Claude 翻译成 execute_task JSON 指令 美团App下单
MCP Server 启动服务，连接 Hub，转发任务 美团平台接单
Launcher Page 触发打开扩展页面 平台呼叫骑手
Hub Tab 连接 WS，调用 useAgent 启动厨师 骑手接单，进餐厅
MultiPage Agent 实际操作浏览器：点击、输入、导航 厨师炒菜
浏览器页面 CSDN 网站本身，提供操作界面 厨房和灶具
💡 为什么这么绕？------ 设计意图
-
安全隔离：MultiPage Agent 在网页沙箱中运行，无法直接访问你的文件系统，Hub 作为中间人，确保外部指令被安全过滤。
-
稳定性：即使页面崩溃，Hub 和 MCP 连接还在，可以重试。
-
可扩展：一个 Hub 可以管理多个 Agent（多标签页同时操作）。
-
人机协同：你可以在 Hub 里看到实时操作，必要时人工干预。
🔁 全链路图（简洁版）
你 → Claude → stdio → MCP Server
↕ (WebSocket 38401)
Hub Tab (扩展)
↓ (useAgent)
MultiPage Agent
↓ (DOM操作)
CSDN 网页
↓ (结果)
Agent → Hub → MCP → Claude → 你
整个过程就像：
你告诉美团要一份宫保鸡丁（博客）→ 平台叫骑手 → 骑手到餐厅 → 厨师炒菜 → 骑手取餐送回 → 你收到饭。