建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
保存網(wǎng)頁時(shí)“丟三落四”？8kStar的開源擴(kuò)展，一鍵完美保存完整網(wǎng)頁
?簡介
它兼容 Chrome、Firefox（桌面和移動(dòng)端）、Edge、Vivaldi、Brave、Waterfox、Yandex 和 Opera 等主流瀏覽器。
成都創(chuàng)新互聯(lián)成立以來不斷整合自身及行業(yè)資源、不斷突破觀念以使企業(yè)策略得到完善和成熟，建立了一套“以技術(shù)為基點(diǎn)，以客戶需求中心、市場為導(dǎo)向”的快速反應(yīng)體系。對公司的主營項(xiàng)目，如中高端企業(yè)網(wǎng)站企劃 / 設(shè)計(jì)、行業(yè) / 企業(yè)門戶設(shè)計(jì)推廣、行業(yè)門戶平臺運(yùn)營、app開發(fā)定制、手機(jī)網(wǎng)站開發(fā)、微信網(wǎng)站制作、軟件開發(fā)、香港機(jī)房服務(wù)器托管等實(shí)行標(biāo)準(zhǔn)化操作，讓客戶可以直觀的預(yù)知到從成都創(chuàng)新互聯(lián)可以獲得的服務(wù)效果。
項(xiàng)目地址：
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 移動(dòng)端：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
- 也可以通過手動(dòng)下載 zip 文件，解壓到磁盤上并且按照以下說明手動(dòng)安裝：https://github.com/gildas-lormeau/SingleFile/archive/master.zip
簡單使用
等到頁面完全加載后，單擊擴(kuò)展工具欄中的 SingleFile 按鈕以保存頁面，在處理頁面時(shí)再次單擊該按鈕以取消該操作。
- 當(dāng)前 tab 的內(nèi)容
- 選中的內(nèi)容
- 選中的 frame
- 通過右鍵單擊擴(kuò)展工具欄或網(wǎng)頁上的 SingleFile 按鈕打開菜單，可以保存：
- 也可以一鍵處理多個(gè) tab 并保存：
- 選中的 tab
- 未固定的 tab
- 所有的 tab
- 在菜單中選擇 "Annotate and save the page..."：
- 可以高亮文本
- 添加注釋
- 刪除內(nèi)容
- 如果啟用自動(dòng)保存，頁面每次加載后都會(huì)自動(dòng)保存頁面
- 文件下載后保存路徑是瀏覽器配置中的下載文件夾
SingleFile的命令行界面
SingleFile 可以通過命令行啟動(dòng)，它通過 Node.js 作為注入網(wǎng)頁的獨(dú)立腳本運(yùn)行。
使用 Docker 安裝
- 從 Docker Hub 安裝
docker pull capsulecode/singlefile
docker tag capsulecode/singlefile singlefile
- 手動(dòng)安裝
git clone --depth 1 --recursive https://github.com/gildas-lormeau/SingleFile.git
cd SingleFile/cli
docker build --no-cache -t singlefile .
- 運(yùn)行
docker run singlefile "https://www.wikipedia.org"
- 運(yùn)行并將結(jié)果重定向到文件中
docker run singlefile "https://www.wikipedia.org" > wikipedia.html
手動(dòng)安裝
全局下載和安裝
- 確保已經(jīng)安裝了 Chrome 或 Firefox，并且可以通過 PATH 環(huán)境變量找到可執(zhí)行文件
- 安裝 Node.js
- 下載安裝 SingleFile 有以下 3 種方法：
npm install -g "gildas-lormeau/SingleFile#master"
- 手動(dòng)下載并解壓
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
運(yùn)行
- 語法：
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í)行用戶腳本。
- 當(dāng) SignleFile 作為：
- 擴(kuò)展使用時(shí)，從選項(xiàng)頁面導(dǎo)出設(shè)置、編輯 JSON 文件、替換 userScriptEnabled: false 為 userScriptEnabled: true，并在 SingleFile 中導(dǎo)入修改后的文件來啟用隱藏選項(xiàng)。
- CLI 工具使用時(shí)，使用選項(xiàng) --browser-script 將腳本路徑傳遞給 SingleFile。
- 在用戶腳本中分發(fā)自定義事件：
dispatchEvent(new CustomEvent("single-file-user-script-init"));
- 在用戶腳本中監(jiān)聽自定義事件 single-file-on-before-capture-request，這個(gè)監(jiān)聽函數(shù)會(huì)在頁面保存前被調(diào)用：
addEventListener("single-file-on-before-capture-request", () => {
console.log("The page will be saved by SingleFile");
});
- 在用戶腳本中監(jiān)聽自定義事件 single-file-on-after-capture-request，這個(gè)監(jiān)聽函數(shù)會(huì)在頁面保存后被調(diào)用：
addEventListener("single-file-on-after-capture-request", () => {
console.log("The page has been processed by SingleFile");
});
- 例子，這個(gè)腳本會(huì)在保存頁面之前從頁面中刪除圖像，并在處理頁面后恢復(fù)：
(() => {
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();
});
})(); 本文標(biāo)題：保存網(wǎng)頁時(shí)“丟三落四”？8kStar的開源擴(kuò)展，一鍵完美保存完整網(wǎng)頁
分享網(wǎng)址：http://www.dlmjj.cn/article/djjpjej.html
