Chrome扩展：页面导航前缓存数据跨页传递方案咨询

我开发了一款Chrome扩展，用于捕获网站上用户的行为路径数据，这些数据缓存于注入网页的content script本地变量中。当用户点击扩展弹窗按钮时，background script（service worker）会向content script查询数据。但该网站并非完全是单页应用（SPA），每次页面导航时，缓存的数据都会丢失，导致无法完整构建用户行为路径。

核心问题：是否有办法在页面导航前获取缓存数据，并将其传递至跳转后的页面？

限制条件：

• 数据量庞大，可能超出浏览器local storage或session storage的5MB存储限制；
• 数据更新频率高，且需支持多标签页同时使用，因此选择在content script而非background script中存储数据以保证效率。

结合你的需求和限制，以下是几个务实的实现方案：

1. 基于chrome.storage.session的内存级会话存储（推荐） #

Chrome 102及以上版本支持chrome.storage.session，这是专门为扩展设计的内存会话存储，完美匹配你的场景：

• 存储上限高：远高于普通localStorage/sessionStorage的5MB限制（通常可达几十MB，具体取决于浏览器配置）；
• 标签页隔离：数据与对应标签页绑定，关闭标签页自动清除，天然支持多标签页独立存储；
• 读写高效：内存级操作，适合高频更新的行为数据。

实现步骤： #

• 在content script中监听beforeunload事件，页面导航/刷新前，将本地缓存的行为数据以当前tab ID为键写入chrome.storage.session；
• 新页面加载完成后，content script先读取chrome.storage.session中对应tab ID的历史数据，合并到本地变量中，继续捕获新的用户行为；
• 弹窗需要数据时，background script可直接从chrome.storage.session读取对应tab的数据，或通知content script返回合并后的完整行为路径。

2. sessionStorage分块存储（兼容低版本Chrome） #

如果需要兼容Chrome 102以下版本，可通过分块存储绕过sessionStorage的单键限制：

• 初始化content script时，用chrome.tabs.getCurrent()获取当前tab的唯一ID；
• 将大体积数据拆分为多个不超过5MB的片段，以[tab-id]-chunk-[索引]为键存入sessionStorage；
• 页面导航前触发beforeunload事件，把本地数据拆分后写入对应tab的分块存储；
• 新页面加载时，content script读取对应tab ID的所有分块数据，合并后恢复本地缓存。

这种方式既保留了sessionStorage的标签页隔离特性，又通过分块规避了存储上限问题，同时避免了background script频繁读写的性能损耗。

3. window.postMessage跨页面直接传递（即时跳转场景） #

如果用户主要通过点击页面内链接导航，可以拦截跳转行为直接传递数据：

• 在content script中监听click事件，判断目标是否为同域内的导航链接；
• 拦截默认跳转，用window.open打开新页面，新页面的content script通过window.opener获取原页面的缓存数据；
• 数据读取完成后，新页面恢复本地缓存并完成导航。

注意：该方案仅适合同域即时跳转场景，无法覆盖用户直接输入URL刷新页面的情况。

方案对比 #

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