How to remove event listener in Chrome extension

Question

I am trying to remove the onRequest listener added by chrome.extension.onRequest.addListener after a request is made, like this:

chrome.extension.onRequest.addListener(
    function(request){
        chrome.extension.onRequest.removeListener();
        other_function(request);
    }
);

The problem is that I don't know if this works or not. I tried chrome.extension.onRequest.hasListener, which seems not to give the right answer, so I am wondering if there are some other ways to remove the onRequest listener or check if the listener exists or not.

Thanks!

Gardant

Answer 1

removeListener takes an argument. You need to name the listener function and then remove it by name:

function doStuff(request){
    chrome.extension.onRequest.removeListener(doStuff);
    other_function(request);
}
chrome.extension.onRequest.addListener(doStuff);

Or, more succinctly:

chrome.extension.onRequest.addListener(
    function doStuff(request){
        chrome.extension.onRequest.removeListener(doStuff);
        other_function(request);
    }
);

Luciana

Thanks, apsillers, but doesn't the callback function (doStuff in this case) of the event listener need to be anonymous? – Gardant

@chaohuang: no, there's no requirement for callbacks to be anonymous. – Ainsworth

@Len So does this mean that this is different from the callbacks of element.addEventListener in DOM, as mentioned here (below the first example, it says, quote, "If you want to pass parameters to the listener function, you have to use an anonymous function.")? – Gardant

@chaohuang: They're using an anonymous function as contrasted to specifying the function name only—because they want to pass some argument to the function. If you wanted to use removeEventListener with that anonymous function, you'd have to pre-bind the function to a name, e.g. var modifyTextFour = function() { modifyText("four"); }; (or function modifyTextFour() { modifyText("four"); }), then use that name with addEventListener and removeEventListener`. The function is still anonymous, per se, you've just bound it to a name afterwards. – Ainsworth

@chaohuang: They say anonymous function, but what they really mean is that you can't pass an arbitrary argument to the callback, like "four" in that example's case—construct another function which does that part. If you want to remove the listener later, you'll need to have the same function you gave to addEventListener. – Ainsworth

Indeed, that MDN description is a little bit vague. Len's explanation is pretty good; I'll just add: if want to pass arbitrary arguments to a listener function that aren't provided to the callback by the caller, you need to wrap inside an anonymous function. – Luciana

Dear @Luciana , I have an extension (as my background) which communicate with an external page (as my content script). How is possible to terminate listening in the content script side? I am using port.onMessage.removeListener(this); , however it is not worked! – Inlaw

@H.Aqjn this is almost never a function. When a function is called, this is the object that the function is called for, e.g., foo.bar() has a this of foo, not bar. --- The content script probably cannot remove listeners from the background; you must pass a message to your background telling it to remove a listener. If this answer does solve your problem, please post a new answer (and optionally link to this answer to show why it didn't solve your problem). – Luciana

Dear @Luciana , my questions reach to limit and I could not ask more question. However, I do not want to remove listener of background from content script. Indeed, I want to remove the listener of content script in itself. I have a bidirectional communication between an external web page(or my content script) and a chrome extension (or my background). – Inlaw

Answer 2

Another simple and straight forward approach when using anonymous functions:

chrome.runtime.onMessage.addListener(function(msg, sender, reply) {
    chrome.runtime.onMessage.removeListener(arguments.callee);
});

Brickey

arguments.callee is not supported in strict mode as of EcmaScript 5 (2009) – Expiate

Answer 3

// define listener(s)
const createListener = (id, bookmark) => {
  // do something
};

React.useEffect(() => { 
  // Add listener(s)
  chrome.bookmarks.onCreated.addListener(createListener);

  // Return a function that removes listener(s)
  return () => {
    chrome.bookmarks.onCreated.removeListener(createListener);
  };
}, []);

Tipple