web-content-fetcher

Web 内容抓取器

用于抓取和解析 Web 内容、处理大小限制、应对 JavaScript 渲染的网站，以及从 HTML 中提取干净文章内容的专业知识。

概述

此技能提供了在 Claude Code 中抓取 Web 内容的实战验证策略，解决以下关键挑战：

1. WebFetch 工具限制：内容大小上限约为 50KB
2. Read 工具限制：每次调用的文件大小上限为 256KB
3. JavaScript 渲染的内容：Twitter/X、React SPA 需要特殊处理

四层方案：

• 第 1 层：使用 WebFetch 抓取小型内容（< 50KB）
• 第 2 层：使用 curl + Task Agent 抓取任意大小的静态内容 ⭐ 默认
• 第 3 层：使用脚本处理边缘情况（EUC-JP 编码、复杂 HTML）
• 第 4 层：使用 Playwright 抓取 JavaScript 渲染的网站（Twitter/X、React SPA）

工具限制速查

工具	大小上限	最适用于	限制
WebFetch	约 50KB	短篇文章、首次尝试	提示词长度限制
Read	256KB	读取已抓取的文件	大文件需要分页
curl	无限	任意大小的内容、原始下载	不解析内容
Task Agent	无限	从任意大小的 HTML 中提取内容	自动处理分页

分层抓取策略

第 1 层：小型内容 - 直接使用 WebFetch

适用场景：简单文章、API 响应、首次尝试抓取未知内容

快速示例：

WebFetch tool with url and extraction prompt

如果失败：出现“提示词过长”错误 → 切换到第 2 层

第 2 层：任意大小的内容 - curl + Task Agent ⭐ 推荐

适用场景：新闻文章、博客文章、WebFetch 失败、任意大小的内容

快速工作流：

# 1. Create directory
mkdir -p output/tasks/YYYYMMDD_taskname/original

# 2. Fetch HTML
curl -s "URL" > output/tasks/YYYYMMDD_taskname/original/raw_html.html

# 3. Extract with Task agent
# Prompt: "Read HTML at [path], extract article content, save to fetched_content.md"

默认选择的原因：可处理任意大小的内容、由 AI 驱动的提取，无需设置脚本。

详细工作流：参见 references/workflows.md

第 3 层：基于脚本的提取 - 仅用于边缘情况

适用场景：Task Agent 难以处理复杂 HTML 或特殊编码要求（EUC-JP）

可用脚本：

• scripts/extract_article.js - 使用 Mozilla Readability 处理标准 HTML
• scripts/extract_eucjp.js - 处理采用日文 EUC-JP 编码的网站（4gamer.net）

快速示例：

node .claude/skills/web-content-fetcher/scripts/extract_article.js raw_html.html > fetched_content.md

注意：先尝试使用 Task Agent（第 2 层）。只有在 Task Agent 明确失败时才使用脚本。

脚本详情：参见 references/advanced-fetching.md

第 4 层：JavaScript 渲染的内容 - Playwright

适用场景：Twitter/X、React SPA、动态网站、静态抓取返回空内容或错误

快速示例：

node .claude/skills/web-content-fetcher/scripts/fetch_js_content.js \
  "https://x.com/user/status/123456789" \
  --output fetched_content.md

常见网站：Twitter/X、Threads、Instagram、React/Vue/Angular SPA、AJAX 加载的内容

图像提取：

• 如果存在图像，则自动提取（Twitter/X、Threads、博客等）
• 从主要内容区域提取图像 URL 和替代文本
• 自动过滤小图像（图标/徽标）
• 输出包含结构化的“媒体”部分，其中提供可用于下载的 URL

所需设置（一次性）：

cd .claude/skills/web-content-fetcher
pnpm add -D playwright --save-catalog-name=dev
pnpm exec playwright install chromium

Playwright 详情：参见 references/advanced-fetching.md

决策树

使用此流程图选择合适的方案：

Need to fetch web content?
│
├─ JavaScript-rendered site (Twitter/X, React SPA, dynamic content)?
│  └─ Use Playwright script (Tier 4)
│     └─ See: references/advanced-fetching.md
│
├─ Size unknown or small expected content?
│  └─ Try WebFetch (Tier 1)
│     ├─ Success? → Done ✓
│     └─ "Prompt too long" error? → Use Tier 2
│
├─ Any other case (medium/large content, WebFetch failed)?
│  └─ Use curl + Task agent (Tier 2) ⭐ DEFAULT
│     ├─ Success? → Done ✓
│     └─ Task agent struggles? → Use Tier 3
│        └─ See: references/advanced-fetching.md
│
└─ Edge cases (Task agent fails, special encoding)?
   └─ Use curl + script (Tier 3)
      └─ See: references/advanced-fetching.md

标准工作流速查

最常见的模式（适用于 90% 的情况）：

# 1. Setup
mkdir -p output/tasks/20260111_taskname/original

# 2. Fetch
curl -s "URL" > output/tasks/20260111_taskname/original/raw_html.html

# 3. Extract (Task agent prompt)
"Read HTML file at [path], extract main article content,
remove navigation/ads/sidebars/comments/footer,
save clean markdown to: [path]/fetched_content.md"

# 4. Use
Read: output/tasks/20260111_taskname/original/fetched_content.md

详细工作流和模式：参见 references/workflows.md

常见用例

带图片的翻译：

1. 获取内容（对于 JavaScript 网站，使用 Tier 2 或 Tier 4）
2. 以易读格式提取到 original/fetched_content.md（包含带图片 URL 的 Media 部分）
3. 使用 Media 部分中的 URL 下载图片
4. 传递给 /translate 命令

分析：

1. 获取内容（Tier 2 或 Tier 4）
2. 以易读格式提取到 original/fetched_content.md
3. 阅读并分析

社交媒体帖子（Twitter/X、Threads、Instagram）：

1. 直接使用 Playwright（Tier 4）
2. 自动提取文本、图片和元数据
3. 以易读格式输出到包含 Media 部分的 fetched_content.md
4. 从提取出的 URL 下载图片
5. 用于翻译/分析

所有模式的详情：请参阅 references/workflows.md

出现问题时

常见问题和快速修复方法：

问题	快速修复方法	详情
WebFetch「Prompt too long」	切换到 Tier 2	troubleshooting.md
Read 工具读取的文件过大	使用 Task Agent	troubleshooting.md
日文文本乱码	EUC-JP 编码问题	troubleshooting.md
需要 JavaScript	使用 Playwright（Tier 4）	troubleshooting.md
反机器人保护	添加 user agent	troubleshooting.md
需要身份验证	使用带有标头/ Cookie 的 curl	troubleshooting.md

完整故障排查指南：请参阅 references/troubleshooting.md

最佳实践

1. 始终使用任务目录：output/tasks/YYYYMMDD_taskname/
2. 默认使用 Tier 2：curl + Task Agent 适用于几乎所有情况
3. 保留原始 HTML：保存到 original/raw_html.html 以供参考（Tier 4 除外）
4. JS 网站使用 Playwright：Twitter/X、React SPA、动态内容
5. 保持内容格式整洁：始终将提取的内容保存为 Markdown
6. 使用描述性命名：使用日期前缀（YYYYMMDD_）和描述性任务名称
7. 先尝试简单方法：WebFetch → curl + Task Agent → 脚本（仅在需要时）
8. 使用 Task Agent 提取内容：让 AI 处理分页和解析的复杂逻辑

参考文件

本技能使用渐进式披露以提高效率。核心信息在此文件中，详细指南位于参考文件中：

• references/workflows.md - 标准工作流、常见模式、目录结构、内容提取优先级
• references/advanced-fetching.md - Tier 3 基于脚本的提取、Tier 4 Playwright 详情、设置说明
• references/troubleshooting.md - 常见问题、解决方案、快速参考命令

需要特定场景的详细指导时，请阅读参考文件。

快速入门示例

简单文章：

mkdir -p output/tasks/20260111_article/original
curl -s "https://example.com/article" > output/tasks/20260111_article/original/raw_html.html
# Task agent: Extract to fetched_content.md

Twitter/X 帖子：

mkdir -p output/tasks/20260111_twitter/original
node .claude/skills/web-content-fetcher/scripts/fetch_js_content.js \
  "https://x.com/user/status/123" \
  --output output/tasks/20260111_twitter/original/fetched_content.md

Threads 帖子：

mkdir -p output/tasks/20260111_threads/original
node .claude/skills/web-content-fetcher/scripts/fetch_js_content.js \
  "https://www.threads.com/@user/post/ABC123" \
  --output output/tasks/20260111_threads/original/fetched_content.md

带图片的输出格式（适用于所有网站）：

# Title

Main content text here...

### Media

1. Image description or alt text
   - URL: https://example.com/image1.jpg
2. Another image
   - URL: https://example.com/image2.jpg

注意：

• 自动从主要内容区域提取图片
• 小图片（< 100x100px），如图标/徽标，会被过滤掉
• 图片格式：.jpg、.png、.webp、.gif、.svg——URL 中均会保留
• 下载时，请保留原始文件扩展名

日文网站（可能存在编码问题）：

mkdir -p output/tasks/20260111_japanese/original
curl -s "https://4gamer.net/..." > output/tasks/20260111_japanese/original/raw_html.html
# Task agent with encoding detection, or use extract_eucjp.js if needed