Извлечение объекта из chrome.storage.local и использование его для изменения CSS текущей страницы

Question

Я новичок в разработке расширений Chrome и не могу сказать, является ли это проблемой, ориентированной на цепочку обещаний (если она даже называется), или я неправильно анализирую этот объект.

Я беру переменную отсюда в popup.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)
});

Вывод этого console.log (цвет) - "rgb(107, 91, 149)". Очевидно, что если я жестко закодирую этот цвет в $('code').css(), он будет работать нормально.

Что мне здесь не хватает?

Answer 1

API для хранилища chrome является асинхронным, поэтому все, что мне нужно было сделать, это обработать его с помощью обещания или функции обратного вызова. Я выбрал опцию функции обратного вызова так:

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


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

Просто и чисто!