Firefox扩展如何实现不干扰页面的标签页专属持久化数据存储？

首选方案：使用Firefox扩展原生sessions API #

这是完全匹配你需求的官方原生方案，没有额外开发成本，也完全不会和页面上下文产生干扰：

• 数据完全隔离：sessions API是扩展专属API，页面运行的所有脚本都无法访问、感知到你存储的标签页数据，不存在和页面sessionStorage键冲突的可能
• 标签页绑定特性：数据完全跟随标签页生命周期，同标签页下跨域名跳转数据始终留存，不同标签页数据天然隔离，标签页永久关闭后数据自动销毁
• 天然支持重启持久化：你遇到的tab.id重启变化的问题完全不需要自己处理，浏览器内部会自动维护标签和存储数据的映射关系，即使浏览器重启、标签恢复后tab.id发生变化，你依然可以正常读取到对应标签的原有数据

注意：使用该API需要在扩展manifest.json的permissions字段中添加sessions权限。

基础使用示例 #

• 存储数据：

// tabId为当前要存储的标签页ID，第二个参数为你扩展独有的存储键，避免和其他扩展冲突
await browser.sessions.setTabValue(tabId, "your_ext_unique_key", {
  customData: "需要存储的内容",
  count: 1
})

• 读取数据：

const tabCustomData = await browser.sessions.getTabValue(tabId, "your_ext_unique_key")

• 删除指定数据：

await browser.sessions.removeTabValue(tabId, "your_ext_unique_key")

备选方案（仅当sessions API存储容量不满足需求时使用） #

如果需要存储超大容量的标签页专属数据，可以搭配browser.storage.local和标签页唯一持久化标识符使用：

• 每个标签页初始化时，给标签页用sessions.setTabValue存储一个全局唯一的UUID作为该标签的永久标识符
• 将标签页对应数据以UUID为键存储在storage.local中
• 监听tabs.onRemoved事件，标签页关闭时同步删除storage.local中对应UUID的数据
• 浏览器重启后，先读取标签页的UUID标识，再从storage.local读取对应数据即可

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