我花了2小时手动保存网页资源直到用上 ResourcesSaverExt 这枚一键全下的 Chrome 扩展【免费下载链接】ResourcesSaverExtChrome Extension for one click downloading all resources files and keeping folder structures.项目地址: https://gitcode.com/gh_mirrors/re/ResourcesSaverExt凌晨一点我盯着浏览器里那个设计精美的落地页已经第 17 次点下右键 → 另存为。CSS 文件存下来了可里面的图片路径全是绝对地址JS 文件存下来了可它引用的字体文件还躺在对方的服务器上。整个文件夹一团乱麻第二天醒来我甚至记不清哪个文件是哪个页面的。如果你也经历过这种扒网页资源的深夜崩溃那么 ResourcesSaverExt 就是为你准备的解药——这是一款 Chrome 扩展一次点击就能下载网页上的所有静态资源与网络请求文件并完整保留原有的文件夹层级。手动保存网页资源的 3 个真实困境先别急着安装我们把话说透。手动收集网页资源你大概率踩过这三个坑第一个坑引用关系全断。网页上的 CSS 里写着url(../fonts/xxx.woff)图片标签指向/assets/img/logo.png你右键保存下来的只是一个孤零零的文件放进本地项目里立刻 404。想还原结构你得一个个手动建目录、改路径。第二个坑跨域资源只能干瞪眼。很多站点的静态资源放在 CDN 或第三方域名下浏览器地址栏里根本没法直接另存为。你只能打开 DevTools 的 Network 面板在几十上百条请求里人肉筛选复制 URL再逐个用新标签页打开下载。第三个坑网络请求里的隐形资源根本看不到。图片、CSS、JS 这类静态资源还算好找但那些通过 XHR 拉取的数据、动态注入的脚本呢等页面加载完它们早就从 DOM 里消失了你连它在哪都不知道。这三个坑叠加起来一个稍复杂点的页面手动收集要花掉你 12 小时而且结果几乎不可复用。ResourcesSaverExt 如何做到一次点击下载全部资源先看效果对比。手动模式是人肉遍历 逐个另存为 手动建目录而 ResourcesSaverExt 的逻辑只有三步监听 → 归类 → 打包。它挂在 Chrome DevTools 面板里像一个贴身的资源管家。打开任意页面它会同时从两个来源收集资源一类是页面加载时的静态资源CSS、JS、图片、字体另一类是你的网络请求Network 里的 XHR、Fetch 等。你在面板顶部能看到两组实时统计比如 Static Resources: 570 / Network Resources: 116数字清清楚楚。点击Save All Resources后真正厉害的事情发生了所有资源会按原始 URL 的路径结构打包进一个 zip 文件文件名就是当前网站的域名。图片回到assets/img/下字体回到fonts/下CSS 内部的引用路径依然有效——你拿到的是一个能直接跑起来的站点副本而不是一堆散件。这一步正是它名字里 Saver 的含义不仅保存内容还保存秩序。3 步完成本地安装从 clone 到加载扩展上手比你想的简单整个安装流程只需要三步命令加一个文件夹选择。第一步拉取源码并安装依赖。打开终端依次执行git clone https://gitcode.com/gh_mirrors/re/ResourcesSaverExt cd ResourcesSaverExt yarn项目使用 Yarn 管理依赖Node.js 版本需与项目根目录.nvmrc中的要求匹配。第二步构建扩展。运行yarn build构建产物会自动输出到unpacked2x目录——这是构建脚本在 package.json 里配置好的输出路径源码位于src/下静态资源则由yarn cp一并复制过去。第三步加载到 Chrome。打开chrome://extensions/开启右上角开发者模式点击加载已解压的扩展程序选中项目里的unpacked2x文件夹。加载成功后打开任意网页在 DevTools 里你就能看到名为 Save All Resources 的扩展面板了。实战3 个真实场景的完整链路场景一前端开发者分析竞品网站的代码结构假设你想研究一个优秀落地页的布局实现。打开目标站点切到 ResourcesSaverExt 面板等它把静态资源和网络请求全部捕获完毕点击Save All Resources。一两分钟后你得到一个域名.zip解压后目录结构和线上完全一致——CSS 在哪、JS 在哪、图片命名规则是什么一目了然。整个过程不需要打开 Network 面板不需要复制任何 URL。更贴心的是面板支持Add URLs批量操作。点击 Add URLs 按钮会弹出一个解析窗口你可以粘贴一串网址扩展会自动逐页跳转、逐页收集把多个页面的资源按顺序全部下载下来。想研究整站而非单页这个功能就是为你准备的。场景二设计师批量收集灵感素材设计师逛 Dribbble、Behance 这类站点的痛点是图片大多是懒加载的滚动到底才加载手动存图容易漏。用 ResourcesSaverExt 就不用管这些——它的资源收集发生在 DevTools 层面页面加载过的请求它都能捕获SVG 图标、WebP 图片、图标字体一个都不会漏。下载完成后你甚至可以在面板里展开 Download Log按成功 / 失败 / 无内容三档查看每个资源的保存结果失败的条目会标红方便你单独排查是跨域限制还是服务器拒绝访问。2 个让下载结果更干净的小开关开关一Beautify 美化代码。生产环境的 JS 和 CSS 往往被压缩成一行想读懂很难。在面板的选项区勾选美化代码下载时扩展会调用内置的 prettier实现见src/devtoolApp/utils/file.js自动格式化 HTML、CSS、JS、JSON 文件。你拿到手的直接是可读的源码省去再跑一遍格式化工具的功夫。开关二忽略无内容文件。有些请求会返回空内容勾选后这些空文件会被自动排除不会在 zip 里留下一堆 0 字节的占位垃圾。选项的状态管理逻辑在src/devtoolApp/store/option/index.js默认两项都是关闭的按需开启即可。另外界面支持深色主题见screenshot-2-dark.png长时间对着 DevTools 分析资源时对眼睛友好不少。现在把你浪费的那 2 小时要回来回头再看那个让我崩溃的深夜真正昂贵的不是下载文件本身而是判断该下什么、重建目录结构、修复引用路径这一连串决策。ResourcesSaverExt 把这三件事压缩成了点击一次。它是开源的源码结构清晰——React 界面在src/devtoolApp/状态管理在src/devtoolApp/store/插件系统在plugins/parcel-namer-resource-saver/想改逻辑、加功能门槛并不高。下一步行动很明确按上面的三步装好扩展打开你最近在研究的那家网站点一次Save All Resources。感受一下过去两小时的工作量变成一次点击是什么体验。【免费下载链接】ResourcesSaverExtChrome Extension for one click downloading all resources files and keeping folder structures.项目地址: https://gitcode.com/gh_mirrors/re/ResourcesSaverExt创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考