网页蒸馏室
概述
网页蒸馏室是一个高纯度的网页内容提取工具。它支持从快速 HTTP 获取到交互式浏览器爬取三种不同粒度的提取模式，能将网页中的噪音（广告、导航栏、侧边栏）滤除，只保留你真正需要的内容。
核心场景
你想把一篇博客文章保存为 Markdown？需要从某个动态页面提取数据但页面用了大量 JS 渲染？或者想为某个网站定制一套自动提取规则以后反复使用？网页蒸馏室就是帮你做这些事的。
核心功能
- 三层蒸馏模式：快速模式（纯 HTTP 请求，毫秒级）、智能模式（隐藏浏览器渲染，支持 SPA）、交互模式（可视化配方编辑），按需选择
- 智能内容清洗：6 阶段蒸馏管道自动完成去噪、提取、格式转换，结果像直接蒸馏过一样纯净
- 站点配方系统：内置 Bilibili、微信公众号、GitHub、GitLab 等高频站点的提取规则，支持用户自定义持久化配方
- 身份与 API 嗅探：管理 Cookie 身份信息，自动发现页面的 API 请求，方便逆向分析
- Agent 自动化能力：可直接被 AI 助手调用，支持
quickFetch（静态页）和smartExtract（动态页）两种 Agent 接口
快速上手
首次提取页面 5 步走
第一步：打开工具
在左侧工具列表中找到 网页蒸馏室，点击进入。默认进入 蒸馏工作台 标签页。
TODO: 截图 - 工具整体界面，标注默认的工作台、输入框和三个模式按钮
第二步：输入 URL
在顶部地址栏输入目标网页的完整 URL（例如 https://example.com/article），然后选择提取模式：
- 快速模式：⚡ 最快的选择，纯 HTTP 请求获取内容。适合静态博客、文档页面
- 智能模式：🧠 启动隐藏浏览器渲染页面，支持 JS 动态加载。适合 SPA、需要登录的页面
TODO: 截图 - 地址栏输入 URL 后，标注快速/智能模式按钮
第三步：开始蒸馏
点击 获取内容 按钮（或按回车），工具开始抓取并清洗网页。
对于快速模式，结果通常在几秒内返回。智能模式因为要启动隐藏浏览器，会稍慢一些。
TODO: 截图 - 加载过程中的进度提示
第四步：查看结果
提取完成后，左侧预览区显示清洗后的内容，右侧信息栏展示提取质量评分、字数统计、匹配配方等元数据。
TODO: 截图 - 结果展示页面，标注预览区和右侧信息面板
第五步：使用结果
结果区的操作栏提供以下功能：
| 操作 | 说明 |
|---|---|
| 发送到聊天 | 将提取内容直接发送到 AI 聊天会话，继续与 AI 对话 |
| 查看原文 | 切换到原始 HTML 源码视图，便于排查提取问题 |
| 查看元数据 | 切换展示提取到的页面元数据（标题、作者、发布日期等） |
TODO: 截图 - 结果区操作栏，标注"发送到聊天"等按钮
拖放本地文件
你还可以直接拖放本地的 .html 或 .htm 文件到工作台进行蒸馏处理——这对于调试本地页面或处理离线保存的网页非常有用。
TODO: 截图 - 拖放文件到工作台的动画示意
功能详解
工作台（蒸馏工作台）
工作台是核心操作界面，采用"左预览 + 右侧信息"的布局。
地址栏与工具栏
顶部工具栏集成了完整的操作入口：
- URL 输入框：输入目标网页地址
- 加载状态指示器：显示当前加载进度
- 模式切换：快速 / 智能两种提取模式
- 刷新按钮：使用相同模式重新提取当前 URL
- 打开交互配方：快速跳转到交互模式，对当前页面进行精细化配方编辑
TODO: 截图 - 顶部工具栏，标注各功能区域
结果预览区
展示蒸馏后的网页内容。支持两种视图切换：
- 提取结果：默认视图，展示清洗后的纯净内容
- 原始快照：切换展示原始 HTML 源码，便于诊断提取效果
信息侧栏
右侧信息面板展示了提取结果的元数据：
| 信息项 | 说明 |
|---|---|
| 提取质量 | 0-100% 的质量评分，基于内容完整度和噪音比例 |
| 提取模式 | 当前使用的蒸馏模式（fast / smart） |
| 字数 | 提取内容的字符数 |
| 格式 | 输出格式（Markdown / Text / HTML / JSON） |
| 匹配配方 | 如果有匹配的站点配方，显示配方名称 |
| 提取时间 | 内容获取的时间戳 |
拖放上传
工作台支持拖放本地 HTML 文件。将文件拖入工作台区域后，工具会自动读取并蒸馏该文件的内容。
交互配方
交互模式是网页蒸馏室的"精细化工车间"——它通过 Iframe 加载目标页面，让你像使用浏览器的开发者工具一样，直接在页面上点选元素来定制提取规则。
工作流程
第一步：加载页面
在交互工作台的地址栏输入 URL 并加载，目标页面会渲染在左侧的浏览器视口中。
TODO: 截图 - 交互模式界面，标注浏览器视口和右侧工具面板
第二步：拾取元素
点击工具栏的 🎯 拾取 按钮进入元素拾取模式。此时：
- 鼠标悬停在页面元素上时，元素会高亮显示
- 底部状态栏显示当前悬停元素的标签名、选择器和文本预览
- 点击元素即可将其加入包含（include）或排除（exclude）规则列表
TODO: 截图 - 拾取模式下的高亮效果和状态栏信息
第三步：管理提取规则
右侧 提取规则 面板展示所有已添加的规则：
- 包含规则（绿色）：指定哪些元素需要保留
- 排除规则（红色）：指定哪些元素需要移除
- 支持对规则进行删除和重新排序
TODO: 截图 - 提取规则面板，标注包含/排除规则列表
第四步：配置动作序列
有些页面需要执行一系列操作才能显示完整内容（如展开"查看更多"按钮、滚动加载等）。在 动作序列 面板中，你可以编排以下动作：
| 动作类型 | 说明 | 参数 |
|---|---|---|
click | 点击指定元素 | CSS 选择器 |
scroll | 滚动页面 | 可选：指定元素 / 距离 / 滚动到底部 |
wait | 等待指定时间或元素出现 | 毫秒数 / CSS 选择器 |
wait-idle | 等待页面空闲 | 超时时间 |
remove | 在提取前移除元素 | CSS 选择器 |
input | 向输入框填入文本 | 选择器 + 值 |
hover | 悬停到指定元素 | CSS 选择器 |
TODO: 截图 - 动作序列面板，展示已配置的动作步骤
第五步：实时预览
在编辑规则和动作的同时，实时预览 面板会立即展示当前提取结果的变化，方便你边调边看。
TODO: 截图 - 实时预览面板，展示提取效果
第六步：保存为配方
配置完成后，点击 保存配方 按钮，填写配方名称、域名信息并保存。之后访问同一域名的页面时，系统会自动匹配并使用该配方进行提取。
TODO: 截图 - 保存配方弹窗，展示名称、域名、路径模式等字段
站点配方
站点配方是持久化的提取规则集合。工具内置了针对高频站点的预置配方，你也可以创建自己的自定义配方。
内置配方
目前内置的站点配方包括：
| 站点 | 适用页面 |
|---|---|
| Bilibili | 视频详情页（/video/**） |
| 微信公众号 | 文章页（mp.weixin.qq.com/s/**） |
| GitHub | 仓库文件页（blob/**）、原始文件（raw.githubusercontent.com）、Gist |
| GitLab | 仓库文件页（-/blob/**） |
| Gitee | 原始文件（raw/**）、文件页（blob/**） |
| Pastebin | 代码片段页 |
| npm | 包详情页（/package/**） |
| PyPI | 包详情页（/project/**） |
内置配方不可删除，但可以禁用。它们会持续在后台自动匹配，只要访问的 URL 符合配方规则即可生效。
TODO: 截图 - 配方管理页面，展示内置配方和用户配方的卡片列表
配方管理
在 站点配方 标签页中，你可以：
- 浏览：通过搜索框快速筛选配方（按名称或域名）
- 编辑：点击编辑按钮跳转到交互模式修改配方规则
- 启用/禁用：切换配方的激活状态
- 删除：删除用户自定义配方（内置配方不可删除）
- 查看：点击域名快速在浏览器中打开目标网站
身份卡片（Cookie Lab）
有些网站需要登录后才能访问内容。身份卡片标签页允许你管理浏览器的 Cookie，在提取需要认证的页面时携带身份信息。
TODO: 截图 - 身份卡片界面，展示 Cookie 注入和查看功能
使用场景：
- 提取需要登录才能查看的页面内容
- 管理多个网站的认证信息
- 测试不同用户身份下的页面表现
API 嗅探
当使用智能或交互模式加载页面时，API 嗅探器会自动拦截并记录页面发起的 XMLHttpRequest 和 fetch 请求。
TODO: 截图 - API 嗅探界面，展示发现的 API 请求列表
发现的内容包括：
| 信息 | 说明 |
|---|---|
| 请求方法 | GET / POST / PUT / DELETE 等 |
| 请求 URL | 完整的 API 地址 |
| 内容类型 | 响应内容的 MIME 类型 |
| 时间戳 | 请求发生的时间 |
这对于分析页面的数据来源、逆向接口调用非常有用。你可以复制 API URL 到 API 测试工具中进一步分析。
高级用法
自定义元数据提取规则
对于某些特殊站点，默认的元数据提取（标题、作者、发布日期等）可能不够准确。站点配方支持三种元数据提取方式：
- JSON-LD：从结构化数据中提取（
<script type="application/ld+json">） - 脚本变量：从页面内嵌的 JavaScript 变量中提取（如 Bilibili 的
__INITIAL_STATE__） - Meta 标签：从 HTML
<meta>标签中提取
在配方编辑器中，你可以为每个站点自定义这些规则，支持多字段映射和值回退。
纯净模式
在快速或智能提取时，可以开启 纯净模式 来过滤掉所有超链接，只保留纯文本内容。这在提取的链接过多影响阅读时特别有用——例如提取一个包含大量导航链接的页面。
与 AI 聊天联动
提取结果可以一键发送到 AI 聊天窗口，让你能基于网页内容继续与 AI 对话。在工作台的结果区点击 发送到聊天 按钮即可，系统会自动带上标题和来源 URL。
利用内置配方批量提取
内置配方涵盖了 Bilibili、GitHub 等高频站点。如果需要批量提取这些网站的内容，只需重复输入 URL 并选择快速模式即可——配方会自动匹配并应用于每个页面，无需重复配置提取规则。
本地代理调试
交互模式通过本地代理服务器加载目标页面（绕过同源策略限制）。这意味着你可以在工具中预览任意网页，即使该网页通过 X-Frame-Options 禁止了 iframe 嵌入。代理服务器会在工具关闭时自动释放。
常见问题
Q：快速模式和智能模式有什么区别？我该用哪个？
快速模式 通过纯 HTTP 请求获取网页的 HTML，然后进行清洗。它极快（毫秒级），但不执行任何 JavaScript——对于用 JS 动态渲染内容的页面（如 Vue/React 构建的 SPA），它只能获取到初始 HTML 骨架。
智能模式 会在隐藏的浏览器引擎中渲染目标页面，等待 JavaScript 执行完成后才提取内容。它较慢（通常 3-15 秒），但能完整获取动态内容。
选择建议：
- 大多数静态博客、新闻文章、文档 → 快速模式
- Vue/React 单页应用、需要等待加载的页面、登录后内容 → 智能模式
- 需要精细控制提取规则并保存配方 → 交互模式
Q：提取结果显示为空或者质量很低怎么办？
可能的原因和解决办法：
- 页面是动态加载的：试试切换到智能模式，让浏览器渲染完成后再提取
- 页面需要等待特定元素：在智能模式下使用
waitFor参数指定需要等待出现的 CSS 选择器 - 目标页面有反爬机制：交互模式内置了反检测脚本，尝试先在交互模式中加载页面查看效果
- 正文内容被噪音覆盖：在交互模式中使用排除规则（exclude）手动移除噪声元素
- 可以创建配方：如果某个网站总是提取不好，考虑为该网站创建一个定制配方
Q：保存的配方对其他页面生效吗？
这取决于你配置的匹配规则：
- 域名精确匹配：配方只对配置的域名生效（如
www.example.com） - 路径模式：使用
glob通配符控制更精确的路径匹配（如/article/**只匹配文章路径） - 默认行为：如果只配置了域名，该域名下的所有页面都会尝试应用此配方
一个站点可以配置多个配方，系统会按照"域名+路径"最精确的匹配规则优先选择。
Q：交互模式无法加载某些网站怎么办？
这通常由以下原因导致：
- 网站有严格的反爬机制：交互模式内置了反检测脚本（隐藏 WebView 特征、伪装
navigator.webdriver等），但有些网站的反爬策略可能会识别出非真实浏览器环境 - 需要登录的页面：先在身份卡片中注入对应网站的 Cookie 后再加载
- 代理服务器地址被屏蔽：少数网站会屏蔽来自本地代理的请求，这种情况建议使用智能模式的后端代理
- 跨域 CSP 限制：虽然有代理绕过了 iframe 禁止策略，但某些 CSP 规则仍可能影响资源加载
遇到加载问题，可以先查看右侧的 API 嗅探 面板是否有请求被拦截，这通常能提供排查线索。
Q：如何清空 API 嗅探的记录？
在 API 嗅探 标签页中，点击顶部的清空按钮即可一键删除所有已发现的 API 请求记录。工具关闭或重新加载页面时，嗅探记录也会自动清除。
Q：内置配方可以修改吗？
内置配方（带有"内置"标签的）不可删除和修改，但你可以通过以下方式绕过：
- 禁用它：在配方管理页面点击禁用按钮，内置配方将不再自动匹配
- 创建覆盖配方：创建一个同名域名但规则更精细的用户配方，系统会自动优先选用
- 复制为自定义配方：在交互模式中手动加载目标页面，参考内置配方的规则重建一份并保存
提示
内置配方会随工具更新而迭代优化，如果你对某个内置配方有改进建议，欢迎提交 Issue 或 PR。