javascript - 函数无法访问扩展程序中的 Chrome 存储值

Question

我正在开发一个 Chrome 扩展程序，它将给定页面上的价格转换为用户赚取该金额所需的工作时间。该扩展程序通过弹出窗口获取用户工资信息，然后将其设置在 Chrome 存储中。这部分工作正常。

我遇到的问题是访问该值并使用它来运行计算。 JS 很好地解析了这些值并调用转换函数，但在计算中仅使用占位符每小时值 1，而不是从 chrome 存储中检索它。相反，它似乎在所有解析之后访问 chrome 存储(我根据控制台日志运行的时间计算出这一点)。

你知道是什么原因造成的吗？我尝试将整个解析移动到它自己的函数中，以便在 $(document).ready(function) 末尾调用，但它仍然无法从 Chrome 存储中获取值。

在 content.js 中:

function convert(price){
    var hourly = 1;
    chrome.storage.sync.get('hourly', function(result){
        hourly = result.hourly;
        console.log(hourly);
    });
    return price / hourly;
}

var elements = document.getElementsByTagName('*');

for (var i = 0; i < elements.length; i++) {
var element = elements[i];

    for (var j = 0; j < element.childNodes.length; j++) {
        var node = element.childNodes[j];

        if (node.nodeType === 3) {
            var text = node.nodeValue;
            if (text[0] == '$'){
                if (/\s/.test(text)){
                    var price = text.substring(0, text.indexOf(' '));
                    var priceNum = text.substring(1, text.indexOf(' '));
                    var time = convert(parseFloat(priceNum));
                    var timeStr = time.toFixed(2);
                    if (text.length > 5){
                        var remainder = text.substring(4);
                        var nextPrice = remainder.indexOf('$');
                        if (nextPrice != -1){
                            var priceTwo = remainder.substring(nextPrice);
                        }
                        var priceTwo = null;
                    }
                }
                else {
                    var price = text.substring(0);
                    var priceNum = text.substring(1);
                    var time = convert(parseFloat(priceNum));
                    var timeStr = time.toFixed(2);
                }
            }
            var replacedText1 = text.replace(price, timeStr);
            if (replacedText1 !== text) {
                element.replaceChild(document.createTextNode(replacedText1 + ' hours'), node);
            }
        }
    }
}

Answer 1

chrome.storage.sync.get 通过回调异步返回结果。您可以通过将 chrome.storage.sync.get 包装在 Promise 中来获取结果，然后在 then 函数中接收外部解析的数据:

function convert(price){
    var hourly = 1;
    return new Promise(function(resolve, reject) {
        chrome.storage.sync.get('hourly', function(result){
            hourly = result.hourly;
            resolve(price / hourly);
        });
    });
}

var elements = document.getElementsByTagName('*');

for (var i = 0; i < elements.length; i++) {
var element = elements[i];

    for (var j = 0; j < element.childNodes.length; j++) {
        var node = element.childNodes[j];

        if (node.nodeType === 3) {
            var text = node.nodeValue;
            if (text[0] == '$'){
                if (/\s/.test(text)){
                    var price = text.substring(0, text.indexOf(' '));
                    var priceNum = text.substring(1, text.indexOf(' '));
                    if (text.length > 5){
                        var remainder = text.substring(4);
                        var nextPrice = remainder.indexOf('$');
                        if (nextPrice != -1){
                            var priceTwo = remainder.substring(nextPrice);
                        }
                        var priceTwo = null;
                    }
                }
                else {
                    var price = text.substring(0);
                    var priceNum = text.substring(1);
                }
            }
            convert(parseFloat(priceNum)).then(function(time) {
                var timeStr = time.toFixed(2);
                var replacedText1 = text.replace(price, timeStr);
                if (replacedText1 !== text) {
                    element.replaceChild(document.createTextNode(replacedText1 + ' hours'), node);
                }
            });
        }
    }
}