?簡介

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

成都創(chuàng)新互聯(lián)成立以來不斷整合自身及行業(yè)資源、不斷突破觀念以使企業(yè)策略得到完善和成熟，建立了一套“以技術(shù)為基點，以客戶需求中心、市場為導向”的快速反應體系。對公司的主營項目，如中高端企業(yè)網(wǎng)站企劃 / 設計、行業(yè) / 企業(yè)門戶設計推廣、行業(yè)門戶平臺運營、app開發(fā)定制、手機網(wǎng)站開發(fā)、微信網(wǎng)站制作、軟件開發(fā)、香港機房服務器托管等實行標準化操作，讓客戶可以直觀的預知到從成都創(chuàng)新互聯(lián)可以獲得的服務效果。

項目地址：

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 的內(nèi)容
• 選中的內(nèi)容
• 選中的 frame

• 通過右鍵單擊擴展工具欄或網(wǎng)頁上的 SingleFile 按鈕打開菜單，可以保存：
• 也可以一鍵處理多個 tab 并保存：
• 選中的 tab
• 未固定的 tab
• 所有的 tab
• 在菜單中選擇 "Annotate and save the page..."：
• 可以高亮文本
• 添加注釋
• 刪除內(nèi)容
• 如果啟用自動保存，頁面每次加載后都會自動保存頁面
• 文件下載后保存路徑是瀏覽器配置中的下載文件夾

SingleFile的命令行界面

SingleFile 可以通過命令行啟動，它通過 Node.js 作為注入網(wǎng)頁的獨立腳本運行。

使用 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"

• 運行并將結(jié)果重定向到文件中

docker run singlefile "https://www.wikipedia.org" > wikipedia.html

手動安裝

全局下載和安裝

• 確保已經(jīng)安裝了 Chrome 或 Firefox，并且可以通過 PATH 環(huán)境變量找到可執(zhí)行文件
• 安裝 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

保存頁面內(nèi)容到指定文件

• 例子

single-file https://www.wikipedia.org wikipedia.html

• 保存 list-urls.txt 文件中的 url 列表

single-file --urls-file=list-urls.txt

與用戶腳本集成

可以在 SingleFile 保存頁面之前或之后執(zhí)行用戶腳本。

1. 當 SignleFile 作為：

• 擴展使用時，從選項頁面導出設置、編輯 JSON 文件、替換 userScriptEnabled: false 為 userScriptEnabled: true，并在 SingleFile 中導入修改后的文件來啟用隱藏選項。
• CLI 工具使用時，使用選項 --browser-script 將腳本路徑傳遞給 SingleFile。

1. 在用戶腳本中分發(fā)自定義事件：

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

1. 在用戶腳本中監(jiān)聽自定義事件 single-file-on-before-capture-request，這個監(jiān)聽函數(shù)會在頁面保存前被調(diào)用：

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

1. 在用戶腳本中監(jiān)聽自定義事件 single-file-on-after-capture-request，這個監(jiān)聽函數(shù)會在頁面保存后被調(diào)用：

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

當前文章：保存網(wǎng)頁時“丟三落四”？8kStar的開源擴展，一鍵完美保存完整網(wǎng)頁
本文路徑：http://uogjgqi.cn/article/djjpjej.html