I am making an extension for university site, which i have no back-end access to. The task is to reorganize certain block elements, for which im trying to store information about in the string with numbers (elements are added into this string after the page loads). It worked well with localStorage, but ultimately there was a problem - each time the site admins update the site, the cache get cleared and the data is lost, so i choose to move to chrome.storage API.

Now, here is the problem. The behavior of chrome.storage.sync.get is rather incosistent, it might be slow enough to not get any data in the cache in time for MutationObserver to start working. I understand chrome.storage.sync.get is a asynchronous callback, but have no way to force it to work before the page starts getting filled.

window.toDelete = [];

chrome.storage.sync.get('course', function(entries){
    window.toDelete = deserializeEntries(entries.course);
    console.log("hello");
})

// Mutation observer declaration and .observe call

In this example it might go either way, "hello" being printed before or after MutationObserver does all the work. I have a call that prints the contents of toDelete in MutationObserver to tell if it works with properly filled cache or not. Example 1 Example 2