保存网页时“丢三落四”？8k Star 的开源扩展，一键完美保存完整网页

​简介

SingleFile 是丢三落四一个浏览器扩展，以及 CLI 工具，保存保存可快速将完整的网页完美完整网页网页保存成单一 HTML 文件。

它兼容 Chrome、源扩Firefox（桌面和移动端）、展键Edge、丢三落四Vivaldi、保存保存Brave、网页完美完整网页Waterfox、源扩Yandex 和 Opera 等主流浏览器。展键

项目地址：

https://github.com/gildas-lormeau/SingleFile

安装

SingleFile 可以安装在：

Firefox: https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/Chrome: https://developer.chrome.com/extensions/getstarted#manifestMicrosoft Edge: https://img.ydisp.cn/news/20220902/spzthrppqmv data-id="ucd67dc5-1jiOTccj">Firefox: https://addons.mozilla.org/firefox/addon/single-fileFirefox 移动端：https://blog.mozilla.org/addons/2020/09/29/expanded-extension-support-in-firefox-for-android-nightly/Chrome: https://chrome.google.com/extensions/detail/mpiodijhokgodhhofbcjdecpffjipkleMicrosoft Edge: https://img.ydisp.cn/news/20220902/m2d1s0x5exv data-id="l20de63f-OeELKlK3">也可以通过手动下载 zip 文件，丢三落四解压到磁盘上并且按照以下说明手动安装：https://github.com/gildas-lormeau/SingleFile/archive/master.zip

简单使用

等到页面完全加载后，保存保存单击扩展工具栏中的网页完美完整网页 SingleFile 按钮以保存页面，在处理页面时再次单击该按钮以取消该操作。云南idc服务商源扩

当前 tab 的展键内容选中的内容选中的 frame通过右键单击扩展工具栏或网页上的 SingleFile 按钮打开菜单，可以保存：也可以一键处理多个 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 cligit 源码安装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();

  });

})();

很赞哦!（1568）