我是怎么用 Vibe Coding 把 SHEIN 商品图一键抓到自己的电脑的

故事的开始：一个朋友的 eBay 小店

我有个朋友，自己运营 eBay 小店，卖家居小物（香薰蜡烛、收纳架、厨房用品之类）。这种店的核心竞争力是选品眼光 + Listing 文案——产品本身可以"借鉴" SHEIN 这些快时尚平台的款式。

上周他找我吐槽：

"我在 SHEIN 上看到一个蜡烛台，颜值很顶，想搬到 eBay 上卖。但右键存图存不下来，全是 .html，根本搞不定。"

（"借鉴"这事在跨境电商圈心照不宣——SHEIN 上架的新款式经常被其他平台快速跟进。这是行业常态，也是我这次帮他搞工具的真实驱动力。）

我心想：行吧，PM 视角的小需求，正好试试 Vibe Coding。

第一次尝试：老老实实用脚本下载

行吧，右键不行我用工具。Python 写个脚本，requests + PIL，把图 URL 一行一个丢进去批量下载转 JPG。

跑了一下，问题来了——

存下来的图片全是 .webp / .avif。我想要的是 .jpg。

啊，这是 SHEIN CDN 的默认输出格式。modern 格式文件小、质量高，但对 eBay 后台兼容性差。怎么办？

第二次尝试：那就写个 Chrome 扩展吧

既然右键不行、脚本又不够灵活，那就上扩展。

我给自己的扩展定了个小目标：

在 SHEIN 商品页里，自动识别出所有商品大图，让我能一键保存成 JPG。

听起来挺简单对吧？

然后我踩了一堆坑

作为一个 PM，我以为 30 分钟能搞定，结果踩了一堆坑。

坑 1：SHEIN 的风控

Playwright 自动化访问直接被 captcha challenge 拦截。商品图元素全部被替换成验证图。

绕开办法：让真浏览器（用户的 Chrome）去抓，不依赖自动化。

坑 2：SHEIN 商品页是 SPA

点击扩展图标扫描时，DOM 里只有骨架，所有 <img> 的 naturalWidth 都是 0。

绕开办法：扫描前 await 所有 img.decode()，等图真加载完。

但这又引入新坑——

坑 3：图片解码超时拖死整个 Promise

Promise.allSettled(img.decode()) 等所有图加载完——但页面有 100+ 张图（推荐 / 评论 / icon / 广告），其中很多永远不会 resolve。

11 张图等了 47 秒。差点把人等崩溃。

绕开办法：

  • 已加载的图直接跳过不等
  • 视口外的图直接跳过不扫
  • 视口内未加载的图限时 1.5 秒，超时就放弃

最终扫描从 47 秒 降到 < 1 秒。

坑 4：图片过滤规则不稳定

最初我直接读 URL 路径（/v4/j/spmp/ 这种），后来发现这不稳——SHEIN 哪天升个版本，路径规则变了，我就瞎了。

改成 4 层综合策略（跨平台稳定）：

  1. JSON-LD Product.image — 语义级最准
  2. naturalWidth >= 600px — 最稳，跟 URL 无关
  3. fetchpriority="high" / loading="eager" — 浏览器调度 hint
  4. URL 路径 — 兜底

每张识别出来的图，缩略图右上角会显示 json-ld / size / priority-hint / url-pattern 标签，让我一眼看出是哪一层规则识别的。

坑 5：Chrome 扩展没有 storage 权限

manifest.json 漏了 "storage" 权限，chrome.storage.local 直接 undefined。

绕开办法：补权限 + 重装扩展（不是刷新，要重装）。

坑 6：Tainted Canvas（最狠的一个）

所有 13 张图都报：

Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.

这是浏览器安全机制：SHEIN CDN (img.ltwebstatic.com) 没返回 Access-Control-Allow-Origin 头，跨域图画到 canvas 就被污染，toBlob 直接拒绝。

更狠的是——fetch 也死（没 CORS 头返回 opaque）、img.crossOrigin="anonymous" 也死（服务器不发头，crossOrigin 设了图加载失败）。

这是浏览器侧的硬限制。 浏览器里没办法把跨域图转 JPG。

最终方案：检测到 tainted → 自动降级用 chrome.downloads 下载原图（chrome 自己处理跨域）。用户拿到 webp / avif，现代系统都支持。

📝 小发现：SHEIN 的图片 URL 命名 100% 系统级——v4/j/spmp/2026/05/07/c8/...bb_thumbnail_900x.webp 这种路径完全由 CDN 系统生成（SHA1 of image + 系统目录），店家零控制权。这跟淘宝店家可以自己命名 IMG_我的爆款.jpg 完全不一样。

最终成果

一个 Chrome MV3 扩展，能：

  • 在 SHEIN 商品页自动识别商品大图（4 层过滤）
  • 一键批量下载（按 日期 / 商品名 自动组织目录）
  • 默认下原图（快），失败有友好提示
  • 配置持久化（根目录名、最小尺寸）

看这张截图：

Chrome 扩展识别出 8 张 SHEIN 商品大图

左边是 SHEIN 商品页（15 小时香薰蜡烛），右上角是我刚写的扩展 popup——它已经从商品页里识别出 8 张商品大图，每张都打了 json-ld 标签，说明它们是从 JSON-LD 的 Product.image 字段识别出来的——这是 4 层过滤里最准的那一层。

Vibe Coding 复盘

回头看这个 PM 视角的小需求，从"右键另存为"到"能用"，经历了：

  • 6 次重大方向调整（Python → 扩展 → 4 层过滤策略 → 自动降级）
  • 4 个新文件（manifest / content / popup / background）
  • 1 个意外发现（SHEIN URL 命名 100% 系统级）
  • 1 个硬限制（Tainted Canvas）
  • 数十次小迭代

如果按传统方式"评估需求 → 排期 → 编码 → 测试 → 上线"，可能两周都搞不定。但 Vibe Coding 的好处是：

  1. 不预设方案：先试最简单的（Python 脚本），不行再换（扩展）
  2. 接受降级：转不了 JPG 就下原图，别死磕
  3. 让用户参与：每一步都让用户试、有问题就调
  4. 工具即文档：写代码的过程就是设计文档

最关键的：PM 自己能上手，不用等研发排期。

写完这个工具后，朋友现在每天上架新品的流程变成了：

  1. SHEIN 上看到一个新款式 → 2. Chrome 一键抓图 → 3. AI 生成 eBay 标题/描述 → 4. 直接上架

以前要 2 小时的事，现在 15 分钟。

如果你也有类似的"小需求"，建议先问自己一句：

"我能不能用 Vibe Coding 自己搞定？"

如果答案是"能"，那就动手吧——30 分钟的尝试，可能省下一周的等待。

在线体验

想先看效果？👉 sheinhelper.okra.xin 是这个项目的落地页，可以看到它的简介和实际截图。