从chrome.storage.local检索对象并使用它来更改当前页面的CSS

Question

我是开发chrome扩展的新手，我无法判断这是一个面向承诺链的问题（如果它甚至被称为），还是我错误地解析了这个对象。

我在弹出窗口中从这里获取一个变量.js：

window.onload=function(){grabData()}
function grabData() {
    let color = document.getElementById('test')
    chrome.storage.local.set({
            'color': color.style.backgroundColor
        }, function () {
            chrome.tabs.executeScript({
            file: "myscript.js"
        });
    });
}

我

把它发送到我的内容脚本（myscript.js），它看起来像这样：

chrome.storage.local.get('color',function(block){
    var color = JSON.stringify(block.color)
    $('code').css('background-color', color)
    console.log(color)
});

该控制台.log（颜色）的输出为 "rgb(107, 91, 149)" 。 显然，如果我将该颜色硬编码到$('code').css()中，它可以正常工作。

我在这里错过了什么？

Answer 1

Chrome 存储的 API 是异步的，所以我需要做的就是使用 promise 或回调函数来处理它。 我选择了回调函数选项，如下所示：

function getColor(key, callback) {
    if (key !== null) {
        chrome.storage.local.get(key,function (obj){
            callback(obj)
        });
    }
}

getColor('color', function(color){
    console.log(color)
})

简单干净！