I think the documentation for chrome.storage API (here) is currently not clear. I'm using this code to add a listener:

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);
    }
  });

But how do i remove this listener? How to use the chrome.storage.onChanged.removeListener() method?

I think the documentation for chrome.storage API (here) is currently not clear. I'm using this code to add a listener:

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);
    }
  });

But how do i remove this listener? How to use the chrome.storage.onChanged.removeListener() method?

• javascript
• google-chrome
• google-chrome-devtools

Share Improve this question Follow edited Nov 10, 2015 at 20:35 user4555547 asked Nov 10, 2015 at 19:54 Rocco MusolinoRocco Musolino 6381010 silver badges2323 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

The chrome.storage.onChanged.removeListener takes the listener function you added as an input, so to remove it later, you have to store the function in a variable. Following code will work:

var myListenerFunction = 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);
    }
};

// Add listener
chrome.storage.onChanged.addListener(myListenerFunction);

// Change value, will show output in console.log
chrome.storage.sync.set({'value': 'asd'});

// Remove listener
chrome.storage.onChanged.removeListener(myListenerFunction);

// Change value, will NOT show output in console.log as listener was removed
chrome.storage.sync.set({'value': 'asd123'});

Additional reading - The Events part of the Chrome extensions spec - https://developer.chrome./extensions/events

I didn't see chrome.storage.onChanged.removeListener in the page you provided.

Could you try assigning the callback function into a variable and pass it to AddListener. Then use that to remove

var changeListener = 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);
    }
 };


chrome.storage.onChanged.removeListener(changeListner);