I've made a chrome extension that block urls, defined in the extension's options.

I use declarativeNetRequest rules to handle the block list.

to reload the rules I listen for changes in the chrome.storage.sync

this works fine, but if I change more than one setting that I listen for the function "updateblocklist" will be triggered once for each setting that has been changed. This result in errors about the rule ids aren't unique since it's already taken, this is because the function will fire too quickly.

the updateblocklist remove all rules first and then add the blocked urls as rules.

background.js

chrome.storage.sync.onChanged.addListener(ps => {
    if (ps.list || ps.blocked || ps.homepage) {
        updateblocklist();
    }
});

So how can I still listen for multiple changes but only fire updateblocklist once?

I have the option of saving (clicking a button) or importing a json with the settings on my options page.

Importing json settings file:

chrome.storage.sync.clear(() => chrome.storage.sync.set(json, () => { location.reload();}))

Clicking save button:

chrome.storage.sync.set({
'list': document.getElementById('list').value,
'blocked': document.getElementById('blocked').value,
'homepage': document.getElementById('homepage').value
});