开场白我真的受够了每次想从网页批量保存图片要么右键被禁用要么装了五六个插件还漏掉一半的 CSS 背景图要么好不容易抓到图了却发现插件在后台偷偷上报我的浏览记录。于是我自己写了一个 ——Image Harvest。它能把网页里所有图片包括img、CSS 背景、iframe 内嵌、甚至 Shadow DOM 里的全部扒出来一键打包 ZIP而且本地处理零追踪。官网功能详情image-harvest.kyriewen.cnChrome 商店安装https://chromewebstore.google.com/detail/iecgnjidmogebokcfnejncgnelcepffo这篇文章不讲产品吹水只说技术实现MV3 踩坑、深度图片提取、客户端感知哈希去重、Side Panel Popup 双形态共存。干货 代码 真实踩坑记录希望对写 Chrome 插件的朋友有帮助。一、为什么我要自己写一个图片下载插件现有的同类插件我试过 10 个普遍三个问题抓不全只能抓imgCSSbackground-image、iframe、Shadow DOM 里的图基本放弃。有隐私风险manifest 里申请all_urlswebRequest还往未知服务器发数据。体验拉胯批量下载要么一张张点要么 ZIP 包里一半是占位图。所以我决定自己造轮子。核心目标不漏图递归提取所有图片源不监守自盗纯本地零数据收集好用侧边栏/弹窗双模式、暗色主题、3 档密度二、Manifest V3 的几个坑附解法2.1 Service Worker 冷启动V3 用 service worker 替代 V2 的常驻 background page。它会在几秒无活动后休眠导致下次调用时变量全丢。解决方案用chrome.storage.session缓存关键状态。// 抓取完成后存入 sessionawaitchrome.storage.session.set({lastExtract:{images,timestamp:Date.now()}});// 下次打开面板时恢复constcachedawaitchrome.storage.session.get(lastExtract);if(cachedDate.now()-cached.timestamp60000){returncached.images;}2.2 远程代码被禁止V3 完全禁止执行从外部下载的脚本。对我没影响Image Harvest 所有代码本地打包不依赖任何远程配置。2.3webRequest被declarativeNetRequest替代如果你需要修改网络请求如给图片请求加 header现在只能用声明式规则灵活性降低。不过图片下载器不需要这玩意儿。三、深度图片提取从img到 Shadow DOM3.1 基础提取img和picturefunctionextractSimpleImages(){consturls[];document.querySelectorAll(img).forEach(img{if(img.src)urls.push(img.src);});document.querySelectorAll(picture source).forEach(source{if(source.srcset){consthighestsource.srcset.split(,).pop().trim().split( )[0];urls.push(highest);}});returnurls;}3.2 提取 CSSbackground-image很多网站的 Banner、图标都用背景图实现必须挖出来。functionextractBgImages(rootdocument){constelementsroot.querySelectorAll(*);constbgUrls[];for(leti0;iMath.min(elements.length,2000);i){constbggetComputedStyle(elements[i]).backgroundImage;if(bgbg!none){constmatchbg.match(/url\([]?([^)])[]?\)/);if(match)bgUrls.push(match[1]);}}returnbgUrls;}3.3 递归 Shadow DOM现代前端框架React/Vue常把图片封装在 Shadow DOM 里必须递归遍历。functionextractFromShadowDOM(rootdocument){letresults[];// 普通图片results.push(...extractSimpleImages(root));results.push(...extractBgImages(root));// 递归 Shadow DOMconsthostsroot.querySelectorAll(*);hosts.forEach(host{if(host.shadowRoot){results.push(...extractFromShadowDOM(host.shadowRoot));}});returnresults;}3.4 iframe 处理同源 iframe 可以用chrome.scripting.executeScript注入提取函数。需要webNavigation权限获取所有 frame。constframesawaitchrome.webNavigation.getAllFrames({tabId});for(constframeofframes){if(frame.parentFrameId!-1)continue;// 只处理顶层 iframeconstinjectionawaitchrome.scripting.executeScript({target:{tabId,frameIds:[frame.frameId]},func:extractFromShadowDOM,});// 合并结果...}四、客户端感知哈希pHash实现相似图去重很多用户反馈“下载 100 张图里面有 30 张是重复的缩略图”。所以我在 Pro 版中加了相似图检测。4.1 算法选择dHash速度快纯前端对缩放、轻微裁剪不敏感汉明距离 ≤ 5 判定为相似4.2 核心代码asyncfunctioncomputeDHash(blob){constimgawaitcreateImageBitmap(blob);constcanvasnewOffscreenCanvas(9,8);constctxcanvas.getContext(2d);ctx.drawImage(img,0,0,9,8);constdatactx.getImageData(0,0,9,8).data;// 转灰度constgray[];for(leti0;idata.length;i4){gray.push(0.299*data[i]0.587*data[i1]0.114*data[i2]);}// 差分哈希lethash0n;for(letrow0;row8;row){for(letcol0;col7;col){constleftgray[row*9col];constrightgray[row*9col1];if(rightleft)hash|(1nBigInt(row*7col));}}returnhash;}4.3 Worker 中运行不阻塞 UIconstworkernewWorker(phash-worker.js);worker.postMessage({blob});worker.onmessage(e){console.log(哈希:${e.data.hash});};五、Side Panel Popup 双模式共存Chrome 115 支持 Side Panel但老用户习惯 Popup。我两个都要。实现要点manifest 中配置side_panel.default_path sidepanel.htmlaction.default_popup留空动态控制chrome.action.onClicked.addListener(async(tab){constsettingsawaitgetAppSettings();if(settings.useSidePanel){awaitchrome.sidePanel.open({tabId:tab.id});}else{awaitchrome.action.setPopup({tabId:tab.id,popup:popup.html});chrome.action.openPopup();}});同一套 UI 代码通过window.location.pathname判断当前模式微调布局弹窗固定 620×600侧边栏自适应。六、上架 Chrome Web Store 的 4 个雷区图标尺寸不全必须 16/32/48/128 px缺一个直接驳回。描述太短简短描述 ≤132 字符要包含核心关键词。隐私政策缺失即使不收集数据也要写一份说明“不收集什么”。权限过度不需要all_urls就别写否则审核会问。我第一次提交被拒就是因为隐私政策链接 404。补上后 2 天过审。七、成品 求个赞如果你也受够了那些抓不全、偷数据的图片插件可以试试Image Harvest官网功能详情image-harvest.kyriewen.cnChrome 商店安装https://chromewebstore.google.com/detail/iecgnjidmogebokcfnejncgnelcepffo如果觉得这个工具或这篇文章对你有帮助在 Chrome 商店留个好评对独立开发者是续命药水 给这篇文章点个赞/收藏让更多人看到技术干货我会继续维护和更新任何 bug 或建议欢迎评论区告诉我