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?
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.
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.
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