做了一个 Chrome 扩展来批量提取网页图片， Preact + TypeScript 实现，开源求反馈

爱意满满的作品展示区。

最近在整理一些设计素材时，发现需要从网页批量提取图片，但市面上的工具要么功能太简单，要么就是广告满天飞。于是花了几个月时间自己写了一个 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 + 时间戳的双重节流策略。