跨域IndexedDB存储问题：Chrome扩展记录SSO页面跳转如何实现统一存储

你遇到的跨域IndexedDB隔离问题，本质是因为你将存储逻辑写在了**内容脚本（Content Script）**中，内容脚本运行在被注入页面的上下文环境中，继承的是页面自身的源（Origin），因此不同域名下的IndexedDB天然隔离，无法共享数据。

方案1：将存储逻辑迁移到扩展后台上下文（最优解） #

Chrome扩展的后台服务工作者（Manifest V3）/后台页（Manifest V2）属于扩展独立的安全源（格式为chrome-extension://<你的扩展ID>/），该上下文下的IndexedDB是全局唯一的，不受访问页面域名的限制，完全可以满足你构建统一跳转树的需求。

改造步骤： #

1. 配置扩展清单文件（以Manifest V3为例）

{
  "manifest_version": 3,
  "name": "SSO跳转链路追踪",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "permissions": ["storage"]
}

2. 改写内容脚本（content.js）
   删除原有IndexedDB逻辑，仅负责收集页面数据并发送给后台：

// 发送当前页面URL及关联信息到后台存储
chrome.runtime.sendMessage({
  action: 'addTrackLink',
  data: {
    url: window.location.href,
    referrer: document.referrer,
    timestamp: Date.now()
  }
})

3. 后台脚本（background.js）统一处理存储逻辑
   你原有的IndexedDB逻辑可以直接迁移到这里，同时增加消息监听处理：

// 初始化IndexedDB
let db;
const request = indexedDB.open("SSOTrackDatabase", 1);

request.onupgradeneeded = function (e) {
  db = e.target.result;
  // 存储结构化数据，方便后续构建跳转树
  const store = db.createObjectStore("ssoLinks", { autoIncrement: true, keyPath: 'id' });
  // 按域名、跳转来源建索引，方便后续查询链路
  store.createIndex("domain", "domain", { unique: false });
  store.createIndex("referrer", "referrer", { unique: false });
};

request.onsuccess = function (e) {
  db = e.target.result;
};

request.onerror = function (e) {
  console.error("数据库打开失败:", e.target.errorCode);
};

// 监听内容脚本发送的消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'addTrackLink') {
    const { url, referrer, timestamp } = message.data;
    const domain = new URL(url).hostname;
    
    // 写入IndexedDB
    const tx = db.transaction("ssoLinks", "readwrite");
    const store = tx.objectStore("ssoLinks");
    store.put({ url, referrer, timestamp, domain });
    
    tx.oncomplete = () => {
      console.log("链路数据存储成功");
    };
    tx.onerror = (e) => {
      console.error("数据存储失败:", e.target.error);
    };
  }
});

方案2：使用Chrome扩展原生存储（轻量场景推荐） #

如果你的数据量低于10MB（申请unlimitedStorage权限可突破上限），可以直接使用chrome.storage.localAPI，无需操作IndexedDB，开发更简单：

// 后台存储示例
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'addTrackLink') {
    chrome.storage.local.get('ssoTrackTree', (res) => {
      const trackTree = res.ssoTrackTree || [];
      trackTree.push(message.data);
      chrome.storage.local.set({ ssoTrackTree: trackTree });
    });
  }
});

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