Chrome扩展程序中的永久存储

Question

我想在Chrome扩展程序中拥有持久存储或持久存储 - 所以我目前要做的是创建一个Indexeddb数据库，并从另一个页面查询该数据库。

这是我的一个内容脚本中的内容：

        chrome.extension.sendRequest({
            "type": "search",
            "text": char
        },

这称之为：

search: function(text) {
    var entry = this.db_query(text);
    if (entry != null) {
        for (var i = 0; i < entry.data.length; i++) {
            var word = entry.data[i][1];
        }
    }
    return entry;
}

哪个在这里：

db_query: function(text) {
    var background = chrome.extension.getBackgroundPage();
    console.log(background);
    var open = indexedDB.open("CEDICT", 1);
    var db = open.result;
    var tx = db.transaction("CEDICT", "readwrite");
    var store = tx.objectStore("CEDICT");
    var index2 = store.index("simplified");

    var getData = index2.get(text);

    getData.onsuccess = function() {
        console.log(getData.result);
        return getData.result;
};


    tx.oncomplete = function() {
    db.close();
};
},

然而，尽管这是在后台脚本中，但它提供了一个空的indexedDB：

var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB || window.shimIndexedDB;

var open = indexedDB.open("CEDICT", 1);

open.onupgradeneeded = function() {
    var db = open.result;
    var store = db.createObjectStore("CEDICT", {autoIncrement:true});
    var index1 = store.createIndex("traditional", 'traditional');
    var index2 = store.createIndex("simplified", 'simplified');
};

open.onsuccess = function() {
    var db = open.result;
    var tx = db.transaction("CEDICT", "readwrite");
    var store = tx.objectStore("CEDICT");

store.put({"traditional": "三體綜合症", "simplified": "三体综合症", "tones": ["1", "3", "1", "2", "4"]});
store.put({"traditional": "□", "simplified": "□", "tones": ["1"]});
store.put({"traditional": "○", "simplified": "○", "tones": ["2"]});

等等...

tx.oncomplete = function() {
    db.close();
};

为什么indexedDB为空？难道我做错了什么？我第一次在添加它之后重新加载插件，它工作正常，给我我想要的值，但从那以后它没有工作，它返回空值。

这是我得到的错误：

_generated_background_page.html:1 Error in event handler for extension.onRequest: InvalidStateError: Failed to read the 'result' property from 'IDBRequest': The request has not finished.

这只是意味着我需要一个承诺或什么吗？

Answer 1

您无法按照代码建议从return getData.result;返回值。您需要更熟悉异步js才能使用indexedDB。

举一个简短的例子，假装你有一个按钮，并在这个按钮上有一个事件监听器。你能从事件监听器函数返回一个值吗？不可以。同样，您无法在此返回值。

简而言之，您可以将结果传递给回调函数。或使用承诺。

function db_query(..., callbackFunction) {
  getData.onsuccess = function(){
    // Instead of returning, call the callback function
    callbackFunction(getData.result);
  };
}

然后，不是获取db_query的结果，而是继续在callbackFunction体内执行。

db_query(..., function myCallback(value) {
  console.log(value);
});