告别“右键另存为“！ResourcesSaverExt：一键下载网页全部资源，目录结构原样保留

告别右键另存为ResourcesSaverExt一键下载网页全部资源目录结构原样保留【免费下载链接】ResourcesSaverExtChrome Extension for one click downloading all resources files and keeping folder structures.项目地址: https://gitcode.com/gh_mirrors/re/ResourcesSaverExt如果你经常需要把网页上的资源搬回本地——CSS、JS、图片、字体甚至跨域文件——那你一定体验过手动逐个另存为的痛苦。ResourcesSaverExt 是一款 Chrome 扩展它的核心能力只有一句话一键下载当前网页的全部资源文件并原样保留文件夹结构。打开 DevTools 面板点一下按钮整个页面的零件就整整齐齐地落到你电脑里。先讲一个让人血压升高的场景 深夜十一点半前端小赵接到一个需求分析某竞品官网的动画实现把它的 CSS 和 JS 全部扒下来研究。他打开 DevTools数了数 Network 面板——好家伙光 JS 就四十多个文件还有几十张图片、字体、SVG。他深吸一口气开始一个文件一个文件地右键 → Save as。存到第 23 个文件时他发现自己犯了个致命错误存下来的文件全部堆在同一个下载文件夹里原来的层级关系完全丢了。有一处 CSS 里引用了../fonts/icon.woff2现在根本对不上号。他瘫在椅子上看着满屏乱糟糟的文件名心里只有一个念头有没有一种工具能让这件事变成一次点击这就是我第一次见到 ResourcesSaverExt 时的处境。如果你也经历过下载一时爽整理火葬场接下来的内容应该能帮你省下大量时间。它到底是怎么记住所有资源的说实话第一次打开它的时候我有点被惊到。它不是一个挂在工具栏上的普通扩展而是一个直接嵌在 Chrome DevTools 里的独立面板叫ResourcesSaver。它的工作方式也很聪明双通道并行静态资源通过inspectedWindow.getResources把页面已经加载的 HTML、CSS、JS、图片全部登记在案网络请求实时监听Network面板的 HAR 记录页面加载过程中发出的每一个请求都不会漏掉包括那些藏在代码里的懒加载资源。换句话说你看到页面渲染出来的那一刻它已经把幕后功臣全部列好了清单。面板顶部会实时显示两类资源的数量静态资源多少、网络请求多少一目了然。确认无误后点下蓝色的Save All Resources按钮剩下的交给它。实测 30 分钟从克隆到第一次打包下载 ⚡说一百遍不如自己跑一遍。整个上手过程比我预想的短得多大概三步。第一步克隆项目并安装依赖git clone https://gitcode.com/gh_mirrors/re/ResourcesSaverExt.git cd ResourcesSaverExt yarn install注意一点Node.js 版本要和项目里的.nvmrc保持一致否则构建可能报错。装好依赖后执行构建yarn build构建产物会自动输出到项目根目录的unpacked2x文件夹里。第二步以本地扩展方式加载打开 Chrome地址栏输入chrome://extensions/打开右上角的开发者模式点加载已解压的扩展程序选中刚才的unpacked2x文件夹搞定。第三步打开任意网站去 DevTools 里找它按 F12 打开 DevTools你会看到多出一个 ResourcesSaver 标签页。切进去访问目标网站等资源清单刷出来点保存。实测结果我在一个资源偏多的资讯站上试了试100 多个文件从点击保存到 ZIP 下载完成也就几十秒。而如果用手动方式这个工作量够我点一下午鼠标。下载下来的东西跟你在浏览器里看到的一模一样 这是它最让我惊喜的地方也是它和网页另存为本质不同的地方。普通方式存下来的是一堆平铺文件引用关系全断ResourcesSaverExt 会把资源按原始 URL 路径重组文件夹结构。比如https://example.com/assets/css/main.css下载后就是assets/css/main.css目录嵌套、文件命名跟服务器上完全一致。CSS 里引用的../fonts/、../../img/这些相对路径下载后依然对得上拿下来就能直接用。再深挖一下会发现它还处理了不少脏活URL 解析它会解析每个资源的真实路径去掉查询字符串给没有扩展名的文件按内容类型补上.css、.js、.html后缀Data URI 识别内联在代码里的 base64 图片会被单独提取出来而不是被当成乱码丢掉重复资源去重同一 URL 在静态资源和网络请求里被记录两次时自动去重万一真出现同名文件冲突也会智能重命名避免覆盖跨域资源webpack://、ng://这类特殊协议源也能处理跨域文件不在话下ZIP 打包所有文件最终压成一个 ZIP 下载不会让你手动保存几十个文件。如果一次要分析多个网站面板里还有 Add URLs 按钮弹出解析窗口输入 URL 列表它就会逐个页面抓取循环打包。几个值得点赞的小细节 ✨用久了才发现这个扩展的很多体贴藏在细节里不是能跑那么简单。① 代码美化下载即阅读下载的文件在写入 ZIP 之前可以用 Prettier 自动格式化。开启Beautify HTML, CSS, JS, JSON files选项后压缩成一行的混淆代码会被重新排版成整齐的可读格式。对想研究别人代码的人来说这一步省去了打开后手动 beautify 的麻烦。② 忽略空文件告别垃圾数据有些请求返回的是空 body 或纯占位符开启Ignore no content file后这类文件会被直接跳过下载包里不会出现一堆毫无价值的空文件。③ 下载日志成功失败一目了然每次下载都有完整日志记录并按Success / Fail / No Content三档分类。哪些文件没抓到、为什么没抓到一目了然排查问题不用靠猜。④ 深色主题熬夜党的福音界面自带深色主题配色舒服不刺眼长时间盯着分析代码也不会觉得疲劳。说实话这一点对经常晚上工作的开发者来说体验提升是实打实的。还能玩出什么花样️除了常规用法这个项目还藏着一些进阶玩法。项目里有一个auto.js配合auto.json里的 URL 列表可以用 Puppeteer 做全自动批量抓取——无头浏览器挨个访问站点、自动收集网络响应、按域名建目录落盘。如果你有 CI/CD 流程或者想定时扒一批网站资源做素材库完全可以把它接进自动化管线。另外扩展内部还保留了 0.1.8、0.1.9 等历史版本的界面资源可以在面板里切换旧版界面。对喜欢折腾的人来说这也是个不错的考古彩蛋。写在最后 回到开头那个深夜加班的场景。如果小赵当时装了 ResourcesSaverExt他需要做的只是打开 DevTools → 切到 ResourcesSaver 面板 → 点一下 Save All Resources。然后他就可以去泡杯咖啡回来看一眼下载日志拿着结构完整的资源包开始研究竞品的实现。工具的意义从来不是让你变得更忙而是把那些重复、琐碎、毫无技术含量的劳动压缩成一次点击让你把时间花在真正重要的地方。下次再看到值得学习的网站别再一个文件一个文件地右键了。装好 ResourcesSaverExt让一键下载网页资源成为你的肌肉记忆——你会发现收藏夹里那些改天再研究的网站终于到了兑现的时候。【免费下载链接】ResourcesSaverExtChrome Extension for one click downloading all resources files and keeping folder structures.项目地址: https://gitcode.com/gh_mirrors/re/ResourcesSaverExt创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考