当前位置: 首页 > 科技观察

保存网页时“忘记”了?8kStar开源扩展,一键完美保存完整网页

时间:2023-03-16 10:07:02 科技观察

简介SingleFile是一个浏览器扩展和CLI工具,可以快速将完整网页保存为单个HTML文件。它与主要浏览器兼容,如Chrome、Firefox(桌面和移动)、Edge、Vivaldi、Brave、Waterfox、Yandex和Opera。项目地址:https://github.com/gildas-lormeau/SingleFileInstallSingleFile可以安装在:Firefox:https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/Chrome:https://developer.chrome.com/extensions/getstarted#manifestMicrosoftEdge:https://img.ydisp.cn/news/20220902/spzthrppqmvdata-id="ucd67dc5-1jiOTccj">Firefox:https://addons.mozilla.org/firefox/addon/single-fileFirefox移动版:https://blog.mozilla.org/addons/2020/09/29/expanded-extension-support-in-firefox-for-android-nightly/Chrome:https://chrome.google.com/extensions/detail/mpiodijhokgodhhofbcjdecpffjipkleMicrosoftEdge:https://img.ydisp.cn/news/20220902/m2d1s0x5exvdata-id="l20de63f-OeELKlK3">您也可以手动下载zip文件并解压到磁盘并按照以下说明手动安装:https://github.com/gildas-lormeau/SingleFile/archive/master.zip使用简单等到页面完全加载后,单击扩展工具栏中的SingleFile按钮r保存页面,在处理页面之前再次点击按钮取消操作。当前选项卡的内容选中的内容选中的框架在扩展工具栏或网页上右击SingleFile按钮打开菜单,可以保存:也可以一键处理多个选项卡,保存:选中的选项卡不是固定的。所有选项卡在菜单中选择“注释并保存页面...”:您可以突出显示文本、添加注释和删除内容。如果启用了自动保存,则每次加载页面时都会自动保存页面文件。下载后保存路径为浏览器配置中的下载文件SingleFile的命令行界面SingleFile可以从命令行启动,它通过Node.js作为独立脚本注入到网页中运行。使用Docker从DockerHub安装dockerpullcapsulecode/singlefiledockertagcapsulecode/singlefilesinglefile手动安装gitclone--depth1--recursivehttps://github.com/gildas-lormeau/SingleFile.gitcdSingleFile/clidockerbuild--no-cache-tsinglefile.rundockerrunsinglefile"https://www.wikipedia.org"Runandredirectresultsintoafiledockerrunsinglefile"https://www.wikipedia.org">wikipedia.html手动安装全局下载安装确保Chrome或Firefox已安装并可通过PATH环境变量访问找到可执行文件InstallNode.js下载安装SingleFile有以下三种方法:npminstall-g"gildas-lormeau/SingleFile#master"手动下载解压unzipmaster.zip.cdSingleFile-masternpminstallcdcligit源码安装gitclone--depth1--recursivehttps://github.com/gildas-lormeau/SingleFile.gitcdSingleFilenpminstallcdcli操作语法:single-file[output][options...]查看帮助:single-file--help将页面内容保存到指定文件示例single-filehttps://www.wikipedia.orgwikipedia.htmlSavelistofurlsinlist-urls.txtfilesingle-file--urls-file=list-urls.txt可以在SingleFileExecute用户脚本中保存页面之前或之后与用户脚本集成。当SignleFile用作:扩展时,从选项页面导出设置,编辑JSON文件,将userScriptEnabled:false替换为userScriptEnabled:true,并在SingleFile中导入修改后的文件以启用隐藏选项。使用CLI工具时,使用选项--browser-script将脚本路径传递给SingleFile。在用户脚本中分发自定义事件:dispatchEvent(newCustomEvent("single-file-user-script-init"));在用户脚本中监听自定义事件single-file-on-before-capture-request,这个监听函数会在页面保存之前调用:addEventListener("single-file-on-before-capture-request",()=>{console.log("ThepagewillbesavedbySingleFile");});监听用户脚本中的自定义事件single-file-on-after-capture-request,该监听函数会在页面保存后调用:addEventListener("single-file-on-after-capture-request",()=>{console.log("该页面已被SingleFile处理");});例如,此脚本在保存之前从页面中删除图像,并在处理页面后将其恢复:(()=>{constelements=newMap();constremovedElementsSelector="img";dispatchEvent(newCustomEvent("-script-init"));addEventListener("single-file-on-before-capture-request",()=>{document.querySelectorAll(removedElementsSelector)).forEach(element=>{constplaceHolderElement=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();});})();