Chrome Extension：Background Script无法访问Content Script创建的IndexedDB

核心原因在于Chrome扩展的上下文存储隔离机制：

• Content Script是注入到宿主网页中运行的，它的IndexedDB属于当前网页的存储域——就像普通网站的IndexedDB只能被该网站访问一样，Content Script的DB完全绑定到它所在的网页上下文。
• Background Script运行在扩展自身的独立后台页面上下文中，这个上下文拥有完全独立的存储空间，和任何网页（包括Content Script所在的网页）的存储系统都是隔离的。这是Chrome的安全设计，目的是隔离扩展核心逻辑与网页内容，避免数据泄露或意外干扰。

可行的解决方案 #

根据你的需求，这里有几种常用的解决思路：

1. 改用扩展专属的Storage API #

如果数据量不大，chrome.storage.local（或chrome.storage.sync用于跨设备同步）是最省心的选择。注意File对象无法直接存入，需要先序列化：

// Content Script中序列化File并存储
const reader = new FileReader();
reader.onload = (e) => {
  chrome.storage.local.set({
    [file.name]: e.target.result // 转为Data URL
  }, () => {
    console.log('文件已存储到扩展Storage');
  });
};
reader.readAsDataURL(file);

// Background Script中读取并还原
chrome.storage.local.get('目标文件名', (result) => {
  const fileData = result['目标文件名'];
  const blob = dataURLToBlob(fileData);
  // 此处处理Blob/File对象
});

// 辅助函数：Data URL转Blob
function dataURLToBlob(dataUrl) {
  const arr = dataUrl.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while(n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {type: mime});
}

2. 通过消息通信共享数据 #

让Content Script和Background通过Chrome的消息API互相传递数据请求：

// Content Script：响应Background的读请求
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.action === 'getIndexedDBData') {
    // 从Content Script的IndexedDB中读取数据
    readFromIndexedDB(msg.key).then(data => {
      // 序列化数据后发送
      const serializedData = JSON.stringify(data); // 或转Data URL
      sendResponse({ success: true, data: serializedData });
    }).catch(err => {
      sendResponse({ success: false, error: err.message });
    });
    return true; // 保持消息通道开放直到异步操作完成
  }
});

// Background Script：发送读请求
chrome.runtime.sendMessage({ action: 'getIndexedDBData', key: '目标键' }, (response) => {
  if (response.success) {
    const data = JSON.parse(response.data); // 反序列化
    // 处理数据
  } else {
    console.error('读取失败:', response.error);
  }
});

3. 将IndexedDB移到Background上下文 #

如果希望统一管理数据，直接把IndexedDB的创建、读写逻辑都放在Background Script里，Content Script仅通过消息请求Background执行操作。这样所有操作都在同一个上下文的DB中，完全避免跨上下文隔离问题。

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