?簡介

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#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 <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。

2. 在用戶腳本中分發自定義事件：

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

3. 在用戶腳本中監聽自定義事件 single-file-on-before-capture-request，這個監聽函數會在頁面保存前被調用：

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

4. 在用戶腳本中監聽自定義事件 single-file-on-after-capture-request，這個監聽函數會在頁面保存后被調用：

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

5. 例子，這個腳本會在保存頁面之前從頁面中刪除圖像，并在處理頁面后恢復：

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