用途
scrape-webpage 用于从网页中提取内容、元数据和图片，以便进行导入或迁移。它主要面向将网页迁移到 AEM Edge Delivery Services 的场景，是页面导入流程的组成部分。
主要能力
该技能通过运行分析脚本完成以下工作：
- 设置网络拦截以捕获所有图片
- 在无头 Chromium 中加载页面
- 滚动整个页面以触发懒加载图片
- 将所有图片下载到本地（将 WebP/AVIF/SVG 转换为 PNG）
- 捕获整页截图作为视觉参考
- 提取元数据（标题、描述、Open Graph、JSON-LD、canonical）
- 修复 DOM 中的图片（background-image→img、picture 元素、srcset→src、相对路径→绝对路径、内联 SVG→img）
- 提取清理后的 HTML（移除脚本和样式）
- 将 HTML 中的图片 URL 替换为本地路径（./images/...）
- 生成文档路径（经过清理、小写、无 .html 扩展名）
- 将包含图片映射的完整分析保存到 metadata.json
使用方式
前置条件
使用前需确保：
- Node.js 可用
- 已安装 npm playwright（npm install playwright）
- 已安装 Chromium 浏览器（npx playwright install chromium）
- 已安装 Sharp 图像库（cd .claude/skills/scrape-webpage/scripts && npm install）
运行分析脚本
命令：
node .claude/skills/scrape-webpage/scripts/analyze-webpage.js "https://example.com/page" --output ./import-work
验证输出
输出文件包括：
- ./import-work/metadata.json - 包含路径和图片映射的完整分析
- ./import-work/screenshot.png - 用于布局对比的视觉参考
- ./import-work/cleaned.html - 带本地图片路径的主要内容 HTML
- ./import-work/images/ - 所有下载的图片（WebP/AVIF/SVG 转换为 PNG）
验证文件是否存在：
ls -lh ./import-work/metadata.json ./import-work/screenshot.png ./import-work/cleaned.html ls -lh ./import-work/images/ | head -5
输出 JSON 结构
{ "url": "https://example.com/page", "timestamp": "2025-01-12T10:30:00.000Z", "paths": { "documentPath": "/us/en/about", "htmlFilePath": "us/en/about.plain.html", "mdFilePath": "us/en/about.md", "dirPath": "us/en", "filename": "about" }, "screenshot": "./import-work/screenshot.png", "html": { "filePath": "./import-work/cleaned.html", "size": 45230 }, "metadata": { "title": "Page Title", "description": "Page description", "og:image": "https://example.com/image.jpg", "canonical": "https://example.com/page" }, "images": { "count": 15, "mapping": { "https://example.com/hero.jpg": "./images/a1b2c3d4e5f6.jpg", "https://example.com/logo.webp": "./images/f6e5d4c3b2a1.png" }, "stats": { "total": 15, "converted": 3, "skipped": 12, "failed": 0 } } }
关键字段：
- paths.documentPath - 用于浏览器预览 URL
- paths.htmlFilePath - 最终 HTML 文件的保存位置
- images.mapping - 原始 URL → 本地路径
- metadata - 提取的页面元数据
适用场景
在以下情况使用此技能：
- 开始页面导入并需要从源 URL 提取内容
- 需要网页分析并下载本地图片
- 需要提取元数据（Open Graph、JSON-LD 等）
调用方：page-import 技能（第 1 步）
相关技能：
- page-import - 调用此技能的编排器
- identify-page-structure - 使用此技能的输出（截图、HTML、元数据）
- generate-import-html - 使用此技能的图片映射和路径
限制与故障排除
- 浏览器未安装：npx playwright install chromium
- Sharp 未安装：cd .claude/skills/scrape-webpage/scripts && npm install
- 图片下载失败：检查 metadata.json 中的 images.stats.failed 计数；部分图片可能需要身份验证或被 CORS 阻止；失败的图片会被记录，但不会中断抓取过程
- 懒加载图片未捕获：脚本会滚动页面以触发懒加载；某些高级懒加载可能需要在 scripts/analyze-webpage.js 中自定义
下一步：将这些输出传递给 identify-page-structure 技能。