`写了一个能扒掉网页所有图片的 Chrome 插件，包括藏在 CSS 和 Shadow DOM 里的`

发现频道
1

背景

之前每次想从网页批量保存图片都很痛苦：

  • 右键被禁用是常态
  • CSS background-image 完全抓不到
  • 懒加载和 srcset 经常漏
  • 现成的"图片下载器"插件要么夹私货，要么漏图严重

正好之前一直想做个 Chrome 插件练练手，就花了 3 个月时间从头写了一个。

hero

项目链接

主要功能（免费）

  • 深度扫描页面所有图片源（img / picture / srcset / CSS background / iframe）
  • 递归遍历开放的 Shadow DOM（闭合的肯定不行）
  • 按尺寸 / 格式 / 比例 / URL 关键词过滤
  • 单次最多打包 ZIP 下载 20 张
  • 反向以图搜图（Google）
  • Side Panel + Popup 双形态，亮 / 暗主题，3 种密度

Pro 功能（解锁）

  • 不限制 ZIP 下载数量、支持格式转换
  • 多标签页同时扒图
  • 基于感知哈希（pHash）的相似图片检测
  • 反向搜图扩展到 4 个引擎（Google / TinEye / Baidu / Yandex）
  • 颜色提取（HEX 复制）
  • 收藏夹（带标签和备注）
  • 实时监听新图片（MutationObserver）

技术栈

  • 纯 vanilla JS，故意不用框架，bundle 控制在 1MB 内
  • Manifest V3，没有任何远程代码
  • pHash 在 Web Worker 里跑，单图大约 50ms
  • chrome.storage.session 缓存提取状态，重开 panel 秒开
  • 全程本地处理，零分析、零追踪

踩过的几个坑（如果有人也在写 MV3 可能用得上）

  1. Shadow DOM 里 CSS background 提取要靠 getComputedStyle 递归
  2. MV3 的 service worker 冷启动延迟很恶心，必须做缓存
  3. iframe 跨域时 chrome.scripting.executeScript 要 frameIds 全发
  4. Side Panel API 的窄宽度适配比想象中难，我做了 3 套密度预设

求 V

刚上架，几乎没用户。如果觉得还行求大家试用一下，bug 或者功能建议直接 reply。
如果用得顺手的话真心求一个 Chrome Web Store 5 星好评，对个人项目就是命：

https://chromewebstore.google.com/detail/iecgnjidmogebokcfnejncgnelcepffo/reviews

谢谢各位 :folded_hands:

1 个赞