如果扩展程序的文件发生更改，请更新chrome.storage

Question

我有一个Chrome扩展程序 ，该扩展程序使用chrome.storage跟踪样式表以应用于页面内容。 这些样式表之一是必需的默认样式表，如果用户的chrome.storage中不存在该文件，我会首先从Chrome的扩展文件中加载该样式表。 这很好。

但是，有时我会使用不同的规则来更新此默认样式表，以改善样式。 扩展程序运行时，它会检查默认样式表是否存在，并查找样式表的旧版本-因此它不会从扩展程序的存储中加载任何内容。 因此，用户仍在使用旧版本的样式表。

在我的本地计算机上，我可以手动清空chrome.storage并加载新的chrome.storage ，但是我无法通过扩展程序在发布后进行此操作，因为我不想每次运行扩展程序时都清空它，也不想仅知道Chrome扩展文件中样式表已更新的时间。

我可以通过检查两个文件的每个字符，比较它们是否相同以及是否加载扩展名的样式表来解决此问题，但这似乎过分且容易出错。

仅在扩展程序的样式表更新而无需更改文件名的情况下，有没有更简单的方法来更新chrome.storage的样式表？

如果您想看一下我的实现，则整个项目在GitHub上都是开源的。

Answer 1

在与Florian的微谈中 ，我使用了第二个chrome.storage空间，提出了以下解决方案。

我已经在检查用户的Chrome存储空间中是否存在样式表，如果不存在，则从扩展程序的文件中加载样式表。 为了使它在更改时自动更新，我现在检查是否从Chrome的存储中加载样式表时，第二个chrome.storage空间保存了版本号。 基本方法如下：

// Helper function that checks whether an object is empty or not
function isEmpty(obj) {
    return Object.keys(obj).length === 0;
}

var stylesheetObj = {}, // Keeps track of all stylesheets
    stylesheetVersion = 1; // THIS NUMBER MUST BE CHANGED FOR THE STYLESHEETS TO KNOW TO UPDATE

chrome.storage.sync.get('just-read-stylesheets', function (result) {
    // Here 'results' is an object with all stylesheets if it exists

    // This keeps track of whether or not the user has the latest stylsheet version
    var needsUpdate = false; 

    // Here I get the user's current stylesheet version
    chrome.storage.sync.get('stylesheet-version', function (versionResult) {

        // If the user has a version of the stylesheets and it is less than the cufrent one, update it
        if(isEmpty(versionResult) 
        || versionResult['stylesheet-version'] < stylesheetVersion) {

            chrome.storage.sync.set({'stylesheet-version': stylesheetVersion});

            needsUpdate = true;
        }

        if(isEmpty(result) // Not found, so we add our default
        || isEmpty(result["just-read-stylesheets"])
        || needsUpdate) { // Update the default stylesheet if it's on a previous version

            // Open the default CSS file and save it to our object
            var xhr = new XMLHttpRequest();
            xhr.open('GET', chrome.extension.getURL('default-styles.css'), true);
                // Code to handle successful GET here
            }
            xhr.send();
            return;
        }

        // Code to do if no load is necessary here
    });
});

这样一来，为用户更新样式表的唯一更改就是stylesheetVersion ，请确保它大于以前的版本。 例如，如果我更新了样式表并希望用户的版本自动更新，则可以将stylesheetVersion从1更改为1.1 。

如果您需要更全面的实现，则可以在GitHub上找到JS文件。

Answer 2

尝试使用chrome.storage.sync并将侦听器添加到其*onChanged*事件。 只要存储空间发生任何变化，就会触发该事件。 这是监听保存更改的示例代码：

chrome.storage.onChanged.addListener(function(changes, namespace) {
    for (key in changes) {
        var storageChange = changes[key];
        console.log('Storage key "%s" in namespace "%s" changed. ' +
        'Old value was "%s", new value is "%s".',
        key,
        namespace,
        storageChange.oldValue,
        storageChange.newValue);
    }
});