信息提取与结构化输出
浏览器 MCP 的核心价值之一是将网页上的非结构化信息转换为结构化数据。本节讲解如何设计高质量的信息提取工作流，以及如何确保输出格式的一致性。
信息提取的两种路径
graph TD
A[网页信息] --> B{内容类型}
B -- "文本主导
（新闻、文档、列表）" --> C["browser_snapshot
获取可访问性树"] B -- "视觉主导
（表格、图表、复杂布局）" --> D["browser_take_screenshot
视觉理解"] C --> E["Claude 直接解析文本结构
速度快、成本低"] D --> F["Claude 视觉识别
适合无法用文本解析的内容"] E --> G[输出结构化数据] F --> G style C fill:#27AE60,color:#fff style D fill:#4A90D9,color:#fff
（新闻、文档、列表）" --> C["browser_snapshot
获取可访问性树"] B -- "视觉主导
（表格、图表、复杂布局）" --> D["browser_take_screenshot
视觉理解"] C --> E["Claude 直接解析文本结构
速度快、成本低"] D --> F["Claude 视觉识别
适合无法用文本解析的内容"] E --> G[输出结构化数据] F --> G style C fill:#27AE60,color:#fff style D fill:#4A90D9,color:#fff
优先选择 snapshot：browser_snapshot() 返回的是页面的可访问性树（类似简化的 HTML），Claude 可以精确解析文本、链接、表格，无需视觉推理，更快更准。
截图的适用场景：需要验证页面视觉效果、提取图表数据、或页面结构无法通过文本描述。
高质量提取提示词设计
提取信息时，在提示词中明确指定输出格式，能大幅提高一致性：
模板一：提取列表数据
从这个页面提取所有产品信息。
请以 JSON 格式返回，结构如下：
{
"products": [
{
"name": "产品名称",
"price": "价格（字符串，保留原始格式如¥199）",
"rating": "评分（浮点数或null）",
"url": "详情页链接",
"in_stock": true/false
}
],
"total_count": 数量,
"page": 当前页码
}
如果某字段无法获取，设为null而不是省略。
模板二：提取文章内容
从当前页面提取文章内容，以 JSON 返回：
{
"title": "标题",
"author": "作者（无则null）",
"publish_date": "发布日期（ISO格式：2026-03-22）",
"content": "正文（Markdown格式）",
"tags": ["标签1", "标签2"],
"images": ["图片URL列表"]
}
模板三：提取表格数据
页面上有一个数据表格，请提取完整数据：
1. 先描述表格的列名
2. 以 CSV 格式输出所有行
3. 如果有多页，告诉我页数
多页分页处理
很多数据分散在多个分页中，需要循环处理：
sequenceDiagram
participant C as Claude
participant P as Playwright MCP
participant F as Filesystem MCP
C->>P: browser_navigate("第1页")
P-->>C: 页面内容
C->>C: 提取第1页数据
C->>P: browser_click("下一页")
P-->>C: 第2页加载
C->>C: 提取第2页数据
loop 直到无"下一页"按钮
C->>P: 继续翻页
end
C->>F: write_file("all_data.json", 合并数据)
分页抓取提示词：
请抓取这个列表的所有页面数据：
1. 从第1页开始
2. 提取每页的数据
3. 检查是否有"下一页"按钮
4. 如果有，点击并继续
5. 最多处理 10 页（避免无限循环）
6. 将所有页面的数据合并后输出
实战：竞品价格监控
场景：每天早上自动抓取3个竞品的价格，保存到本地数据库。
提示（每日执行）：
1. 打开以下3个产品页面，分别提取当前价格：
- https://competitor1.com/product/123
- https://competitor2.com/product/456
- https://competitor3.com/product/789
2. 提取每个页面的：产品名、当前价格、原价（划线价）、是否有促销
3. 将数据写入 ~/ai-workspace/data/price_history.db 的 price_checks 表：
INSERT INTO price_checks (date, competitor, product, price, original_price, on_sale)
VALUES (今天日期, ...)
4. 如果某个产品降价超过15%，在摘要中标注
数据清洗与规范化
从网页提取的数据通常需要清洗：
# 典型的数据问题和处理方式（可以让 Claude 执行）
# 1. 价格字符串 → 数字
"¥1,299.00" → 1299.00
"USD 45" → 45.0
"免费" → 0.0
# 2. 日期格式统一
"3天前" → 2026-03-19
"Mar 22, 2026" → 2026-03-22
# 3. 评分归一化
"4.5/5" → 4.5
"90%" → 4.5 # 5分制
# 4. 去除多余空白和转义字符
" 产品名\n " → "产品名"
在提示词中加入清洗要求：
提取价格时：
- 去掉货币符号和逗号，转换为浮点数
- 如果是"免费"或"Free"，转为0
- 无法解析的价格设为null，不要猜测
输出到多种格式
根据后续使用场景，选择最合适的输出格式：
| 使用场景 | 推荐格式 | 原因 |
|---|---|---|
| 进一步程序处理 | JSON | 结构清晰，易解析 |
| 人工查阅 | Markdown 表格 | 可读性好 |
| 导入 Excel | CSV | 兼容性最好 |
| 存入数据库 | SQL INSERT 语句 | 直接可执行 |
| 监控报警 | 自然语言摘要 | 便于理解 |
常见误区
- 误区：用截图提取表格数据。截图需要视觉识别，精度低；用
snapshot+ 文本解析准确率更高。 - 误区：提取格式没有指定时认为 AI 会自动选最优格式。明确指定格式的提取结果更稳定，减少后处理工作。
- 误区：没有处理动态内容就直接提取。SPA 页面可能在快照时尚未渲染完成，先等待加载完成。
本节执行清单
- [ ] 优先使用
browser_snapshot而非截图提取文本信息 - [ ] 在提示词中明确指定输出的 JSON 结构
- [ ] 多页数据：设置最大页数上限（如10页）防止无限循环
- [ ] 数据清洗：在提示词中指定价格、日期等字段的标准格式
下一节：反爬虫应对与稳定性处理