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(["control-textarea"], 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 exe…

Accepted Answer

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();`.

override existing onkeydown function

Solution

Problem