如何通过Chrome扩展的service worker实现页面缓存？

这一需求完全可以实现，你可以通过Chrome扩展的请求拦截API获取页面响应内容，存入chrome.storage后即可在后续需要时读取调用。存储优先选用chrome.storage.local，其默认存储配额为5MB，申请unlimitedStorage权限后可突破容量限制。

• 第一步：在manifest.json中声明必要权限（以Manifest V3为例）

{
  "manifest_version": 3,
  "name": "自定义页面缓存工具",
  "version": "1.0",
  "permissions": ["webRequest", "storage", "unlimitedStorage"],
  "host_permissions": ["<all_urls>"],
  "background": {
    "service_worker": "background.js"
  }
}

• 第二步：拦截页面响应并写入chrome.storage.local
  在后台服务workerbackground.js中监听主文档请求，获取完整响应内容后和响应元信息一同存入存储，以页面URL作为唯一索引key：

chrome.webRequest.onCompleted.addListener(
  async (details) => {
    // 仅处理正常返回的主页面请求
    if (details.type !== 'main_frame' || details.statusCode !== 200) return
    const response = await fetch(details.url)
    const pageContent = await response.text()
    const cacheItem = {
      content: pageContent,
      contentType: response.headers.get('content-type'),
      cacheTime: Date.now()
    }
    await chrome.storage.local.set({ [details.url]: cacheItem })
  },
  { urls: ["<all_urls>"] }
)

• 第三步：读取缓存加载页面
  需要调用已缓存页面时，先通过URL查询存储中的对应数据，存在缓存则直接写入当前文档：

// 示例：读取指定URL的缓存并加载
const targetPageUrl = 'https://你的目标页面地址'
chrome.storage.local.get(targetPageUrl, (result) => {
  const cacheData = result[targetPageUrl]
  if (cacheData) {
    document.open(cacheData.contentType)
    document.write(cacheData.content)
    document.close()
  }
})

• chrome.storage仅支持存储可序列化的JSON数据，图片、视频等二进制资源需要转成Base64编码后再存储，避免数据损坏
• 如果缓存内容体积较大，推荐搭配浏览器原生Cache API使用，该接口专为存储HTTP请求响应设计，大体积资源的读写效率远高于chrome.storage
• 缓存跨站点资源时需要注意CORS策略限制，避免出现无法正常读取响应内容的问题

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