Question

我有一个使用存储空间的Chrome扩展程序，只需输入一次点击即可从存储中获取值。

有一个输入字段。在用户输入值并按Enter后，扩展名应从存储中获取值并将用户的输入添加到此值。第一次输入按下它不起作用，但如果用户第二次单击Enter，则会看到存储的值。

我认为问题在于函数的排序，但我无法理解究竟在哪里。

代码的顺序正确：

var repo, moduleCodes, url;

// Third process
function getStoredUrl() {
    chrome.storage.sync.get(function (item) {
        url = item.savedUrl;
    });
}

// Fourth process
function setVariables() {
    repo = document.getElementById("repo").value.toLowerCase();

    moduleCodes = {
        admin: "EHEALTHADM"
    };
}

// Second process
function openGraph() {

    getStoredUrl();
    setVariables();

    if (moduleCodes[repo] !== undefined) {
        // ERROR: field "test" doesn't have value url, but should to have
        document.getElementById("test").value = url;
        //window.open(url + moduleCodes[repo]);
    } else {
        returnError("Can't find repo " + repo, "repo");
    }
}

var enter = 13;

// First process
function inputRepoListener(e) {
    "use strict";

    if (e.keyCode === enter) {
        openGraph();
    }
}

整个代码可以在gitHub repo：https://github.com/iriiiina/fisheyeGraph

上看到

Answer 1

这是由异步方法调用引起的典型竞争条件。

对storage.sync.get的调用是异步的，即在检索存储值时正常的程序流程继续。这意味着，在存储值检索完成之前，将（仍然为空的）url变量分配给ID为test的元素也会发生。

解决方案：在将检索到存储值后，将发生的所有内容移动到storage.sync.get的回调中。例如，如果您像这样分配url，那么它将起作用。

chrome.storage.sync.get(function (item) { url = item.savedUrl; document.getElementById("test").value = url; });

因此，您需要重新构建代码才能符合此标准。

Chrome扩展程序：只需点击一下即可从存储中获取价值

1 个答案: