保存网页时“丢三落四”？8k Star 的开源扩展，一键完美保存完整网页
【导语】：用浏览器自带的网页另存功能时，经常出现丢失图片，而且还会保存一堆的关联文件。最近 GitHub 上有一个热门开源工具，可以完美解决这些问题。
简介
SingleFile 是一个浏览器扩展，以及 CLI 工具，可快速将完整的网页保存成单一 HTML 文件。
它兼容 Chrome、Firefox（桌面和移动端）、Edge、Vivaldi、Brave、Waterfox、Yandex 和 Opera 等主流浏览器。
项目地址：
https://github.com/gildas-lormeau/SingleFile
安装
SingleFile 可以安装在：
Firefox: https://addons.mozilla.org/firefox/addon/single-file
Firefox 移动端：https://blog.mozilla.org/addons/2020/09/29/expanded-extension-support-in-firefox-for-android-nightly/
Chrome: https://chrome.google.com/extensions/detail/mpiodijhokgodhhofbcjdecpffjipkle
Microsoft Edge: https://microsoftedge.microsoft.com/addons/detail/efnbkdcfmcmnhlkaijjjmhjjgladedno
也可以通过手动下载 zip 文件，解压到磁盘上并且按照以下说明手动安装：https://github.com/gildas-lormeau/SingleFile/archive/master.zip
Firefox: https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/ Chrome: https://developer.chrome.com/extensions/getstarted#manifest Microsoft Edge: https://docs.microsoft.com/en-us/microsoft-edge/extensions-chromium/getting-started/part1-simple-extension#run-your-extension-locally-in-your-browser-while-developing-it-side-loading
简单使用
等到页面完全加载后，单击扩展工具栏中的 SingleFile 按钮以保存页面，在处理页面时再次单击该按钮以取消该操作。
通过右键单击扩展工具栏或网页上的 SingleFile 按钮打开菜单，可以保存： 当前 tab 的内容 选中的内容 选中的 frame 也可以一键处理多个 tab 并保存： 选中的 tab 未固定的 tab 所有的 tab 在菜单中选择 "Annotate and save the page..."： 可以高亮文本 添加注释 删除内容 如果启用自动保存，页面每次加载后都会自动保存页面 文件下载后保存路径是浏览器配置中的下载文件夹
SingleFile的命令行界面
SingleFile 可以通过命令行启动，它通过 Node.js 作为注入网页的独立脚本运行。
使用 Docker 安装
从 Docker Hub 安装
docker pull capsulecode/singlefile
docker tag capsulecode/singlefile singlefile
手动安装
git clone --depth 1 --recursive https://github.com/gildas-lormeau/SingleFile.git
cd SingleFile/cli
docker build --no-cache -t singlefile .
运行
docker run singlefile "https://www.wikipedia.org"
运行并将结果重定向到文件中
docker run singlefile "https://www.wikipedia.org" > wikipedia.html
手动安装
确保已经安装了 Chrome 或 Firefox，并且可以通过 PATH 环境变量找到可执行文件 安装 Node.js 下载安装 SingleFile 有以下 3 种方法： 全局下载和安装
npm install -g "gildas-lormeau/SingleFile#master"
手动下载并解压
unzip master.zip .
cd SingleFile-master
npm install
cd cli
git 源码安装
git clone --depth 1 --recursive https://github.com/gildas-lormeau/SingleFile.git
cd SingleFile
npm install
cd cli
运行
语法：
single-file <url> [output] [options ...]
查看帮助：
single-file --help
例子 保存页面内容到指定文件
single-file https://www.wikipedia.org wikipedia.html
保存 list-urls.txt 文件中的 url 列表
single-file --urls-file=list-urls.txt
与用户脚本集成
可以在 SingleFile 保存页面之前或之后执行用户脚本。
当 SignleFile 作为：
扩展使用时，从选项页面导出设置、编辑 JSON 文件、替换 userScriptEnabled: false 为 userScriptEnabled: true，并在 SingleFile 中导入修改后的文件来启用隐藏选项。 CLI 工具使用时，使用选项 --browser-script 将脚本路径传递给 SingleFile。
在用户脚本中分发自定义事件：
dispatchEvent(new CustomEvent("single-file-user-script-init"));
在用户脚本中监听自定义事件 single-file-on-before-capture-request，这个监听函数会在页面保存前被调用：
addEventListener("single-file-on-before-capture-request", () => {
console.log("The page will be saved by SingleFile");
});
在用户脚本中监听自定义事件 single-file-on-after-capture-request，这个监听函数会在页面保存后被调用：
addEventListener("single-file-on-after-capture-request", () => {
console.log("The page has been processed by SingleFile");
});
例子，这个脚本会在保存页面之前从页面中删除图像，并在处理页面后恢复：
(() => {
const elements = new Map();
const removedElementsSelector = "img";
dispatchEvent(new CustomEvent("single-file-user-script-init"));
addEventListener("single-file-on-before-capture-request", () => {
document.querySelectorAll(removedElementsSelector).forEach(element => {
const placeHolderElement = document.createElement(element.tagName);
elements.set(placeHolderElement, element);
element.parentElement.replaceChild(placeHolderElement, element);
});
});
addEventListener("single-file-on-after-capture-request", () => {
Array.from(elements).forEach(([placeHolderElement, element]) => {
placeHolderElement.parentElement.replaceChild(element, placeHolderElement);
});
elements.clear();
});
})();
- EOF -
更多优秀开源项目（点击下方图片可跳转）
开源前哨
日常分享热门、有趣和实用的开源项目。参与维护10万+star 的开源技术资源库，包括：Python, Java, C/C++, Go, JS, CSS, Node.js, PHP, .NET 等
关注后获取
回复 资源 获取 10万+ star 开源资源
分享、点赞和在看
支持我们分享更多优秀开源项目，谢谢！