当前位置：首页 > news >正文

别再乱装图片插件了！我手写了一个，能扒光整个网页（含背景/iframe/Shadow DOM）

news 2026/4/29 23:55:24

开场白

我真的受够了，每次想从网页批量保存图片，要么右键被禁用，要么装了五六个插件还漏掉一半的 CSS 背景图，要么好不容易抓到图了，却发现插件在后台偷偷上报我的浏览记录。

于是我自己写了一个 ——Image Harvest。它能把网页里所有图片（包括<img>、CSS 背景、iframe 内嵌、甚至 Shadow DOM 里的）全部扒出来，一键打包 ZIP，而且本地处理，零追踪。

官网功能详情：image-harvest.kyriewen.cn

Chrome 商店安装：https://chromewebstore.google.com/detail/iecgnjidmogebokcfnejncgnelcepffo

这篇文章不讲产品吹水，只说技术实现：MV3 踩坑、深度图片提取、客户端感知哈希去重、Side Panel + Popup 双形态共存。干货 + 代码 + 真实踩坑记录，希望对写 Chrome 插件的朋友有帮助。

一、为什么我要自己写一个图片下载插件？

现有的同类插件，我试过 10+ 个，普遍三个问题：

抓不全：只能抓<img>，CSSbackground-image、iframe、Shadow DOM 里的图基本放弃。
有隐私风险：manifest 里申请<all_urls>+webRequest，还往未知服务器发数据。
体验拉胯：批量下载要么一张张点，要么 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()}});// 下次打开面板时恢复constcached=awaitchrome.storage.session.get('lastExtract');if(cached&&Date.now()-cached.timestamp<60000){returncached.images;}

2.2 远程代码被禁止

V3 完全禁止执行从外部下载的脚本。对我没影响：Image Harvest 所有代码本地打包，不依赖任何远程配置。

2.3`webRequest`被`declarativeNetRequest`替代

如果你需要修改网络请求（如给图片请求加 header），现在只能用声明式规则，灵活性降低。不过图片下载器不需要这玩意儿。

三、深度图片提取：从`<img>`到 Shadow DOM

3.1 基础提取：`<img>`和`<picture>`

functionextractSimpleImages(){consturls=[];document.querySelectorAll('img').forEach(img=>{if(img.src)urls.push(img.src);});document.querySelectorAll('picture source').forEach(source=>{if(source.srcset){consthighest=source.srcset.split(',').pop().trim().split(' ')[0];urls.push(highest);}});returnurls;}

3.2 提取 CSS`background-image`

很多网站的 Banner、图标都用背景图实现，必须挖出来。

functionextractBgImages(root=document){constelements=root.querySelectorAll('*');constbgUrls=[];for(leti=0;i<Math.min(elements.length,2000);i++){constbg=getComputedStyle(elements[i]).backgroundImage;if(bg&&bg!=='none'){constmatch=bg.match(/url\(["']?([^"')]+)["']?\)/);if(match)bgUrls.push(match[1]);}}returnbgUrls;}

3.3 递归 Shadow DOM

现代前端框架（React/Vue）常把图片封装在 Shadow DOM 里，必须递归遍历。

functionextractFromShadowDOM(root=document){letresults=[];// 普通图片results.push(...extractSimpleImages(root));results.push(...extractBgImages(root));// 递归 Shadow DOMconsthosts=root.querySelectorAll('*');hosts.forEach(host=>{if(host.shadowRoot){results.push(...extractFromShadowDOM(host.shadowRoot));}});returnresults;}

3.4 iframe 处理

同源 iframe 可以用chrome.scripting.executeScript注入提取函数。需要webNavigation权限获取所有 frame。

constframes=awaitchrome.webNavigation.getAllFrames({tabId});for(constframeofframes){if(frame.parentFrameId!==-1)continue;// 只处理顶层 iframeconstinjection=awaitchrome.scripting.executeScript({target:{tabId,frameIds:[frame.frameId]},func:extractFromShadowDOM,});// 合并结果...}

四、客户端感知哈希（pHash）实现相似图去重

很多用户反馈：“下载 100 张图，里面有 30 张是重复的缩略图”。所以我在 Pro 版中加了相似图检测。

4.1 算法选择：dHash

速度快（纯前端）
对缩放、轻微裁剪不敏感
汉明距离 ≤ 5 判定为相似

4.2 核心代码

asyncfunctioncomputeDHash(blob){constimg=awaitcreateImageBitmap(blob);constcanvas=newOffscreenCanvas(9,8);constctx=canvas.getContext('2d');ctx.drawImage(img,0,0,9,8);constdata=ctx.getImageData(0,0,9,8).data;// 转灰度constgray=[];for(leti=0;i<data.length;i+=4){gray.push(0.299*data[i]+0.587*data[i+1]+0.114*data[i+2]);}// 差分哈希lethash=0n;for(letrow=0;row<8;row++){for(letcol=0;col<7;col++){constleft=gray[row*9+col];constright=gray[row*9+col+1];if(right>left)hash|=(1n<<BigInt(row*7+col));}}returnhash;}

4.3 Worker 中运行，不阻塞 UI

constworker=newWorker('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.html"
action.default_popup留空，动态控制

chrome.action.onClicked.addListener(async(tab)=>{constsettings=awaitgetAppSettings();if(settings.useSidePanel){awaitchrome.sidePanel.open({tabId:tab.id});}else{awaitchrome.action.setPopup({tabId:tab.id,popup:'popup.html'});chrome.action.openPopup();}});