Question

我正在为Google Chrome开发一个新的标签替换扩展程序，我想允许用户自定义背景，为此，我使用了{{3}所建议的storage.sync API }页面。

问题在于样式更改是异步应用的，因此在页面加载期间会短暂使用默认背景（白色），从而导致 flash 不愉快。

可能的（不令人满意的）解决方案是：

不允许更改背景；
在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

我想出了一个合理的解决方案。基本上，由于localStorage API是同步的，我们可以将其用作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变量，并且比设置元素样式获得更好的结果。

Chrome新标签页替换扩展程序的自定义背景

1 个答案: