文章总结： 本文介绍SingleFile工具，能将网页打包成单个HTML文件以解决碎片化问题。文章详解资源内联、优化及自动保存等功能，提供扩展与CLI的使用教程，并指出文件体积大等注意事项。该工具适用于离线归档与取证，是高效的信息保存方案。 综合评分： 85 文章分类： 安全工具,实战经验

告别碎片化保存：SingleFile，一键将整个网页打包成单个HTML文件

柠檬赏金猎人

2026年2月22日 10:02 广东

概述

在信息爆炸的时代，我们常常遇到想要完整保存某个网页内容的需求，无论是为了离线阅读、资料归档还是防止链接失效。传统的“另存为”功能往往会产生一堆杂乱的文件夹和文件，而截图又无法保留可交互的文本内容。SingleFile 应运而生，它是一款功能强大的浏览器扩展和命令行工具，能够将整个网页（包括图片、样式、字体等所有资源）完美地保存为一个独立的HTML文件。这个文件可以在任何浏览器中直接打开，无需网络连接，真正实现了“所见即所得”的离线保存。自发布以来，它在GitHub上已获得超过20k的星标，成为开发者、研究人员和普通用户保存网络内容的得力助手。

技术/功能

SingleFile的核心在于其智能的资源内联与优化技术。它不仅仅是将资源链接打包，而是对网页进行深度处理，以确保保存文件的完整性与高效性。

• 完整资源内联：将网页中引用的所有外部资源（如图片、CSS样式表、字体、框架内容等）通过Base64编码或直接内嵌的方式，整合到单个HTML文件中。
• 内容优化与压缩：
• HTML/CSS最小化：移除不必要的空白字符、注释，压缩代码体积。
• 未使用代码移除：分析并删除未被实际使用的CSS规则和HTML元素，进一步精简文件。
• 资源去重：避免同一资源被多次保存。
• 多种保存模式：
• 保存整个页面：最常用的功能。
• 保存选中区域：仅保存用户用鼠标划选的部分内容。
• 保存子框架：保存页面内嵌的iframe内容。
• 批量保存：一键保存所有标签页、未固定的标签页或选中的多个标签页。
• 注释与编辑功能：在保存前，用户可以对网页进行高亮标注、添加笔记或删除不需要的部分，实现个性化保存。
• 自动保存：可以为特定标签页或所有页面设置自动保存规则，在页面加载后或关闭前自动归档，非常适合用于监控或备份。
• 云存储集成：支持将保存的页面直接上传至Google Drive或GitHub仓库。
• 区块链存证：可选功能，将保存页面的SHA256哈希值记录到区块链中，为内容提供存在性证明。
• 跨平台兼容：支持Chrome、Firefox（包括安卓版）、Safari、Edge、Brave、Vivaldi等主流浏览器。
• 命令行界面：除了浏览器扩展，还提供了功能完整的CLI工具，便于集成到自动化脚本或服务器端使用。

使用示例

以下以Chrome浏览器扩展为例，展示基本使用流程：

1. 安装扩展：

• 访问Chrome网上应用店，搜索“SingleFile”并添加到浏览器。
• 安装后，浏览器工具栏会出现SingleFile的图标。

1. 保存单个页面：

• 导航到你想保存的网页，例如一篇技术博客。
• 点击工具栏上的SingleFile图标。图标会开始旋转，表示正在处理。
• 处理完成后，一个包含完整页面内容的.html文件会自动下载到你的默认下载文件夹。

1. 使用右键菜单进行高级操作：

• 在网页任意位置点击右键，或在工具栏的SingleFile图标上点击右键，会弹出上下文菜单。
• 保存选中部分：在网页上用鼠标选中一段文字和图片，然后右键选择“SingleFile -> 保存选中内容”。
• 批处理标签页：右键SingleFile图标，选择“保存所有标签页”或“保存未固定的标签页”。
• 开启自动保存：右键SingleFile图标，选择“自动保存此标签页”。此后每次刷新或离开该页面，都会自动保存一份副本。

1. 使用注释模式：

• 右键点击SingleFile图标，选择“注释并保存页面…”。
• 页面会进入编辑模式，顶部出现工具栏。你可以：
  • 使用荧光笔工具高亮重要文本。
  • 使用文本框添加注释。
  • 使用删除工具划掉不想保留的内容。
• 编辑完成后，点击顶部的“保存”按钮。

1. （高级）使用CLI工具： 如果你需要在无头环境中批量抓取网页，可以使用其CLI工具。首先需要安装Node.js，然后通过npm安装：

   npx single-file https://example.com --output=./saved-page.html

这条命令会将 https://example.com 的页面保存到当前目录下的 saved-page.html 文件中。

注意事项

1. 文件体积：由于图片等资源被内联为Base64编码，保存复杂网页（特别是图片多的）生成的HTML文件可能会非常大（几十MB甚至上百MB），某些文本编辑器可能无法流畅打开。建议用浏览器直接查看。
2. 动态内容：对于高度依赖JavaScript在加载后动态渲染内容的页面（如某些单页应用），SingleFile可能无法捕获最终状态。它保存的是当前DOM的状态。
3. 隐私与版权：请仅用于保存个人需要的、有权限保存的网页内容。尊重内容创作者的版权，不要用于大规模盗取或分发受版权保护的材料。
4. 浏览器性能：在处理非常复杂的页面时，扩展可能会暂时占用较高的CPU和内存，导致浏览器响应变慢，这是正常现象。
5. 配置选项：首次使用建议进入扩展的“选项”页面进行浏览，你可以设置默认文件名格式、是否压缩HTML、是否移除隐藏元素等，让工具更符合你的使用习惯。
6. 与“打印为PDF”区别：SingleFile保存的是可交互、可检索的原始网页结构；而“打印为PDF”保存的是固定的版面，无法复制交互元素，且排版可能发生变化。

参考链接

• 项目主页：https://github.com/gildas-lormeau/SingleFile
• 官方演示网站：https://getsinglefile.com
• Chrome扩展商店：https://chromewebstore.google.com/detail/singlefile/mpiodijhokgodhhofbcjdecpffjipkle
• Firefox扩展商店：https://addons.mozilla.org/firefox/addon/single-file
• CLI工具仓库：https://github.com/gildas-lormeau/single-file-cli
• 常见问题解答：https://github.com/gildas-lormeau/SingleFile/blob/master/faq.md

仅限交流学习使用，如您在使用本工具或代码的过程中存在任何非法行为，您需自行承担相应后果，我们将不承担任何法律及连带责任。“如侵权请私聊公众号删文”。

免责声明：

本文所载程序、技术方法仅面向合法合规的安全研究与教学场景，旨在提升网络安全防护能力，具有明确的技术研究属性。

任何单位或个人未经授权，将本文内容用于攻击、破坏等非法用途的，由此引发的全部法律责任、民事赔偿及连带责任，均由行为人独立承担，本站不承担任何连带责任。

本站内容均为技术交流与知识分享目的发布，若存在版权侵权或其他异议，请通过邮件联系处理，具体联系方式可点击页面上方的联系我。

本文转载自：柠檬赏金猎人 《告别碎片化保存：SingleFile，一键将整个网页打包成单个HTML文件》