查看原文
其他

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

小秋 开源前哨 2022-09-24

【导语】:用浏览器自带的网页另存功能时,经常出现丢失图片,而且还会保存一堆的关联文件。最近 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 保存页面之前或之后执行用户脚本。

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


- EOF - 


更多优秀开源项目(点击下方图片可跳转)




开源前哨

日常分享热门、有趣和实用的开源项目。参与维护10万+star 的开源技术资源库,包括:Python, Java, C/C++, Go, JS, CSS, Node.js, PHP, .NET 等

关注后获取

回复 资源 获取 10万+ star 开源资源



分享点赞在看

支持我们分享更多优秀开源项目,谢谢!

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存