mcpField
W
webpage-reader

webpage-reader

github.com/ericgandrade生产力8544 次安装24 周前更新
代码仓库

关于 webpage-reader

webpage-reader 是用于从网页 URL 提取清晰 Markdown 内容的通用技能,适合阅读文档、文章和研究资料。它借助 Defuddle 去除导航和广告等非正文内容,并在工具不可用时提供备用抓取方式。

主要功能

  1. 01提取网页正文为 Markdown
  2. 02移除导航、广告和页面杂项
  3. 03支持正文与元数据提取
  4. 04支持多个 URL 逐个处理
  5. 05Defuddle 不可用时回退抓取

适用场景

  1. 01读取在线文档和 API 参考
  2. 02提取文章或研究论文正文
  3. 03将网页内容保存为本地 Markdown
  4. 04为研究流程整理多个网页

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/ericgandrade/claude-superskills --skill webpage-reader

安装后在 Claude Code 中输入/webpage-reader确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

README.md
evals/
evals.json
trigger-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:

  1. 确认输入是有效的 HTTP 或 HTTPS URL。如果不是 URL,请询问:“请提供以 http:// 或 https:// 开头的有效 URL。”
  2. 检查文件扩展名。按以下规则处理:
    • .md 文件 → 直接使用 WebFetch(本身已是 Markdown,无需提取)
    • .pdf、.docx、.pptx、.xlsx 文件 → 改用 docling-converter
    • .mp3、.mp4、.wav 文件 → 改用 audio-transcriber
    • .png、.jpg、.gif、.svg 文件 → 告知用户不支持提取图像内容
    • 其他所有 URL → 继续提取
  3. 如果用户提供多个 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

输出格式标志:

标志输出使用场景
--mdMarkdown所有内容的默认选择
--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,然后继续提取和总结。

评论

支持 Markdown