Conflict between extension and webpage eventlistener

Add-ons Development
#1

Hi all,

I’m trying to write (for fun) a webextension that let me navigate a webpage with my keyboard. It’s a bit like a minimalist version of Tridactyl. However, I’m facing a problem.

The problem is that some websites (e.g. Twitter) also use keyboard navigation for their interface. So, if my webextension create an eventlistener that call a function everytime I press, for example, the letter J and the webpage also has an eventlistener for that key then the webpage prevent my eventlistener to work.

My question is: How could I temporarily block an (or all) eventlistener from a webpage but still have the possibility to reactivate them if needed?

I know it’s possible since Tridactyl does it but I haven’t find where the magic happens in their code. It isn’t a small codebase!

#2

I would say this is it:

See the 3rd parameter (options) where you set capture to true:

capture : A Boolean indicating that events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree.

Once you have your event listener executed before any other listener, you can simply call stopPropagation on the event object:

1 Like
#3

Aha. Thanks! stopPropagation was the missing part.