电商图片提取下载器

背景

做电商素材整理时，最烦的一步是存图：商品主图和详情图散落在页面各处，尺寸不一，右键另存要重复几十次，存下来的还常是 _430x430q90.jpg 这种压缩过的缩略图。市面上的插件要么只能抓当前视口，要么下载的是改后缀的假 PNG。于是决定自己写一个。

做了什么

扩展在商品详情页右下角注入一个悬浮按钮，点击后：

1. 渐进滚动页面，把所有懒加载图片触发出来；
2. 同时扫描 <img>（含 srcset、data-src）、CSS 背景图与页面内联大图；
3. 用站点适配器把地址还原成原图，按「域名 + 路径」去重；
4. 在新标签页以网格展示，勾选后批量转码为 PNG 下载。

技术方案

适配器分层。generic.js 提供兜底规则，taobao.js、jd.js、pinduoduo.js 各自覆盖：原图还原（去掉 _430x430q90.jpg、/n1/、?imageView2/...）、噪音过滤（图标、logo、1×1 埋点）、容器选择器。加新平台只需要新增一个适配器文件，不改主流程。

真正的 PNG。不是把 .jpg 改成 .png，而是在扩展页面里 fetch → createImageBitmap → 画到 canvas → toBlob('image/png')。为此需要处理防盗链：安装时写入 declarativeNetRequest 动态规则，只对扩展自身发出的请求补 Referer，用 initiatorDomains 限定范围，不影响正常浏览。

任务传递。提取结果通过 chrome.storage.session 传给结果页，URL 只带一个 job id。这样既避开消息体大小限制，也不会出现超长 URL。

UI 隔离。悬浮按钮挂在 Shadow DOM 里，页面样式进不来，也不会污染原页面。

难点与取舍

• 懒加载：直接扫 DOM 只能拿到已渲染的图。方案是先滚动到底再扫，代价是用户要等 1–3 秒，所以加了进度反馈。
• 去重键：同一张图在不同位置有不同尺寸参数，用「域名 + 路径」做键，同图不同尺寸只留一份，但要小心不同商品共用占位图的情况，最终用尺寸阈值加人工规则过滤。
• 超大图：长边超过浏览器 canvas 上限会转码失败，没有硬扛，而是计入失败列表支持单独重试。

结果

三个平台的主图、详情图都能完整抓取，一次几十张图从「逐张右键」变成「勾选后一次下载」。项目也让我第一次认真处理了跨域、防盗链和浏览器权限模型。

复盘

如果重做，我会把适配器规则做成可配置的 JSON 而不是写死在代码里——平台改版时改配置比改代码快得多。另外应该更早写适配器单测，现在 21 条断言的测试是后期补的，前期调试全靠手点。