CODEWITHSUNDEEP
javascript
amit.s19
amit.s19

Reputation: 205

Remove already existing event listener in JavaScript?

I have noticed my AdBlocker removes click event listeners in JavaScript. I would like to remove click event listeners on the page and am not sure how to do so.

I read that generally I cannot remove event listeners I don't have a reference to from JavaScript but I am wondering if there is some way to remove event listeners given this is my browser since the AdBlocker manages to do it somehow.

How can I remove click event listeners from the JavaScript console programmatically?

Upvotes: 1

Views: 493

Answers (1)

Benjamin Gruenbaum
Benjamin Gruenbaum

Reputation: 276516

Your AdBlocker cheats by connecting to the browser's debugger which has elevated permissions page JavaScript does not have.

This is because (by design) there is no way to get existing page event listeners and remove them.

Using Event capture

You can intercept events before the page (most likely) by adding an event in "capture mode" and preventing the event from propagating to the page - but the page simply has better hooks than you since the devtools only let you run code after the page runs:

document.documentElement.addEventListener('click', (e) => {
  e.preventDefault(); // stop the click
  // still fire the event on the video player so you can click it
  document.querySelector('video').dispatchEvent(e);
}, { useCapture: true });

This is because the page can simply attach the event (in capture) before you and since there is no way to "prepend" a listener they can "win" this battle.

What you can do

Luckily, the devtools also has superpowers! It can call into debugger methods and provides utilities that normal page JavaScript does not have:

// This works in Chrome, Firefox, Safari
const listeners = getEventListeners(document);
// Also get the listeners for document.body and so on until you find it
for(const { listener, useCapture} of listeners.click) {
  // remove the listener
  document.removeEventListener(listener, { useCapture });
}

Which is a better hook than the page has and should always work.

Extensions do this by directly "talking debugger" and using the chrome.debugger interface to call DOMDebugger.getEventListeners

Upvotes: 2

Related Questions