#V2EX

原始 JSON

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