关于 webpage-reader
webpage-reader 是用于从网页 URL 提取清晰 Markdown 内容的通用技能,适合阅读文档、文章和研究资料。它借助 Defuddle 去除导航和广告等非正文内容,并在工具不可用时提供备用抓取方式。
主要功能
- 01提取网页正文为 Markdown
- 02移除导航、广告和页面杂项
- 03支持正文与元数据提取
- 04支持多个 URL 逐个处理
- 05Defuddle 不可用时回退抓取
适用场景
- 01读取在线文档和 API 参考
- 02提取文章或研究论文正文
- 03将网页内容保存为本地 Markdown
- 04为研究流程整理多个网页
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ ericgandrade/ claude-superskills --skill webpage-reader安装后在 Claude Code 中输入/webpage-reader确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
README.mdevals/evals.jsontrigger-eval.json详细介绍
用途
此技能可从任意网页 URL 中提取干净、易读的 Markdown,剔除导航菜单、广告、侧边栏、页脚、Cookie 横幅及所有其他非内容元素。它生成精简省 token 的输出,仅聚焦网页的有效内容。
Agent 使用标准工具抓取网页时,原始输出往往包含数百个导航链接、推广组件和模板文本,消耗 token 却毫无价值。此技能借助专为内容提取打造的工具 Defuddle 消除这些噪声,提取文章正文、文档文本或主要内容,只返回有用信息。
如果未安装 Defuddle,此技能会妥善处理:主动询问是否自动安装,或改用标准网页抓取,并明确说明输出质量和 token 用量方面的取舍。
此技能是通用技能——适用于任何项目和终端环境,不需要 Obsidian 或特定的项目结构。
适用场景
在以下情况下调用此技能:
- 用户提供 URL,并要求“阅读”“抓取”“提取”或“获取”网页内容
- 用户想分析在线文档、API 参考资料或技术指南
- 用户分享博客文章、文章或研究论文的 URL,需要获取正文内容
- 用户想将网页内容保存到本地 Markdown 文件,以便离线查阅或记录笔记
- Agent 需要在研究或写作工作流中参考外部内容
- 用户要求在阅读前清理网页或移除其中的噪声
- 用户在研究过程中提供多个 URL 进行批量处理
以下情况请勿使用此技能:
- URL 以
.md结尾——此类文件本身已是 Markdown,请直接使用 WebFetch - URL 指向 PDF、DOCX、PPTX 或二进制文件——请改用
docling-converter - 用户需要整合多个来源并附带引用的研究综述——请改用
deep-research - 用户需要与网页交互(表单、登录、依赖大量 JavaScript 的应用)
- URL 需要 Agent 无法提供的身份验证
- 用户要求总结 YouTube 视频——请改用
youtube-summarizer
工作流
步骤 1:验证输入
抓取前,检查用户提供的 URL:
- 确认输入是有效的 HTTP 或 HTTPS URL。如果不是 URL,请询问:“请提供以 http:// 或 https:// 开头的有效 URL。”
- 检查文件扩展名。按以下规则处理:
.md文件 → 直接使用 WebFetch(本身已是 Markdown,无需提取).pdf、.docx、.pptx、.xlsx文件 → 改用docling-converter.mp3、.mp4、.wav文件 → 改用audio-transcriber.png、.jpg、.gif、.svg文件 → 告知用户不支持提取图像内容- 其他所有 URL → 继续提取
- 如果用户提供多个 URL,确认数量并逐一处理。
步骤 2:检查 Defuddle 是否可用
尝试提取前,快速检查 Defuddle 是否可用:
defuddle --version
如果 Defuddle 可用,请继续步骤 3a。
如果未安装 Defuddle,请向用户提供以下选项:
“尚未安装 Defuddle。它能以显著优于标准抓取的质量,从网页中提取干净的 Markdown。现在运行
npm install -g defuddle安装吗?大约需要 10 秒。(是/否)”
- 如果用户确认:运行
npm install -g defuddle,然后继续步骤 3a。 - 如果用户拒绝:附上输出质量降低的说明,并继续步骤 3b。
步骤 3a:使用 Defuddle 提取内容(首选方式)
使用 Defuddle 提取页面内容:
# Extract and display as Markdown
defuddle parse <url> --md
# Extract and save to a file
defuddle parse <url> --md -o output-filename.md
# Extract specific metadata only
defuddle parse <url> -p title
defuddle parse <url> -p description
defuddle parse <url> -p author
defuddle parse <url> -p domain
输出格式标志:
| 标志 | 输出 | 使用场景 |
|---|---|---|
--md | Markdown | 所有内容的默认选择 |
--json | 包含 HTML 和 Markdown 的 JSON | 需要结构化元数据时 |
| (无) | HTML | 避免使用——改用 --md |
-p <name> | 单个元数据属性 | 只需要标题、作者或描述时 |
除非用户明确要求其他格式,否则始终优先使用 --md。
步骤 3b:WebFetch 备用方案(Defuddle 不可用时)
如果 Defuddle 不可用,且用户拒绝安装,请使用标准的 WebFetch 功能,并在输出前加上以下说明:
注意:未使用 Defuddle 进行抓取——输出可能包含导航元素和非正文文本,增加令牌用量。安装 Defuddle:
npm install -g defuddle,即可获得更简洁的结果。
尽力清理 WebFetch 的输出:
- 删除看起来像导航的行(仅包含链接文本的极短行)
- 删除过多的空行(将连续空行合并为最多两行)
- 返回可获得的最佳内容,并明确说明其中的局限
步骤 4:处理提取错误
如果页面返回错误或阻止请求,请提供明确的指引:
| 情况 | 回复 |
|---|---|
| 403 Forbidden | “此网站阻止自动访问。请尝试在浏览器中手动打开。” |
| 404 Not Found | “未找到页面。请确认 URL 是否正确。” |
| 超时 | 自动重试一次;如果再次失败,则报告超时 |
| 需要登录 | “此页面需要身份验证。请先登录,然后手动分享内容。” |
| 检测到付费墙 | “此内容受付费墙保护,无法自动提取。” |
| 提取结果为空 | 改用 WebFetch,并说明质量有所下降 |
| SSL 无效 | 报告 SSL 错误,并询问用户是否仍要继续 |
提取失败时,切勿捏造或编造页面内容。务必如实报告失败情况。
步骤 5:整理并交付输出
以一致的格式呈现提取的内容:
# [Page Title]
**Source:** [full URL]
**Domain:** [domain.com]
---
[Extracted Markdown content]
如果保存到文件,请确认保存结果:
“内容已保存到
[filepath]——从 [domain.com] 提取了 [word count] 个单词。”
如果用户只请求元数据(标题、作者、描述),则仅返回所请求的字段,不包含完整正文。
对于多个 URL,请用清晰的分隔线隔开每项结果,并为每个部分标注其来源 URL。
输出格式参考
Defuddle 支持多种输出模式。请根据用户需求选择正确的模式:
| 模式 | 命令标志 | 输出类型 | 适用场景 |
|---|---|---|---|
| Markdown | --md | 简洁的 .md 文本 | 阅读文章、文档、博客文章 |
| JSON | --json | 包含 html 和 markdown 字段的 JSON | 同时需要结构化元数据和正文时 |
| HTML | (无标志) | 清理后的原始 HTML | 避免使用——为便于阅读,请改用 --md |
| 元数据 | -p <name> | 单个字符串值 | 只需要标题、作者、描述或域名时 |
通过 -p 可用的元数据属性:
title— 页面标题description— 元描述author— 文章作者domain— 仅域名url— 规范 URL
除非用户明确要求其他格式,否则始终默认使用 --md。
与其他技能集成
此技能与其他技能配合使用效果良好:
- 在
deep-research之前 — 使用webpage-reader预先获取并清理将用于研究综述的单个页面 - 在
obsidian-note-builder之前 — 先提取 URL,然后将清理后的 Markdown 传递给obsidian-note-builder,以创建关联的 vault 笔记 - 在
youtube-summarizer之前 — 如果用户提供的视频页面不是 YouTube URL,则转交给youtube-summarizer - 在
deep-research之后 — 使用webpage-reader获取研究过程中发现的各个来源,以便深入阅读
串联使用技能时,始终告知用户每个步骤由哪个技能处理,以便他们了解工作流。
重要规则
绝不可:
- 使用 Defuddle 获取以
.md结尾的 URL — WebFetch 才是处理 Markdown 文件的正确方式 - 使用此技能获取二进制文件(PDF、图像、Office 文档)— 应转交给
docling-converter - 在提取失败时编造或虚构内容 — 始终如实、清楚地报告失败情况
- 在输出清理过程中删除代码块、技术内容或预格式文本 — 按原样保留所有代码围栏
- 在用户要求可读内容时返回原始 HTML — 始终使用
--md标志 - 在不告知用户质量差异的情况下,悄悄改用 WebFetch
- 在未明确告知用户无法访问的情况下,尝试访问需要身份验证的 URL
- 总结或截断提取的内容,除非用户明确要求总结
务必:
- 在决定使用哪个工具或回退方案之前,检查 URL 扩展名
- 在回退到质量较低的提取方式之前,提供安装 Defuddle 的选项
- 在输出中包含源 URL,让用户知道内容的来源
- 保留完整内容,不做总结,除非用户明确要求总结
- 清楚地报告提取错误,并为用户提供可执行的后续步骤
- 按顺序处理多个 URL,并使用各自的源 URL 清楚标注每项结果
- 确认文件保存时提供确切路径和大致字数
- 尊重用户拒绝安装 Defuddle 并改用 WebFetch 回退方案的选择,不要重复提供安装选项
使用示例
示例 1:阅读文档页面
User: Read this page for me: https://docs.anthropic.com/en/docs/about-claude/models
操作:检查 Defuddle 是否可用 → 运行 defuddle parse https://docs.anthropic.com/en/docs/about-claude/models --md → 返回 Claude 模型页面的干净 Markdown,并在顶部注明源 URL。
结果:清理后的文档 Markdown,不含导航链接、侧边栏内容或推广元素。
示例 2:将文章保存到本地文件
User: Extract this article and save it to notes/microservices.md:
https://martinfowler.com/articles/microservices.html
操作:运行 defuddle parse <url> --md -o notes/microservices.md → 确认保存。
结果:“内容已保存到 notes/microservices.md — 从 martinfowler.com 提取了 4,200 个单词。”
示例 3:仅获取页面元数据
User: What is the title and author of this page?
https://kentcdodds.com/blog/javascript-to-know-for-react
操作:运行 defuddle parse <url> -p title 和 defuddle parse <url> -p author → 仅返回这两个元数据值。
结果:清楚地呈现标题和作者,不获取完整正文内容。
示例 4:用于研究的批量提取
User: I am researching LLM evaluation frameworks. Read these three pages:
- https://docs.ragas.io/en/latest/
- https://www.trulens.org/
- https://lilianweng.github.io/posts/2023-03-15-prompt-engineering/
操作:使用 Defuddle 按顺序处理每个 URL → 返回三个带标签的 Markdown 部分。
结果:三份清理后的提取内容,每份均以源 URL 开头,可直接用于比较或总结。
示例 5:未安装 Defuddle — 提供安装选项
User: Fetch https://research.google/blog/advances-in-research/ and summarize it
操作:检查 defuddle --version → 未找到 → 提供安装选项。
响应:“尚未安装 Defuddle。现在使用 npm install -g defuddle 安装,以获得干净的 Markdown 输出吗?(是/否)”
如果用户回答是:安装并提取。如果回答否:说明质量差异后回退到 WebFetch,然后继续提取和总结。