Question

我正在开发一个chrome扩展程序，它将给定页面上的pries转换为用户需要工作以获得该数量的小时数。扩展程序通过弹出窗口接收用户工资信息，然后将其设置为chrome存储。那部分工作正常。

我遇到问题的方法是访问该值并使用它来运行计算。 JS很好地解析了值并调用了convert函数，但是在计算中只使用占位符每小时值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);
                }
            });
        }
    }
}

功能无法访问扩展程序中的Chrome存储值

1 个答案: