Пользовательский фон для расширения замены новой вкладки Chrome

Question

Я разрабатываю новое расширение для замены вкладок для Google Chrome, и я хотел бы позволить пользователю настраивать фон, для этого я использую API storage.sync, как предложено this page.

Проблема заключается в том, что изменения стиля применяются асинхронно, поэтому при загрузке страницы ненадолго используется фон по умолчанию (белый), что приводит к неудовлетворительным миганиям .

Возможные (неудовлетворительные) решения:

• не позволяют изменять фон;
• жестко кодируют черный фон в CSS (и переносят проблему).для пользовательских светлых фонов);
• использовать CSS-переход (все еще супер-уродливый).

Какой может быть альтернативный подход?

---

Следует заминимальный пример.

manifest.json

{
    "manifest_version": 2,
    "name": "Dummy",
    "version": "0.1.0",
    "chrome_url_overrides": {
        "newtab": "newtab.html"
    },
    "permissions": [
        "storage"
    ]
}

newtab.html

<script src="/newtab.js"></script>

newtab.js

chrome.storage.sync.get({background: 'black'}, ({background}) => {
    document.body.style.background = background;
});

Answer 1

Я придумаю разумное решение. По сути, поскольку API localStorage является синхронным, мы можем использовать его в качестве кэша для storage.sync.

Примерно так:

newtab.js

// use the value from cache
document.body.style.background = localStorage.getItem('background') || 'black';

// update the cache if the value changes from the outside (will be used the next time)
chrome.storage.sync.get({background: 'black'}, ({background}) => {
    localStorage.setItem('background', background);
});

// this represents the user changing the option
function setBackground(background) {
    // save to storage.sync
    chrome.storage.sync.set({background}, () => {
        // TODO handle error
        // update the cache
        localStorage.setItem('background', background);
    });
}

Это не работает в 100% случаев, но и простое:

document.body.style.background = 'black';

Так что это достаточно хорошо. *

---

¹ В реальном расширении я изменяю переменные CSS напрямую и получаю гораздо лучшие результаты, чем установка стиля элемента.