最近在整理一些设计素材时，发现需要从网页批量提取图片，但市面上的工具要么功能太简单，要么就是广告满天飞。于是花了几个月时间自己写了一个 Chrome 扩展 - Image Harvest 。
最初的诉求其实很简单：想有一个能智能识别网页所有图片、支持筛选、批量下载的扩展。但用了一圈后发现，要么是 MV2 扩展（即将被 Chrome 废弃），要么是收费但功能不透明，要么就是广告太多。作为开发者，想着干脆自己做一个，顺便把想玩的技术都试一试。
1. MV3 适配踩坑
Chrome Manifest V3 的迁移是最大的挑战。Service Worker 替代了 background page ，意味着不能使用 DOM API ，也不能持久化全局状态。为了解决这个问题，采用了消息通信机制，把 DOM 操作都放到 content script 里，Service Worker 只负责协调和状态管理。另外，IndexedDB 的异步特性也需要特别注意，在批量操作时容易造成性能瓶颈，最后采用了事务批处理和懒加载策略才解决。
2. Preact + TypeScript 技术选型
扩展使用了 Preact + TypeScript 技术栈，原因有几个：- Preact 体积小（压缩后只有 3KB ），比 React 轻量很多，适合扩展场景- TypeScript 提供类型安全，减少运行时错误- 采用增量迁移策略：核心 UI 用 Preact 组件，部分遗留代码仍用原生 JS- MV3 对代码体积有严格限制，Preact 的轻量特性正好符合要求- 用 Vite 做构建工具，配合 crxjs 插件，开发体验不错- Shadow DOM 的使用比较克制，只在需要样式隔离的地方才用，避免过度设计
3. pHash 去重算法
批量下载时经常遇到重复图片（比如同一张图片的不同尺寸），传统的 MD5/SHA1 哈希对图片微小变化太敏感，一张图缩放一下哈希值就完全不同。选用了 pHash （感知哈希）算法，通过 DCT 变换提取图片的"视觉指纹"，即使图片被压缩、缩放、轻微调色，也能识别出是同一张图。实现上用了 Canvas API 的 getImageData() 获取像素数据，然后手动计算 DCT ，虽然性能比 WebGL 版本差一点，但胜在兼容性好。
4. MutationObserver 实时监控
为了支持动态加载的图片（比如瀑布流、无限滚动），用 MutationObserver 监听 DOM 变化，配合 IntersectionObserver 实现懒加载检测。这里有个坑是 MutationObserver 的回调频率很高，需要做防抖处理，否则会卡顿。最后用了 requestAnimationFrame + 时间戳的双重节流策略。
核心功能包括：
智能提取：自动遍历 Shadow DOM ，支持懒加载图片检测
批量下载：一键打包成 ZIP ，支持自定义命名模板（如 {domain}_{index}.{ext}）
智能去重：基于 pHash 的视觉去重，可调整相似度阈值
实时监控：MutationObserver 自动捕获新增图片
多标签页：支持跨标签页提取和聚合
收藏夹：用 IndexedDB 本地存储常用图片
颜色提取：Median Cut 算法提取主色调，方便按颜色筛选
反向图搜：集成 Google Images 搜索
5 语言界面：支持中英文、繁體中文、日本語、Español
代码已经开源在 GitHub （ MIT 协议），欢迎各位大佬指点。Chrome 商店上架了免费版，付费版主要是为了支持持续开发（ 7 天免费试用，30 天退款）。定价参考了同类扩展，但核心功能免费版都有，付费版主要是批量下载次数限制和一些高级功能。
目前还在早期阶段，可能有不少 bug 和性能问题。如果各位大佬愿意试用，有以下几点特别想听听意见：
性能优化：在图片特别多的页面（比如电商网站）会不会卡顿？
兼容性：有没有遇到某些网站完全提取不到图片的情况？
功能建议：有哪些刚需功能是当前没有的？
代码质量：GitHub 上的代码如果有什么明显问题，欢迎直接提 PR
GitHub: https://github.com/zbw-zbw/image-harvestChrome
chrome 插件商店: https://chromewebstore.google.com/detail/iecgnjidmogebokcfnejncgnelcepffo
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。