← 返回项目

图提取 · ImageGrab

电商详情页图片批量提取,勾选后统一导出 PNG

  • Chrome Extension
  • Manifest V3
  • JavaScript
源码仓库

背景

整理竞品素材时,详情页里的图片分散在 img、懒加载的 data-src、甚至 CSS 背景图里,右键另存为一次只能存一张。

我的角色

从需求拆解、架构设计到全部代码实现,包括内容脚本、Service Worker 与图片库页面。

关键难点

  1. 懒加载图片必须先滚动到视口才会真正请求;
  2. 缩略图与原图的尺寸不同,按当前尺寸过滤会误杀 800×800 的真图;
  3. 跨域图片不能直接画进页面 canvas,只能放到 Service Worker 里转码。

结果

单页 50 张图从「10 分钟手工右键」变成「点一次按钮、勾选、导出」,导出的 PNG 自动编号为 商品图_001.png。