浏览器扩展中内容脚本与设置页共享IndexedDB实例的问题

你遇到的核心问题其实是浏览器扩展的上下文隔离机制：内容脚本是运行在你访问的网页的上下文（属于网页的源），而弹窗是运行在扩展自身的独立上下文（属于moz-extension://xxx这类扩展专属源）。这两个上下文的IndexedDB是完全隔离的——相当于两个不同的网站，自然看不到对方的数据。

而你说localStorage可以共享，大概率是混淆了「网页的localStorage」和「扩展的存储API」：如果是用browser.storage.local（扩展专属存储），那所有扩展上下文（内容脚本、弹窗、后台）都能直接访问；但如果是网页原生的localStorage，内容脚本访问的是网页的存储，弹窗访问的是扩展的存储，其实也是隔离的，可能你误打误撞用了扩展的存储API才觉得没问题。

1. 改用浏览器扩展专属的storage API（最推荐） #

这是最简单的方案，扩展的storage API就是为跨上下文共享数据设计的，不需要处理IndexedDB的复杂逻辑，也不用操心隔离问题。

内容脚本中保存数据： #

// 收集到数据后直接存入扩展存储
const collectedProfile = {id: "123", name: "test"};
browser.storage.local.set({profiles: [...existingProfiles, collectedProfile]})
  .then(() => console.log("数据保存成功"))
  .catch(err => console.error("保存失败", err));

弹窗中读取数据： #

document.addEventListener('DOMContentLoaded', () => {
  browser.storage.local.get('profiles')
    .then(result => {
      const profiles = result.profiles || [];
      logTimestamps(profiles);
      document.getElementById('utenti').innerHTML += 'SUCCESS';
    })
    .catch(err => {
      console.error("读取失败", err);
      document.getElementById('utenti').innerHTML += 'FAIL';
    });
});

function logTimestamps(timestamps) {
  document.getElementById('utenti').innerHTML += `<br>There are ${timestamps.length} timestamp(s) saved: ${timestamps.map(p => p.id).join(', ')}`;
}

2. 用后台脚本作为中间层操作IndexedDB #

如果一定要用IndexedDB，可以把数据库操作放在后台脚本（属于扩展上下文），内容脚本和弹窗都通过消息传递和后台交互，由后台统一处理数据读写。

步骤1：后台脚本初始化并管理IndexedDB #

let db;

// 初始化数据库
function initDB() {
  const openRequest = indexedDB.open('dbname', 1);
  openRequest.onupgradeneeded = e => {
    const db = e.target.result;
    if (!db.objectStoreNames.contains('profiles')) {
      db.createObjectStore('profiles', {keyPath: 'id'});
    }
  };
  openRequest.onsuccess = e => {
    db = e.target.result;
    console.log("后台数据库初始化完成");
  };
  openRequest.onerror = e => console.error("数据库打开失败", e);
}

// 监听内容脚本/弹窗的消息
browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
  switch(message.action) {
    // 保存数据
    case "saveProfile":
      const saveTx = db.transaction('profiles', 'readwrite');
      const saveStore = saveTx.objectStore('profiles');
      saveStore.put(message.data).onsuccess = () => sendResponse({success: true});
      saveStore.onerror = err => sendResponse({success: false, error: err.message});
      return true; // 保持消息通道开放至异步操作完成
    // 获取数据
    case "getProfiles":
      const getTx = db.transaction('profiles', 'readonly');
      const getStore = getTx.objectStore('profiles');
      getStore.getAll().onsuccess = e => sendResponse({success: true, data: e.target.result});
      getStore.onerror = err => sendResponse({success: false, error: err.message});
      return true;
  }
});

// 启动时初始化数据库
initDB();

步骤2：内容脚本发送数据到后台 #

// 收集数据后发送给后台
const collectedProfile = {id: "456", name: "new-test"};
browser.runtime.sendMessage({action: "saveProfile", data: collectedProfile})
  .then(res => console.log(res.success ? "保存成功" : "保存失败"))
  .catch(err => console.error("消息发送失败", err));

步骤3：弹窗请求后台获取数据 #

document.addEventListener('DOMContentLoaded', () => {
  browser.runtime.sendMessage({action: "getProfiles"})
    .then(res => {
      if (res.success) {
        logTimestamps(res.data);
        document.getElementById('utenti').innerHTML += 'SUCCESS';
      } else {
        console.error("读取失败", res.error);
        document.getElementById('utenti').innerHTML += 'FAIL';
      }
    })
    .catch(err => {
      console.error("消息请求失败", err);
      document.getElementById('utenti').innerHTML += 'FAIL';
    });
});

function logTimestamps(timestamps) {
  document.getElementById('utenti').innerHTML += `<br>There are ${timestamps.length} timestamp(s) saved in IndexedDB: ${timestamps.map(p => p.id).join(', ')}`;
}

3. 嵌入扩展页面iframe（不推荐） #

可以在内容脚本中嵌入一个指向扩展内部页面的iframe，通过iframe来操作扩展上下文的IndexedDB，再和内容脚本通信。这种方式比较繁琐，容易出问题，不如前两种方案靠谱，这里就不展开了。

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