I have a situation where I have a variable in cloud storage, that I am fetching asynchronously every time I want to do something with it. Currently the code looks like this:

chrome.tabs.onUpdated.addListener(function() {
        // Fetch example_variable from storage, then
        // Do things with example_variable...
});

chrome.tabs.onActivated.addListener(function() {
        // Fetch example_variable from storage, then
        // Do things with example_variable...
});

Since fetching the example_variable from the cloud every time the events trigger (it can happen more than a dozen times per minute) is very inefficient, I was thinking about restructuring it like this:

chrome.storage.onChanged.addListener(function() { // Everytime the cloud variable changes
        // Fetch example_variable from storage, then
        // set example_variable to what I fetched.
});

chrome.tabs.onUpdated.addListener(function() {
        // Do things with example_variable...
});

chrome.tabs.onActivated.addListener(function() {
        // Do things with example_variable...
});

My first thought was to create new listeners inside of the storage update listener (and close the old ones), but the Chrome Extension documentation directly warns against this.

I could use globally-scoped variables, but that seems incredibly janky and inelegant.

I'd appreciate any help!