Intercept (and perhaps cancel) page's mouse/keyboard event handlers

Question

I'm trying to create a Chrome Extension that deals with selected text. Some website pages' otherwise selectable text content has click/mouse-up/down event handlers that navigate to a new page.

Is there a way from the background or content script to temporarily disable (and restore) the page's arbitrary event handlers without interfering with the native text selection?

Worst case I'm thinking of is to detach, clone the body html, allow the selection, and then restore the bound original. Seems like trouble.

Thanks!

Thaothapa

Answer 1

Most HTML DOM events follow the capture-target-bubble event model. This means, for example, that if you click on a button, that the "click" event is first dispatched at the root, all the way down to the button, then back up. Event propagation can be stopped, which prevents the event listener at the next level from being notified of the event.

The earliest possibility of receiving the event is at the root, often window at the capture phase. To bind an event listener to the capture phase, use addEventListener with the third parameter set to true:

// in a content script, at run_at:document_start
window.addEventListener('click', function(event) {
    event.stopImmediatePropagation();
}, true);

Many web pages use jQuery to manage DOM events, which binds the event listeners at the bubbling phase, so the previous method will work on most sites. If the page does not use jQuery, then you have to bind your event listener at document_start to make sure that your event listener is triggered before every other event listener.

Warner

sorry, this is not applicable to the question – Thaothapa

@uosɐſ How did you manage to figure out in 45 seconds that the answer is not applicable? If you want to prevent the page from interfering with native events, then the only reliable way to do that is to stop the page from seeing these events. – Warner

it doesn't take into account the nuances of the isolated world of chrome extensions. This is an answer about general DOM event information. – Thaothapa

@uosɐſ The isolated world only applied to the JavaScript execution context, not the DOM events. Therefore the isolated worlds in content scripts are not relevant to the question or answer. The answer to your question is not necessarily extension-specific. In fact, the only extension-specific part of the answer is at the very end of the answer (the line about run_at:document_start). – Warner

OK, my bad +1. The insight about 'document_start' giving the isolated world an opportunity to inject a page-script and pre-process other events might work. Unless the page's regular scripts remove all such handlers. I was hoping for something more powerful in the Chrome Extensions APIs and this looked like a standard javascript event model explanation. Sorry. – Thaothapa

@uosɐſ The page cannot remove the built-in handlers, since it does not have a reference to the function that was used to register the event listener. I've edited the answer so you can change your locked-in vote. – Warner