• 时间:
  • 分类:

开场白

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

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

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

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

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

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

  1. 抓不全：只能抓 <img>，CSS background-image、iframe、Shadow DOM 里的图基本放弃。
  2. 有隐私风险：manifest 里申请 <all_urls> + webRequest，还往未知服务器发数据。
  3. 体验拉胯：批量下载要么一张张点，要么 ZIP 包里一半是占位图。

所以我决定自己造轮子。核心目标：

  • 不漏图（递归提取所有图片源）
  • 不监守自盗（纯本地，零数据收集）
  • 好用（侧边栏/弹窗双模式、暗色主题、3 档密度）

二、Manifest V3 的几个坑（附解法）

2.1 Service Worker 冷启动

V3 用 service worker 替代 V2 的常驻 background page。它会在几秒无活动后休眠，导致下次调用时变量全丢。

解决方案：用 chrome.storage.session 缓存关键状态。

// 抓取完成后存入 session
await chrome.storage.session.set({ 
  lastExtract: { images, timestamp: Date.now() } 
});

// 下次打开面板时恢复
const cached = await chrome.storage.session.get('lastExtract');
if (cached && Date.now() - cached.timestamp < 60000) {
  return cached.images;
}

2.2 远程代码被禁止

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

2.3 webRequest 被 declarativeNetRequest 替代

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

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

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

function extractSimpleImages() {
  const urls = [];
  document.querySelectorAll('img').forEach(img => {
    if (img.src) urls.push(img.src);
  });
  document.querySelectorAll('picture source').forEach(source => {
    if (source.srcset) {
      const highest = source.srcset.split(',').pop().trim().split(' ')[0];
      urls.push(highest);
    }
  });
  return urls;
}

3.2 提取 CSS background-image

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

function extractBgImages(root = document) {
  const elements = root.querySelectorAll('*');
  const bgUrls = [];
  for (let i = 0; i < Math.min(elements.length, 2000); i++) {
    const bg = getComputedStyle(elements[i]).backgroundImage;
    if (bg && bg !== 'none') {
      const match = bg.match(/url\(["']?([^"')]+)["']?\)/);
      if (match) bgUrls.push(match[1]);
    }
  }
  return bgUrls;
}

3.3 递归 Shadow DOM

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

function extractFromShadowDOM(root = document) {
  let results = [];
  // 普通图片
  results.push(...extractSimpleImages(root));
  results.push(...extractBgImages(root));
  // 递归 Shadow DOM
  const hosts = root.querySelectorAll('*');
  hosts.forEach(host => {
    if (host.shadowRoot) {
      results.push(...extractFromShadowDOM(host.shadowRoot));
    }
  });
  return results;
}

3.4 iframe 处理

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

const frames = await chrome.webNavigation.getAllFrames({ tabId });
for (const frame of frames) {
  if (frame.parentFrameId !== -1) continue; // 只处理顶层 iframe
  const injection = await chrome.scripting.executeScript({
    target: { tabId, frameIds: [frame.frameId] },
    func: extractFromShadowDOM,
  });
  // 合并结果...
}

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

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

4.1 算法选择：dHash

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

4.2 核心代码

async function computeDHash(blob) {
  const img = await createImageBitmap(blob);
  const canvas = new OffscreenCanvas(9, 8);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0, 9, 8);
  const data = ctx.getImageData(0, 0, 9, 8).data;
  
  // 转灰度
  const gray = [];
  for (let i = 0; i < data.length; i += 4) {
    gray.push(0.299 * data[i] + 0.587 * data[i+1] + 0.114 * data[i+2]);
  }
  
  // 差分哈希
  let hash = 0n;
  for (let row = 0; row < 8; row++) {
    for (let col = 0; col < 7; col++) {
      const left = gray[row * 9 + col];
      const right = gray[row * 9 + col + 1];
      if (right > left) hash |= (1n << BigInt(row * 7 + col));
    }
  }
  return hash;
}

4.3 Worker 中运行，不阻塞 UI

const worker = new Worker('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) => {
  const settings = await getAppSettings();
  if (settings.useSidePanel) {
    await chrome.sidePanel.open({ tabId: tab.id });
  } else {
    await chrome.action.setPopup({ tabId: tab.id, popup: 'popup.html' });
    chrome.action.openPopup();
  }
});

同一套 UI 代码，通过 window.location.pathname 判断当前模式，微调布局（弹窗固定 620×600，侧边栏自适应）。

六、上架 Chrome Web Store 的 4 个雷区

  1. 图标尺寸不全：必须 16/32/48/128 px，缺一个直接驳回。
  2. 描述太短：简短描述 ≤132 字符，要包含核心关键词。
  3. 隐私政策缺失：即使不收集数据，也要写一份说明“不收集什么”。
  4. 权限过度：不需要 <all_urls> 就别写，否则审核会问。

我第一次提交被拒就是因为隐私政策链接 404。补上后 2 天过审。

七、成品 & 求个赞

如果你也受够了那些抓不全、偷数据的图片插件，可以试试 Image Harvest：

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

如果觉得这个工具或这篇文章对你有帮助：

  • 在 Chrome 商店留个好评（对独立开发者是续命药水 💊）
  • 给这篇文章点个赞/收藏，让更多人看到技术干货

我会继续维护和更新，任何 bug 或建议欢迎评论区告诉我 🙏

标签: none

添加新评论