Chrome 浏览器扩展图片提取大师

图片提取大师 🖼️

一个功能强大的Chrome浏览器扩展，可以提取网页中的所有图片，包括img标签图片、CSS背景图片、Base64图片和SVG图片。支持筛选、排序、预览和批量下载。

🆕 v1.2.1 - 智能筛选版（尺寸多选 + 面积优先排序）

全新体验！ 现在使用独立页面模式，不再是弹出窗口。点击扩展图标会在新标签页中打开应用，让您可以：

✨ 自由切换浏览器标签页而不关闭应用
✨ 自动持续提取 - 页面新增图片自动检测和添加
✨ 快捷键多选 - Ctrl+点击、Shift+范围选择，像操作文件一样
✨ 尺寸快速筛选（多选） - 支持同时选择多个尺寸（如710×320 与 1920×1080）
✨ 享受全屏显示的宽敞空间
✨ 提取的图片永久保存在页面中

✨ 功能特点

🔍 全面提取：自动提取页面中的所有图片类型
- <img> 标签图片
- CSS背景图片（background-image）
- Base64编码图片
- SVG矢量图
🔄 自动持续提取（新功能！）：
- 开启开关后自动监测页面新图片
- 每5秒自动扫描一次
- 新图片自动添加到列表
- 无需手动重复提取
- 适合动态加载和滚动浏览
🎯 快捷键多选（新功能！）：
- Ctrl + 点击：多选/取消，像Windows 11文件管理器
- Shift + 点击：范围选择，快速选中一批图片
- 组合使用，灵活高效
📐 尺寸快速筛选（新功能，已支持多选）：
- 自动识别所有图片尺寸
- 点击尺寸按钮（如710×320）一键筛选，支持多选尺寸
- 按面积（宽×高）从大到小排序；同面积按数量从多到少
- 最多显示20个尺寸；支持全选、全不选与清除筛选
📊 智能筛选：
- 按图片类型筛选（IMG/背景/Base64）
- 按最小尺寸筛选（宽度×高度）
- 实时过滤显示
🔢 多种排序：
- 默认顺序
- 按大小排序（面积）
- 按宽度排序
- 按高度排序
💾 灵活下载：
- 单张图片快速下载
- 批量选择打包下载
- 全选/取消全选/反选功能
- 支持Base64图片直接下载
🎨 美观界面：
- 现代化渐变设计
- 响应式网格布局
- 图片信息实时显示
- 流畅的动画效果

📦 安装方法

方法一：开发者模式安装（推荐）

下载本项目的所有文件到本地文件夹
打开Chrome浏览器，进入扩展程序页面：
- 在地址栏输入：chrome://extensions/
- 或者：菜单 → 更多工具 → 扩展程序
开启右上角的"开发者模式"
点击"加载已解压的扩展程序"
选择项目文件夹
安装完成！插件图标会出现在浏览器工具栏

方法二：生成图标（可选）

项目提供了SVG图标文件，如果需要PNG格式，可以使用在线工具转换：

打开 icons/icon.svg
使用在线SVG转PNG工具（如 cloudconvert.com）
生成 16x16、48x48、128x128 三个尺寸的PNG文件
重命名为 icon16.png、icon48.png、icon128.png
放入 icons 文件夹

🚀 使用方法

基本使用

打开扩展：点击浏览器工具栏的扩展图标
- 会在新标签页中打开独立应用页面
选择目标页面：在页面顶部下拉菜单中选择要提取图片的页面
提取图片：点击右上角"提取当前页面图片"按钮，等待扫描完成

自动持续提取（推荐！）

开启自动提取 ：
- 点击右上角的"自动持续提取"开关
- 系统每5秒自动检测新图片
- 在网页上滚动浏览，新图片自动添加
- 无需手动重复点击提取按钮

快捷键多选（超快！）

高效选择图片 ：
- 普通点击：切换选中状态
- Ctrl + 点击：多选图片（Mac用户用Cmd）
- Shift + 点击：范围选择（从上一张到当前张）
- 组合使用快捷键，效率飞升

其他功能

筛选和排序：
- 使用排序下拉菜单改变图片顺序
- 使用筛选下拉菜单选择图片类型
- 设置最小尺寸过滤小图片
批量操作：
- 使用"全选"/"取消全选"/"反选"按钮
下载图片：
- 点击图片右上角的💾按钮下载单张
- 选中多张后点击"下载选中"批量下载
清空列表：点击"清空"按钮可以清空所有图片，重新开始

📸 功能截图

插件界面包含：

顶部控制栏：提取按钮
筛选控制区：排序、筛选、尺寸过滤
统计信息栏：图片数量、选中数量、操作按钮
图片网格：瀑布流展示所有图片

🛠️ 技术栈

Manifest V3：使用最新的Chrome扩展规范
原生JavaScript：无依赖，轻量高效
CSS3：现代化样式和动画效果
Chrome APIs ：
- chrome.scripting - 脚本注入
- chrome.downloads - 文件下载
- chrome.tabs - 标签页管理

📂 项目结构

复制代码

图片提取大师/
├── manifest.json              # 扩展配置文件
├── app.html                   # 独立应用页面（主界面）
├── app.js                     # 应用页面逻辑
├── app.css                    # 应用页面样式
├── background.js              # 后台服务worker
├── content.js                 # 内容脚本
├── popup.html                 # 弹出窗口（备用）
├── popup.js                   # 弹出窗口逻辑（备用）
├── styles.css                 # 弹出窗口样式（备用）
├── icons/                     # 图标文件夹
│   ├── icon.svg               # SVG图标
│   ├── icon16.png             # 16x16 PNG图标（可选）
│   ├── icon48.png             # 48x48 PNG图标（可选）
│   └── icon128.png            # 128x128 PNG图标（可选）
├── generate-icons.html        # 图标生成工具
├── README.md                  # 完整项目文档
├── 使用说明-独立页面版.txt    # 详细使用说明
├── 快速开始.md                # 快速入门指南
└── 安装指南.txt               # 安装步骤说明

⚙️ 权限说明

本扩展需要以下权限：

activeTab - 访问当前标签页内容（提取图片）
downloads - 下载图片到本地
scripting - 在页面中注入脚本
tabs - 获取标签页列表（选择提取目标）
<all_urls> - 访问所有网站（用于提取图片）

🔒 隐私保护

✅ 所有数据处理均在本地完成
✅ 不收集任何用户数据
✅ 不向任何服务器发送信息
✅ 开源透明，代码可审查

🐛 常见问题

Q: 点击扩展图标没反应？

A: 检查是否已正确安装扩展，并且开启了开发者模式。首次点击会打开新标签页。

Q: 为什么有些图片无法下载？

A: 某些图片可能受CORS跨域限制，建议右键"在新标签页中打开图片"后手动保存。

Q: 切换标签页后图片会丢失吗？

A: 不会！这正是独立页面版的优势。只要不关闭扩展页面，提取的图片就会一直保存。

Q: 可以同时提取多个页面的图片吗？

A: 可以！在扩展页面选择不同的目标页面，多次点击"提取"按钮，所有图片会累积显示。

Q: 提取的图片数量很少？

A: 降低"最小尺寸"的设置值，可以提取更多小尺寸图片。

Q: 无法提取某些页面？

A: chrome://、edge:// 等系统页面出于安全考虑无法提取。普通网页都可以正常提取。

🔄 更新日志

v1.2.1 (2025-10-20)

📐 尺寸筛选支持多选（新增全选/全不选/清除筛选）
🧮 尺寸标签改为"按面积优先、数量次之"的排序
⚡ 体验优化：标签状态与数量指示更清晰

v1.2.0 (2025-10-20)

📐 新增尺寸快速筛选功能 - 一键查看特定尺寸图片
✨ 优化自动识别所有尺寸并按数量排序
🎨 增强美观的渐变按钮和流畅动画
🚀 提升筛选效率30-60倍

v1.1.0 (2025-10-20)

🔥 新增自动持续提取功能 - 页面新增图片自动检测
🎯 新增快捷键多选功能 - Ctrl+点击、Shift+范围选择
✨ 优化选择体验 - 类似Windows 11文件管理器
🚀 提升使用效率 - 无需手动重复操作

v1.0.0 (2025-10-20)

✨ 首次发布
🎯 支持多种图片类型提取
📊 支持筛选和排序功能
💾 支持单张和批量下载
🎨 现代化UI设计

📝 开发说明

如需二次开发，请注意：

使用Manifest V3规范
修改代码后需要在扩展页面点击"重新加载"
调试时可以在popup页面右键选择"检查"打开开发者工具

📄 许可证

MIT License - 可自由使用和修改

🤝 贡献

欢迎提交Issue和Pull Request！

📧 联系方式

如有问题或建议，欢迎反馈！

享受使用图片提取大师！ 🎉
github地址：https://github.com/regtet/ImageExtraction

Chrome 浏览器扩展图片 提取大师