override existing onkeydown function

Question

My extensions go through every input entered on an on any website that is loaded.

What I do is I consider every onkeydown and manipulate it if it has some value.

my background js file contains the following:

document.onkeydown = returnKey; 

function returnKey(evt) {   
    var evt  = (evt) ? evt : ((event) ? event : null);
    var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);  
    if ( node.value == 'fi' ) { evt.srcElement.value = "??"; }  
}

My problem is when I have websites that already contains onkeydown function in their innerHTML webpage.

for instance:

taken from facebook's homepage:

<textarea class="uiTextareaAutogrow input" onkeydown="Bootloader.loadComponents([&quot;control-textarea&quot;], function() { TextAreaControl.getInstance(this) }.bind(this));

the switching of node.value == 'fi' in ?? is not executing since their onkeydown="Bootloader...runs before my document.onkeydown.

How do I cause my function to run before their onkeydown is executed?

Answer 1

Instead of document.onkeydown = returnKey;, use

document.addEventListener('keydown', returnKey, true);

The most important part of this line is the third argument. When the value of this parameter is true, the event listener is triggered at capturing phase, which cannot be prevented using event.preventDefault(); or event.stopPropagation();.