如何快速下载网页资源？这款Chrome扩展让你一键保存所有文件并保持原结构 🚀

ResourcesSaverExt 是一款强大的Chrome扩展程序，专为需要批量下载网页资源的用户设计。无论是开发者、设计师还是普通用户，都能通过它一键下载网页上的所有资源文件，并自动保持原有的文件夹结构，极大提升资源收集效率！

📌 为什么选择 ResourcesSaverExt？核心优势解析

传统的网页资源下载方式往往需要手动逐个保存，不仅耗时，还容易丢失文件间的层级关系。而ResourcesSaverExt通过以下特性解决这些痛点：

• 一键全选下载：无需繁琐操作，点击扩展图标即可批量获取图片、脚本、样式表等资源
• 智能目录还原：自动解析网页资源引用关系，完美复现服务器端文件夹结构
• 轻量高效：纯前端实现，无需后端支持，不占用额外系统资源
• 完全免费：开源项目，无广告无内购，代码透明可审计

📸 直观体验：扩展界面与使用效果展示

下面是扩展的实际运行界面，左侧为资源列表控制面板，右侧为下载日志实时反馈：

启用扩展后访问任意网页，即可看到资源嗅探结果，支持按类型筛选（图片/脚本/CSS等）：

🛠️ 3分钟快速上手：从安装到使用的完整指南

🔧 准备工作：环境要求检查

在开始安装前，请确保你的开发环境满足以下条件：

• Node.js 版本需匹配项目中 .nvmrc 文件指定版本
• 已安装 Yarn 包管理器（推荐版本 1.22+）

📥 安装步骤：四步完成配置

步骤 1：克隆项目仓库

git clone https://gitcode.com/gh_mirrors/re/ResourcesSaverExt

步骤 2：安装项目依赖

进入项目目录后执行：

cd ResourcesSaverExt
yarn install

步骤 3：构建扩展文件

yarn build

构建完成后，扩展文件将生成在 unpacked2x 目录下。

步骤 4：加载到Chrome浏览器

1. 打开Chrome浏览器，输入 chrome://extensions/ 进入扩展管理页面
2. 开启右上角「开发者模式」开关
3. 点击「加载已解压的扩展程序」，选择项目中的 unpacked2x 文件夹
4. 看到扩展图标出现在浏览器工具栏即表示安装成功 ✅

🚀 开始使用：下载网页资源的正确姿势

1. 访问需要下载资源的目标网页
2. 点击浏览器工具栏中的ResourcesSaverExt图标
3. 在弹出的控制面板中，选择需要下载的资源类型（可全选）
4. 点击「保存全部资源」按钮，扩展将自动处理并打包下载

💡 小技巧：对于包含大量图片的网页，建议先使用「筛选功能」仅勾选图片类型，可大幅提升下载速度！

⚙️ 高级功能：自定义你的下载体验

扩展支持通过设置面板调整下载参数，主要配置项位于 src/devtoolApp/store/option/index.js 文件，可自定义：

• 资源文件大小过滤阈值
• 自动重命名规则
• 下载并发数限制
• 日志保存路径

📂 项目结构速览：核心模块解析

src/
├── devtoolApp/           # 扩展主应用
│   ├── components/       # UI组件（按钮/列表/切换器等）
│   ├── hooks/            # 核心逻辑钩子（资源录制/保存等）
│   ├── store/            # 状态管理（下载列表/配置选项等）
│   └── utils/            # 工具函数（文件处理/资源解析）
└── static/               # 静态资源（图标/配置文件）

核心下载逻辑实现于 src/devtoolApp/hooks/useAppSaveAllResource.js，感兴趣的开发者可查看源码了解资源嗅探和打包原理。

❓ 常见问题解答

Q：扩展支持哪些资源类型下载？

A：目前支持图片（jpg/png/svg等）、脚本文件（js）、样式表（css）、字体文件（woff/ttf）及媒体文件（mp4/mp3）。

Q：下载的文件保存在哪里？

A：默认使用浏览器的「下载」文件夹，可在Chrome设置中修改默认路径。

Q：为什么部分资源无法下载？

A：可能是由于网站设置了CORS限制或资源为动态加载，建议刷新页面后重新尝试。

🎯 总结：提升资源管理效率的必备工具

无论是网页素材收集、前端项目分析还是学习资料备份，ResourcesSaverExt都能成为你的得力助手。通过自动化的资源嗅探和结构化保存，让你从繁琐的手动操作中解放出来，专注于更有价值的创意工作！

如果觉得这个项目有帮助，欢迎给项目仓库点星支持 ⭐，也可以关注开发者后续更新。

📝 提示：项目持续维护中，最新功能可通过 git pull 更新本地代码后重新构建获取。