你有没有遇到过这种情况收藏了一个网页过段时间再打开404了。或者保存了网页结果图片全丢了CSS样式全乱了只剩一堆文字和红叉。今天介绍的这个开源神器彻底解决这个问题。 源码下载百度网盘提取码1ate 谷歌浏览器插件: 百度网盘提取码xda6网页保存的三大痛点日常开发和学习中我们经常需要保存网页收藏夹不靠谱原站改版、下线、删帖收藏夹里的链接变成死链浏览器另存为太拉胯保存下来一个HTML 一个文件夹移动就丢资源分享更麻烦截图/PDF丢失交互代码高亮没了可折叠内容丢了链接全废了核心问题就一个怎么把一个完整网页HTMLCSSJS图片字体塞进一个文件里打开就能用SingleFile 就是干这个的。SingleFile 是什么SingleFile 是一个开源浏览器扩展22K Star支持 Chrome、Firefox、Edge、Safari、Brave 等主流浏览器。它的核心能力就一句话把当前网页的所有资源CSS、图片、字体、脚本内联到一个 HTML 文件中保存后离线也能完美还原。GitHubhttps://github.com/gildas-lormeau/SingleFileStar22K协议AGPL-3.0语言JavaScript核心功能一览1. 一键保存完整网页点击工具栏图标SingleFile 自动遍历页面所有 CSS 样式表内联到style标签下载所有图片转为 base64 嵌入img的 src内联字体文件woff2/woff/ttf处理 CSS 中的背景图、伪元素图片移除不需要的脚本可配置保留生成单个 HTML 文件触发下载整个过程 1-3 秒保存的 HTML 文件双击即可在浏览器中完美打开。2. 批量保存标签页右键 SingleFile 图标可以选择保存选中的标签页保存未固定的标签页保存所有标签页做技术调研时打开 10 个参考页面一键全部保存效率拉满。3. 自动保存开启自动保存后每次页面加载完成或卸载前自动触发保存。适合存档每天的技术文档保存会过期的限时内容自动备份自己的博客文章4. 网页标注右键选择Annotate and save the page…进入标注模式高亮文本用不同颜色标记重点添加笔记在页面任意位置添加文字批注删除内容去掉广告、无关段落标注完自动保存笔记和高亮都内联在 HTML 中离线也能看。5. 保存到云盘SingleFile 支持直接保存到Google Drive在选项页启用即可GitHub直接上传到指定仓库配合 GitHub 仓库可以搭建自己的网页存档知识库。6. 区块链存证启用add proof of existence选项SingleFile 会计算保存页面的 SHA256 哈希写入区块链。相当于给网页加了个时间戳证明你在某个时间点确实看到了这个内容。技术实现原理SingleFile 的核心思路是资源内联把所有外部引用转为 HTML 内嵌数据资源类型原始形式内联方式CSS 样式表link hrefstyle.cssstyle...内容.../style图片img srcpic.pngimg srcdata:image/png;base64,...CSS 背景图background-image: url(bg.png)background-image: url(data:image/png;base64,...)字体font-face { src: url(font.woff2) }font-face { src: url(data:font/woff2;base64,...) }iframeiframe srcinner.html内联 iframe 内容可配置脚本script srcapp.js默认移除可配置保留关键细节CSS 中url()引用的资源全部替换为 data URI处理 CSSimport递归展开图片懒加载lazy load的data-src也会处理SVG 内联图片直接嵌入处理picture和srcset响应式图片CLI 命令行版本SingleFile 还提供了 CLI 工具1.5K Star适合批量自动化场景# 安装npminstall-gsingle-file-cli# 保存单个网页single-file https://example.com output.html# 批量保存配合 shellcaturls.txt|xargs-I{}single-file{}{}.html# 使用 Puppeteer 模式更稳定single-file --back-end puppeteer https://example.com output.htmlCLI 版本基于 Puppeteer/Playwright可以在无头浏览器中渲染页面后保存适合CI/CD 流水线中自动存档文档定时备份重要网页批量抓取技术文档离线阅读实际场景每天凌晨跑一个 cron把团队 Wiki、API 文档、技术博客自动存档到 Git 仓库再也不怕文档突然消失。与同类工具对比工具输出格式离线可用批量标注CLISingleFile单个HTML✅ 完美✅✅✅浏览器另存为HTML文件夹⚠️ 移动易丢❌❌❌HTTrack镜像目录✅✅❌✅ArchiveBox多格式✅✅❌✅Web Clipper笔记格式⚠️ 依赖平台❌✅❌印象笔记·剪藏笔记格式⚠️ 依赖平台❌✅❌SingleFile 的独特优势输出是纯 HTML不依赖任何平台双击即用分享方便。实战5个高频使用场景场景1技术文档离线存档很多技术文档React、Vue、Webpack版本更新后旧版文档就找不到了。用 SingleFile 保存当前版本的文档离线随时查阅。场景2保存面试题和面经技术面经经常被删或设为私密。看到好内容SingleFile 一键保存不依赖原站存活。场景3竞品分析存证做竞品分析时保存竞品页面快照。配合区块链存证功能可以作为时间戳证据。场景4离线阅读材料出差/通勤没网络提前用 SingleFile 批量保存技术文章飞机上也能看。场景5博客备份独立博客随时可能关站。开启 SingleFile 自动保存每次发文章自动存档到本地。推荐配置安装后右键图标 → 选项建议调整HTML 移除隐藏元素开启减小文件体积HTML 移除未使用的 CSS 规则开启大幅减小体积HTML 压缩 HTML开启进一步压缩Images 最大大小设置 5MB避免超大图片撑爆文件Misc. 保存原始 URL开启方便溯源配置好后一个普通技术文章保存下来大约 500KB-2MB完全可接受。注意事项动态内容SPA 页面React/Vue保存的是当前渲染状态不是源码。需要完整交互请用 CLI Puppeteer文件体积图片多的页面文件会很大建议设置图片大小上限脚本默认移除保存的 HTML 不含 JS交互功能会丢失可在选项中保留脚本但文件会更大CORS 限制部分跨域资源可能无法内联CLI 版本无此限制AGPL 协议修改后需开源个人使用无影响总结SingleFile 解决了一个看似简单但长期困扰开发者的问题怎么可靠地保存一个完整网页。22K Star 说明这个需求有多普遍。核心价值一个文件搞定HTMLCSS图片字体全内联不依赖外部资源双击即用任何浏览器直接打开离线完美还原批量自动多标签页保存、自动保存、CLI 批量处理标注存证高亮笔记、区块链时间戳如果你经常需要保存网页、做技术文档存档、或者只是想离线阅读SingleFile 是目前最好的选择没有之一。 源码下载百度网盘提取码1ate 谷歌浏览器插件: 百度网盘提取码xda6