Question

我正在尝试构建一个浏览器扩展，其中包含一个内容脚本，用于从访问过的网页中收集数据并将其保存到IndexedDB中。

该扩展程序有一个＆＃34;设置页面＆＃34;这是一个HTML弹出窗口;我希望这个页面能够访问内容脚本使用的相同indexedDB中的数据，但到目前为止我没有成功。

我认为问题可能是由浏览器CORS策略引起的（我现在正在Firefox上测试它），但如果使用本地存储API也不会发生同样的问题 - 在这种情况下，我可以轻松访问相同的信息两个脚本。

以下是设置页面用于打开数据库的代码（内容脚本使用的相同代码，正确检索插入的所有数据）：

var db;
var openRequest = indexedDB.open('dbname', 1);

openRequest.onupgradeneeded = function(e) {
  var db = e.target.result;
  if (!db.objectStoreNames.contains('profiles')) {
    var storeOS = db.createObjectStore('profiles',
      {keyPath: 'id'});
  }
};
openRequest.onsuccess = function(e) {
  console.log('[*] Local database opened successfully');
  db = e.target.result;
  document.getElementById('utenti').innerHTML += 'SUCCESS';
};
openRequest.onerror = function(e) {
  console.log('[!] Error while opening local database');
  console.dir(e);
  document.getElementById('utenti').innerHTML += 'FAIL';

};

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

function getProfiles() {
    var tx = db.transaction('profiles', 'readonly');
    var profilesDB = tx.objectStore('profiles');

    if ('getAll' in profilesDB) {
      profilesDB.getAll().onsuccess = function(event) {
        logTimestamps(event.target.result);
      };
    } else {
      var timestamps = [];
      profilesDB.openCursor().onsuccess = function(event) {
        var cursor = event.target.result;
        if (cursor) {
          timestamps.push(cursor.value);
          cursor.continue();
        } else {
          logTimestamps(timestamps);
        }
      };
    }

}

我试过＆＃34;手动＆＃34;从设置页面脚本将项添加到IndexDB中;这样做，内容可以从数据库中正确提取。

因此，我认为这必须是在两个脚本之间共享相同数据库的问题。我怎样才能做到这一点？谢谢！

Answer 1

只要两个脚本共享相同的源，您就可以从两个脚本连接到同一个indexedDB数据库。要从两个共享相同源的脚本连接到同一个indexedDB数据库，请在每个脚本中打开与同一数据库名称的连接。

在addon内容脚本和设置页面之间共享的IndexedDB实例

1 个答案: