告别"右键另存为"！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），仅供参考
