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

​简介

它兼容 Chrome、Firefox（桌面和移动端）、Edge、Vivaldi、Brave、Waterfox、Yandex 和 Opera 等主流浏览器。

成都创新互联成立以来不断整合自身及行业资源、不断突破观念以使企业策略得到完善和成熟，建立了一套“以技术为基点，以客户需求中心、市场为导向”的快速反应体系。对公司的主营项目，如中高端企业网站企划 / 设计、行业 / 企业门户设计推广、行业门户平台运营、app开发定制、手机网站开发、微信网站制作、软件开发、香港机房服务器托管等实行标准化操作，让客户可以直观的预知到从成都创新互联可以获得的服务效果。

项目地址：

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

安装

SingleFile 可以安装在：

• 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

• 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

简单使用

等到页面完全加载后，单击扩展工具栏中的 SingleFile 按钮以保存页面，在处理页面时再次单击该按钮以取消该操作。

• 当前 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 cli

• git 源码安装

git clone --depth 1 --recursive https://github.com/gildas-lormeau/SingleFile.git
cd SingleFile
npm install
cd cli

运行

• 语法：

single-file  [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 保存页面之前或之后执行用户脚本。

1. 当 SignleFile 作为：

• 扩展使用时，从选项页面导出设置、编辑 JSON 文件、替换 userScriptEnabled: false 为 userScriptEnabled: true，并在 SingleFile 中导入修改后的文件来启用隐藏选项。
• CLI 工具使用时，使用选项 --browser-script 将脚本路径传递给 SingleFile。

1. 在用户脚本中分发自定义事件：

dispatchEvent(new CustomEvent("single-file-user-script-init"));

1. 在用户脚本中监听自定义事件 single-file-on-before-capture-request，这个监听函数会在页面保存前被调用：

addEventListener("single-file-on-before-capture-request", () => {
  console.log("The page will be saved by SingleFile");
});

1. 在用户脚本中监听自定义事件 single-file-on-after-capture-request，这个监听函数会在页面保存后被调用：

addEventListener("single-file-on-after-capture-request", () => {
  console.log("The page has been processed by SingleFile");
});

1. 例子，这个脚本会在保存页面之前从页面中删除图像，并在处理页面后恢复：

(() => {
  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();
  });
})();

文章标题：保存网页时“丢三落四”？8kStar的开源扩展，一键完美保存完整网页
文章源于：http://www.mswzjz.com/qtweb/news1/194501.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联