Chrome扩展中Caches API能否正常使用？问题求助

一、Caches API在Chrome扩展中的可用性 #

Caches API可以在Chrome扩展中正常使用，但需满足以下前提：

• 必须在Service Worker或被Service Worker控制的扩展页面（如popup、options页）中调用，普通content script无法直接访问扩展的缓存空间（需通过与Service Worker通信间接操作）。
• 扩展manifest需正确配置Service Worker：
  • Manifest V3：添加"service_worker": "sw.js"字段
  • Manifest V2：配置"background": {"scripts": ["background.js"], "persistent": false}

二、问题1：存储图片URL在Chrome扩展中无作用的原因及排查 #

可能原因 #

1. 执行环境错误：在content script中直接调用Caches API，无法访问扩展专属的缓存空间。
2. 权限不足：要缓存的图片URL属于跨域资源，扩展未配置对应的host_permissions（如"host_permissions": ["https://images.unsplash.com/*"]）。
3. Service Worker未激活：manifest配置错误，导致Service Worker未启动，无法使用Caches API。
4. 未捕获异常：缓存操作（caches.open/cache.add）失败但未处理，无法定位问题。

排查步骤 #

• 确认代码运行在Service Worker或扩展自有页面中，content script需通过chrome.runtime.sendMessage通知Service Worker执行缓存操作。
• 检查manifest的host_permissions是否包含目标图片的域名。
• 在Chrome扩展开发者工具的「Service Worker」面板确认Service Worker已激活。
• 给缓存代码添加错误捕获：

try {
  const cache = await caches.open('unsplash-images');
  await cache.add(background.cachedImage.url);
} catch (err) {
  console.error('缓存失败:', err);
}

三、问题2：上传文件存入缓存报错的原因及修复 #

报错翻译 #

获取 chrome-extension://hnpdlbalmgcignmohakgakgpnjncndna/[object%20Blob] 时出现错误：NET::ERR_FILE_NOT_FOUND

错误原因 #

代码中new Request(blob as any)的用法错误——Request构造函数仅接受URL字符串或Request对象，而非Blob。直接传入Blob会被强制转为字符串[object Blob]，浏览器将其当作扩展资源路径查找，自然找不到对应文件。

修复方案 #

无需将File转成DataURL再转Blob，直接用File生成Response，以唯一标识作为缓存Key存入Caches API。示例代码：

if (addedFiles) {
    const cache = await caches.open("upload-images");
    const addedImages = Array.from(addedFiles);
    const existingImages = new Set(background.images);

    const addedImagePaths = await Promise.all(
        addedImages.map(async (file) => {
            // 生成唯一缓存Key（避免重复）
            const cacheKey = `/uploaded/${file.name}-${file.lastModified}-${file.size}`;
            
            // 检查是否已存在于现有列表中
            if (existingImages.has(cacheKey)) {
                return cacheKey;
            }

            // 检查缓存中是否已有该文件
            const cachedResponse = await cache.match(cacheKey);
            if (!cachedResponse) {
                // 直接用File创建Response并存入缓存
                await cache.put(cacheKey, new Response(file, {
                    headers: { "Content-Type": file.type }
                }));
            }

            return cacheKey;
        })
    );
}

补充：访问缓存文件 #

若需在页面中显示缓存的文件，需在Service Worker中添加fetch拦截逻辑，返回缓存内容：

// sw.js
self.addEventListener('fetch', (event) => {
    const url = new URL(event.request.url);
    if (url.pathname.startsWith('/uploaded/')) {
        event.respondWith(
            caches.open('upload-images')
                .then(cache => cache.match(event.request.url))
                .then(response => response || fetch(event.request))
        );
    }
});

内容的提问来源于stack exchange，提问作者Philip Phil