Image Hawk - 图片抓取与转换工具

🦅 像鹰一样敏锐地捕捉网页中的每一张图片

一个功能强大的浏览器扩展，支持 12 种图片来源检测，提供 JPEG、PNG、WebP、GIF、AVIF、SVG 六种格式的下载与转换功能。支持防盗链图片下载、动态内容检测、精准定位、高级过滤规则、侧边栏视图等专业功能。

📦 安装方法

方法1：下载 Release（推荐）

在 Releases 页面下载最新版本的 image-hawk-v1.0.0.zip
解压到本地任意文件夹
打开 Chrome/Edge 浏览器，访问 chrome://extensions/ 或 edge://extensions/
开启右上角的"开发者模式"
点击"加载已解压的扩展程序"
选择刚才解压的文件夹
✅ 安装完成！

方法2：从源码构建

# 1. 克隆仓库
git clone https://github.com/HatsuSumi/Image-Hawk.git
cd Image-Hawk

# 2. 安装依赖
npm install

# 3. 构建项目
npm run build

# 4. 在浏览器中加载 dist 文件夹（同上方法1的步骤3-7）

💡 说明

✅ 完全免费：无需支付任何费用
✅ 功能完整：包含所有功能，无任何限制
✅ 开源透明：所有代码公开可审查
✅ 兼容性强：支持 Chrome、Edge 等 Chromium 内核浏览器
⚠️ 开发者模式提示：手动安装会在启动时提示"请停用以开发者模式运行的扩展程序"，可以忽略或点击"取消"

✨ 核心特性

🔍 智能图片检测

多源检测：支持 13 种图片来源检测
- <img> 标签（src、srcset、data-src 等懒加载属性，优先检测 data-src）
- <a> 标签图片链接属性（box-img、data-image、data-img、data-lightbox、data-fancybox）
- CSS 背景图片（background-image）
- CSS 伪元素背景图（::before、::after）
- <picture> 元素
- SVG <image> 元素
- Base64 内嵌图片（data:image）
- <video poster> 视频封面
- <input type="image"> 图片按钮
- <object> 和 <embed> 标签
- CSS border-image、mask-image、list-style-image
- Favicon（网站图标）
- 其他浏览器插件注入的图片
来源标识显示：每张图片卡片都显示蓝色来源标签
- "本地上传"（isFromLocal）
- "手动选择"（isManuallySelected）
- "其他浏览器插件"（isFromExtension）
- "网页检测"（默认）
智能去重：URL 规范化技术，自动过滤同一图片的不同尺寸变体
防盗链处理：自动绕过 403 错误和 Referer 限制，支持防盗链保护的图片
动态检测：实时监测页面动态内容（tooltip、弹窗、懒加载等）中的新增图片
知名服务识别：智能识别 Unsplash、Pexels、阿里云 CDN、腾讯图片等服务，以及动态图片服务（如 .php?id=xxx）
精准定位：4 层查找策略，可快速定位图片在页面中的位置并高亮显示

⚙️ 高级过滤规则

尺寸过滤：支持按最小宽度/高度过滤（px）
文件大小过滤：支持按最小/最大文件大小过滤，自动单位转换（B/KB/MB/GB）
可见性过滤：仅检测可见图片，自动排除 display:none、visibility:hidden、opacity<0.1、hidden 属性、宽或高=0 的隐藏元素
可视区域过滤：仅检测当前视口内的图片，过滤需要滚动才能看到的图片（滚动后需重新检测）
格式类型过滤：可精确控制检测哪些格式（JPEG/PNG/WebP/GIF/AVIF/SVG/ICO/其他），支持单独启用/禁用
- 格式识别基于 URL 扩展名，对于动态图片服务（如 .php）或 blob: URL，会在预加载时从 HTTP Content-Type 响应头识别真实格式
类名关键词过滤：只检测类名包含指定关键词的图片，支持空格或顿号分隔多个关键词，满足任一即可
占位符排除：自动识别并排除 placeholder、loading、spinner 等占位符图片（包括短于 200 字符的 data URLs）
自定义规则：可按需启用/禁用 12 种检测类型，灵活配置检测范围
特殊豁免：手动选择和本地上传的图片不受任何过滤条件限制

🎨 格式转换与下载

六种格式支持：JPEG、PNG、WebP、GIF、AVIF、SVG
- GIF 转换：只保留第一帧（动画变静态图）
- AVIF 支持：下一代高压缩率格式
- SVG 特殊处理：矢量格式仅支持下载，不支持转换
本地图片上传：支持上传本地图片进行格式转换，无需从网页检测
- 本地图片不受任何过滤条件限制
- 显示"本地上传"来源标识
- ⚠️ 注意：本地上传的图片仅在当前会话有效，关闭扩展后会丢失（不会被缓存）
质量可调：0-100% 质量滑块控制
单张转换并下载：转换完成后自动下载
批量操作：批量转换完成后自动打包成 ZIP 文件下载（无需再次点击）
实时预览：转换后即时显示预览效果
智能文件名：保留原图名称 + 时间戳 + 新格式扩展名
流畅动画：自定义下拉菜单，展开/折叠动画流畅优雅

📦 数据持久化

自动缓存：关闭扩展不丢失数据，30 分钟内在同一页面自动恢复上次的图片列表
页面切换自动清理：切换到不同页面 URL 时会自动清除旧缓存
智能存储：只缓存轻量级元数据，不占用过多存储空间
配置自动保存：设置项修改后自动保存，点击"应用并关闭"将重新应用过滤规则到当前图片列表
特殊处理：本地上传的图片不会被缓存（仅当前会话有效）

🚀 性能优化

批量预加载：每次 3 张并发加载，避免浏览器卡顿
实时进度：显示加载进度条（已加载/总数）
即时过滤：预加载过程中立即过滤不符合条件的图片，节省流量和时间
可中止任务：支持中止正在进行的预加载任务

📍 图片定位与高亮

4 层查找策略：99% 覆盖率的精准定位算法
平滑滚动：使用 easeInOutCubic 缓动函数，丝滑滚动到图片位置
智能位置校准：滚动完成后自动检测偏移并微调位置（适配动态内容）
橙色边框高亮：使用 box-shadow 实现，不会被 overflow:hidden 裁剪
自动层级调整：设置 z-index: 999999 确保边框始终可见
淡入淡出动画：边框显示/隐藏带有 0.3 秒过渡动画，视觉体验流畅
同一时刻只有一个图片高亮：查看其他图片时自动移除旧边框
技术细节：详见下文"核心功能详解 -> 图片定位系统"

❓ 常见问题（FAQ）

一键查看：点击工具栏"常见问题"按钮，模态框显示在网页上（非扩展弹窗）
完整 Q&A：涵盖 7 个常见问题的详细解答
1. 插件能检测到哪些图片，不能检测到哪些图片？
2. 为什么有些图片显示"防盗链保护"？
3. 手动选择模式如何使用？
4. 图片转换格式有什么限制？
5. 设置中的过滤条件如何生效？
6. "查看在页面位置"功能如何工作？
7. 为什么点击"查看在页面位置"按钮没反应？
精美交互：渐变标题栏、美化滚动条、淡入淡出动画、防滚动穿透

🛠️ 开发者选项

元素信息提取：每个图片卡片下方提供"开发者选项"下拉菜单
一键复制：类名、CSS选择器、元素HTML、URL、Alt文本、尺寸信息
JSON导出：完整的图片元数据（包含来源、格式、尺寸、是否来自插件等）
视觉反馈：复制成功后显示绿色渐变提示动画，1.7秒后自动淡出

🖼️ 侧边栏视图

Chrome 114+ / Edge 114+ 支持：使用 Chrome Side Panel API 提供持久化侧边栏视图
一键切换：点击工具栏"侧边栏"按钮，在浏览器右侧打开侧边栏
独立空间：侧边栏不会遮挡网页内容，解决"查看在页面位置"功能可能与浮窗重叠的问题
完整功能：侧边栏包含所有弹窗功能（检测、转换、过滤、设置等）
自由选择：可根据使用习惯在浮窗和侧边栏之间自由切换

🛠️ 技术栈

框架：React 19 + TypeScript
构建工具：Vite 6
样式：Tailwind CSS 3
图片处理：Canvas API
打包：JSZip 3
扩展标准：Chrome Extension Manifest V3
侧边栏：Chrome Side Panel API（Chrome 114+）

📂 项目结构

Image-Hawk/
├── src/
│   ├── background/              # 后台服务
│   │   └── service-worker.ts    # Service Worker (处理下载和图片代理)
│   ├── content/                 # 内容脚本
│   │   └── content.ts           # 页面交互逻辑（检测、选择、动态监听）
│   ├── popup/                   # 弹出窗口
│   │   ├── Popup.tsx            # 主界面组件
│   │   ├── ImageGallery.tsx     # 图片列表组件
│   │   └── ImageConverter.tsx   # 转换控制组件
│   ├── sidepanel/               # 侧边栏视图
│   │   ├── SidePanel.tsx        # 侧边栏主组件
│   │   ├── index.tsx            # 入口文件
│   │   ├── index.html           # HTML 模板
│   │   └── index.css            # 样式文件
│   ├── utils/                   # 工具函数
│   │   ├── imageDetector.ts     # 图片检测核心（多源检测、去重、过滤）
│   │   ├── imageConverter.ts    # 格式转换核心（Canvas API）
│   │   ├── imageWorker.ts       # 图片处理 Worker
│   │   ├── conversionQueue.ts   # 转换队列管理（控制并发，默认3个）
│   │   └── memoryManager.ts     # 内存管理（Object URL清理，内存监控）
│   └── types/                   # TypeScript类型定义
│       └── index.ts
├── public/
│   ├── manifest.json            # 扩展配置文件
│   └── icons/                   # 图标资源
├── scripts/
│   └── build-extension.js       # 自定义构建脚本
├── package.json                 # 项目依赖和脚本配置
├── tsconfig.json                # TypeScript 编译配置
├── vite.config.ts               # Vite 构建配置
├── tailwind.config.js           # Tailwind CSS 配置
└── README.md                    # 项目说明文档

📊 项目规模

文件统计

总文件数：31 个
- TypeScript文件：15 个
- JSON文件：5 个
- JavaScript文件：3 个
- Markdown文档：3 个
- CSS文件：2 个
- HTML文件：2 个
- License文件：1 个

代码规模

代码总行数：8,634 行（不含空行、注释）
- TypeScript：4,835 行（56.0%）
- JSON：3,500 行（40.5%）
- JavaScript：169 行（2.0%）
- CSS：106 行（1.2%）
- HTML：24 行（0.3%）
字符总数：307,925 字符（不含注释）
- TypeScript：184,927 字符（60.1%）
- JSON：116,223 字符（37.7%）
- JavaScript：4,272 字符（1.4%）
- CSS：1,972 字符（0.6%）
- HTML：531 字符（0.2%）

💡 数据来源：以上数据基于项目内的 project_stats.py 统计生成

📊 统计工具 GitHub 仓库链接：Omni-Project-Stats —— 90%项目通用，涵盖多个领域

🚀 快速开始

安装依赖

npm install

开发模式

npm run dev

构建扩展

npm run build

构建完成后，dist 目录将包含可安装的 Chrome 扩展文件。

在 Chrome 中加载扩展

打开 Chrome 浏览器
访问 chrome://extensions/
启用右上角的"开发者模式"
点击"加载已解压的扩展程序"
选择项目的 dist 目录
扩展安装完成！

📖 使用指南

基本使用

检测图片
- 访问任意网页
- 点击扩展图标
- 点击"检测图片"按钮
- 自动检测并预加载页面上的所有图片
手动选择
- 点击"手动选择"按钮
- 鼠标悬停在图片上会显示蓝色高亮效果
- 点击图片添加到列表（显示绿色边框）
- 再次点击已选中的图片可取消选择
- 按 ESC 键退出选择模式
- ⚠️ 注意：手动选择模式主要用于选择 <img> 标签的图片
- 对于 CSS 背景图、固定定位的背景等复杂情况，建议使用"检测图片"功能
本地上传
- 点击"上传图片以便转换"按钮
- 选择本地图片文件（支持多选）
- 图片会添加到列表顶部，显示"本地上传"来源标识
- 本地图片不受过滤条件限制
- ⚠️ 注意：本地上传的图片关闭扩展后会丢失（不会被缓存）
格式转换
- 勾选需要转换的图片
- 选择目标格式（JPEG/PNG/WebP/GIF/AVIF）
- 调整质量滑块（0-100%）
- 点击"批量转换并下载"
单张操作
- 点击图片卡片上的"转换并下载"按钮
- 自动转换为选定格式并下载

高级设置

点击工具栏的"设置"按钮打开高级设置面板：

检测规则配置

✅ <img> src 属性
✅ <img> srcset（高清）
✅ 懒加载属性
✅ CSS 背景图片
✅ <picture> 元素
✅ SVG <image> 元素
✅ Base64 内嵌图片
✅ CSS 伪元素背景图（::before、::after）
✅ <video poster> 视频封面
✅ <input type="image"> 图片按钮
✅ <object> 和 <embed> 标签
✅ CSS border-image
✅ CSS mask-image
✅ CSS list-style-image
✅ Favicon（网站图标）
✅ 知名服务识别
✅ 排除占位符图片
☑️ 只检测可见图片（过滤 display:none、visibility:hidden、opacity<0.1、hidden属性、宽或高=0）
☑️ 只检测可视区域（过滤视口外的图片，滚动后需重新检测）
☑️ 动态检测（自动检测 tooltip、弹窗等新增图片）

尺寸过滤

最小宽度：默认 50px
最小高度：默认 50px

文件大小过滤

最小大小：可输入 50、1MB、1.2GB...不同单位会自动转换为 KB
最大大小：同上

图片格式类型过滤

✅ JPEG / JPG
✅ PNG
✅ WebP
✅ GIF
✅ AVIF
✅ SVG
✅ ICO（图标）
✅ 其他/未知格式

类名关键词过滤

图片类名必须包含哪些字符：输入框，支持空格或顿号（、）分隔多个关键词
留空表示不过滤
满足任一关键词即可（或逻辑）
大小写不敏感，部分匹配

防盗链图片

对于有防盗链保护的图片（显示"防盗链保护"提示），扩展会自动尝试通过三层策略获取。如果仍然失败，可点击"页面下载"按钮，该按钮会：

✅ 利用页面权限直接下载图片到本地
✅ 同时更新图片预览（显示缩略图）
✅ 更新文件大小信息
✅ 清除"防盗链保护"标记

或使用"复制 URL"、"查看在页面位置"等功能。

技术细节：详见下文"核心功能详解 -> 防盗链绕过策略"

查看图片在页面中的位置

每张图片卡片下方都有"查看在页面位置"按钮，点击后页面会自动滚动到图片位置并显示橙色边框高亮（带淡入动画），同一时刻只有一个图片高亮。

💡 提示：如果使用浮窗模式时担心浮窗遮挡目标图片，可以点击工具栏的"侧边栏"按钮切换到侧边栏视图，侧边栏会固定在浏览器右侧，不会遮挡网页内容。

技术细节：详见下文"核心功能详解 -> 图片定位系统"

常见问题（FAQ）

点击工具栏的"常见问题"按钮，模态框会显示在网页上（不是扩展弹窗内），包含 7 个常见问题的详细解答。点击右上角的 × 或遮罩层可关闭。

🎯 核心功能详解

智能去重算法

扩展使用 URL 规范化技术进行去重：

// 移除尺寸参数：w, h, width, height, size, dpr
// 移除质量参数：q, quality
// 移除格式参数：fm, format, ext
// 移除缓存参数：_, timestamp, t, v
// 移除路径中的尺寸：/w_400/, /h_399/, /_1200x800/

这样可以将同一张图片的不同尺寸、质量、格式变体识别为同一张图片。

图片格式支持

格式	检测	转换	特殊说明
JPEG	✅	✅	转换为 JPEG 时透明背景会填充白色
PNG	✅	✅	支持透明背景
WebP	✅	✅	现代高压缩率格式
GIF	✅	✅	转换时只保留第一帧（动画变静态）
AVIF	✅	✅	下一代格式，压缩率更高
SVG	✅	❌	矢量格式，仅支持下载原文件
ICO	✅	❌	网站图标格式，仅支持检测
动态格式	✅	✅	`.php`、`.asp` 等动态图片服务，预加载时从 Content-Type 识别真实格式
Blob URL	✅	✅	Canvas 渲染网站使用的临时 URL，从 data-src 属性获取真实图片地址

图片定位系统（查看在页面位置）

4 层查找策略确保 99% 的图片都能被精准定位：

第 1 层：唯一 ID 查找
- 插件检测时会给每个元素注入 data-image-capture-id 属性
- 通过 document.querySelector('[data-image-capture-id="xxx"]') 精确查找
- 准确率：99%+
第 2 层：CSS 选择器 + URL 验证
- 使用插件生成的 CSS 选择器路径（包含 id、class、nth-of-type）
- 验证元素的 src 或 backgroundImage 是否与目标 URL 匹配
- 适用于：动态页面、元素位置变化的情况
第 3 层：遍历 <img> 标签
- 遍历所有 <img> 元素，通过 URL 模糊匹配查找
- 使用 URL 规范化技术（移除查询参数、锚点）
- 适用于：简单图片场景
第 4 层：遍历所有元素的背景图
- 遍历 document.querySelectorAll('*')
- 检查每个元素的 backgroundImage CSS 属性
- 提取 URL 并进行模糊匹配
- 适用于：CSS 背景图、复杂布局

定位后的视觉效果：

平滑滚动到图片位置（easeInOutCubic 缓动，800ms）
滚动完成后自动校准位置（检测偏移 > 50px 时微调，适配动态内容）
显示 4px 橙色边框（box-shadow: 0 0 0 4px #f59e0b）
自动设置 z-index: 999999 和 isolation: isolate 确保边框可见
对于 position: static 的元素，自动设置为 position: relative
边框淡入动画（0.3s transition）
同一时刻只有一个图片高亮
查看其他图片时，旧边框淡出，新边框淡入

防盗链绕过策略

Background Service Worker 三层策略（自动尝试，无需用户干预）：

策略1：简化请求头 + Origin（针对严格站点）
- 设置 Origin 和 Referer 请求头
- credentials: 'omit'
- cache: 'no-cache'
策略2：完全不带请求头（让浏览器自动处理）
- 最小化请求头
- credentials: 'omit'
策略3：完整请求头（模拟真实浏览器）
- 完整的 Accept、Accept-Language、Referer、User-Agent
- credentials: 'include'（包含 Cookies）

Content Script 备选方案：

Fetch 方法（使用页面上下文）
- 利用页面的 Cookies 和 Credentials
- credentials: 'same-origin'
Canvas 方法（最后备选）
- 直接加载图片到 Canvas
- 不设置 crossOrigin，利用页面凭证

代码架构：使用 tryFetchStrategies 函数统一管理策略，易于扩展和维护

动态图片检测

使用 MutationObserver 监听 DOM 变化：

增量检测：只检测新增的元素，避免重复
持久化去重：在整个 Observer 生命周期内保持 seenUrls
自动过滤：实时应用尺寸和文件大小过滤规则
智能停止：页面切换或扩展重新加载时自动清理

两阶段过滤

第一阶段：检测阶段（Content Script）

能获取 size 且符合条件 → 保留
能获取 size 但不符合条件 → 过滤掉
无法获取 size → 保留（等预加载后再判断）
特殊规则：手动选择和本地上传的图片不受任何过滤条件限制

第二阶段：预加载阶段（Popup）

下载图片并获取真实 size 和格式
应用格式类型过滤、类名关键词过滤、文件大小过滤
不符合条件 → 立即移除，不保存 dataUrl
节省流量和内存
特殊规则：手动选择和本地上传的图片跳过过滤

特殊图片检测

插件注入的图片：

可以检测到来自其他浏览器插件注入的图片
通过 URL 协议识别：chrome-extension://、moz-extension://、safari-extension://
在图片信息中会显示"其他浏览器插件注入的图片"标记

Base64 内嵌图片：

支持检测 data:image/* 格式的图片
自动过滤短于 200 字符的 data URLs（通常是占位符，如 1x1 透明像素）
可在设置中禁用 Base64 检测

Favicon（网站图标）：

支持检测 <link rel="icon">、<link rel="apple-touch-icon"> 等
自动识别 .ico 和 .svg 格式的图标
对于没有 sizes 属性的 favicon，默认设置为 32×32
⚠️ 限制：favicon 图片位于 <head> 标签中，无法在页面中定位和高亮显示（"查看在页面位置"按钮不会显示）

CSS 特殊属性：

border-image-source：边框图片
mask-image / -webkit-mask-image：遮罩图片
list-style-image：列表符号图片

⚠️ 使用限制

不支持的页面

以下页面无法使用扩展（浏览器安全限制）：

chrome:// 开头的页面
edge:// 开头的页面
about: 开头的页面
Chrome Web Store 页面
新标签页

已知限制

SVG 转换限制：SVG 是矢量格式，无法转换为光栅图（JPEG/PNG/WebP 等），仅支持下载原文件
GIF 动画限制：GIF 转换为其他格式时，只会保留第一帧，动画效果会丢失
Canvas/WebGL 图片：使用 Canvas 或 WebGL 动态绘制的图片无法检测
Shadow DOM：某些 Web Components 内部的图片可能无法检测（取决于 Shadow DOM 模式）
iframe 内容：iframe 内部的图片需要单独在 iframe 页面中检测
存储限制：缓存超过 50 张图片时可能触发存储配额限制
扩展上下文失效：扩展重新加载后，旧页面的 Content Script 会自动停止监听
侧边栏支持：侧边栏功能需要 Chrome 114+ 或 Edge 114+ 版本

🐛 故障排除

图片检测失败

问题：点击"检测图片"后没有反应

解决方案：

刷新页面（F5）后重试
检查是否为受限页面（如 chrome://）
打开浏览器控制台查看错误信息

图片加载失败

问题：图片显示"加载失败 ✕"或 🔒 图标

解决方案：

点击图片卡片上的"💾 页面下载"按钮
等待图片预加载完成（顶部进度条）
检查网站是否有防盗链保护

转换失败

问题：转换时显示错误

解决方案：

确保图片已预加载成功（显示绿色缩略图）
尝试其他格式
对于防盗链图片，先点击"💾 页面下载"

侧边栏打开失败

问题：点击"侧边栏"按钮后显示错误

解决方案：

确认浏览器版本是 Chrome 114+ 或 Edge 114+
在 chrome://extensions/ 或 edge://extensions/ 页面重新加载扩展
检查浏览器控制台是否有具体错误信息
如果仍然失败，可以继续使用浮窗模式

扩展无法加载

问题：加载扩展时出错

解决方案：

确保已运行 npm run build
检查 dist 目录是否存在
查看 Chrome 扩展页面的错误信息
尝试删除 dist 目录后重新构建

🔧 开发指南

修改代码

# 开发模式（带热更新）
npm run dev

# 修改代码后重新构建
npm run build

# 在 chrome://extensions/ 页面点击"重新加载"按钮

调试技巧

Popup 调试：右键点击扩展图标 → 检查弹出内容
Background 调试：扩展详情页 → 点击"Service Worker"
Content Script 调试：页面控制台（F12）查看日志
查看消息通信：所有日志都带有标识前缀（如 📥、✅、⚠️）

自定义配置

修改 src/utils/imageDetector.ts 中的 DEFAULT_DETECTION_CONFIG 可以调整默认检测规则：

export const DEFAULT_DETECTION_CONFIG: DetectionConfig = {
  detectImgSrc: true,              // <img> src 属性
  detectImgSrcset: true,            // <img> srcset 高清图
  detectLazyLoad: true,             // 懒加载属性
  detectCssBackground: true,        // CSS 背景图
  detectPicture: true,              // <picture> 元素
  detectSvgImage: true,             // SVG <image> 元素
  detectBase64: true,               // Base64 内嵌图片
  detectPseudoElements: true,       // CSS 伪元素背景图
  detectVideoPoster: true,          // <video poster>
  detectInputImage: true,           // <input type="image">
  detectObjectEmbed: true,          // <object> 和 <embed>
  detectBorderImage: true,          // CSS border-image
  detectMaskImage: true,            // CSS mask-image
  detectListStyleImage: true,       // CSS list-style-image
  detectFavicon: true,              // Favicon 图标
  detectKnownServices: true,        // 知名图片服务
  excludePlaceholders: true,        // 排除占位符
  onlyVisible: false,               // 只检测可见图片
  onlyInViewport: false,            // 只检测可视区域
  minWidth: 50,                     // 最小宽度（px）
  minHeight: 50,                    // 最小高度（px）
  minFileSize: 0,                   // 最小文件大小（KB，0=不限制）
  maxFileSize: 0,                   // 最大文件大小（KB，0=不限制）
  enableDynamicDetection: false,    // 动态检测（默认关闭）
  // 图片格式类型过滤（默认全部允许）
  allowJpeg: true,                  // 允许 JPEG/JPG 格式
  allowPng: true,                   // 允许 PNG 格式
  allowWebp: true,                  // 允许 WebP 格式
  allowGif: true,                   // 允许 GIF 格式
  allowAvif: true,                  // 允许 AVIF 格式
  allowSvg: true,                   // 允许 SVG 格式
  allowIco: true,                   // 允许 ICO 格式
  allowOther: true,                 // 允许其他/未知格式
  classNameKeywords: '',            // 类名关键词过滤（空=不过滤，多个关键词用空格或顿号分隔）
};

📄 许可证

MIT License

💡 技术亮点

Manifest V3 最新标准 + React 19 + TypeScript + Vite 6 快速构建
模块化设计：职责分离，代码清晰易维护
唯一 ID 系统（data-image-capture-id）+ CSS 选择器生成（id + class + nth-of-type）
URL 规范化：移除查询参数、尺寸、质量、缓存参数，智能去重
双重去重保护：规范化 URL + Set 去重
实时进度显示：加载进度、转换进度、ZIP 打包进度
配置持久化：chrome.storage.local 自动保存
扩展上下文检查：防止僵尸脚本
资源自动清理：MutationObserver、事件监听器、DOM 元素

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
public		public
scripts		scripts
src		src
.gitignore		.gitignore
LICENSE		LICENSE
PUBLISH.md		PUBLISH.md
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
project_stats.py		project_stats.py
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

License

HatsuSumi/Image-Hawk

Folders and files

Latest commit

History

Repository files navigation

Image Hawk - 图片抓取与转换工具

📦 安装方法

方法1：下载 Release（推荐）

方法2：从源码构建

💡 说明

✨ 核心特性

🔍 智能图片检测

⚙️ 高级过滤规则

🎨 格式转换与下载

📦 数据持久化

🚀 性能优化

📍 图片定位与高亮

❓ 常见问题（FAQ）

🛠️ 开发者选项

🖼️ 侧边栏视图

🛠️ 技术栈

📂 项目结构

📊 项目规模

文件统计

代码规模

🚀 快速开始

安装依赖

开发模式

构建扩展

在 Chrome 中加载扩展

📖 使用指南

基本使用

高级设置

检测规则配置

尺寸过滤

文件大小过滤

图片格式类型过滤

类名关键词过滤

防盗链图片

查看图片在页面中的位置

常见问题（FAQ）

🎯 核心功能详解

智能去重算法

图片格式支持

图片定位系统（查看在页面位置）

防盗链绕过策略

动态图片检测

两阶段过滤

特殊图片检测

⚠️ 使用限制

不支持的页面

已知限制

🐛 故障排除

图片检测失败

图片加载失败

转换失败

侧边栏打开失败

扩展无法加载

🔧 开发指南

修改代码

调试技巧

自定义配置

📄 许可证

💡 技术亮点

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 1

Packages 0

Languages

Packages