Capturing clicks in a chrome extension

If you are writing a Chrome extension that needs to capture the clicks on the page, here is something that you need to keep in mind.

Video

Transcript

If you are writing a chrome extension that needs to capture the clicks on the page, here is something that you need to keep in mind, Let's say that this is the code of your chrome extension. This is executed in the "main world", so if we checked manifest.json we can see content script is declared to be executed in the "main world". Let's say we want to capture all clicks user makes. To do that we can create a simple event listener for a click event. Let's see how this works. We have to install this Chrome extension, we reload the page. Now when we click anywhere we can see this event being logged in the console. But if I open this emoji menu, and than click this close icon, I can not see this event.

This is because Gmail is using event stop propagation to stop propagation of this click event so what we need to do is to overwrite this method, and whenever Gmail call this method - we will capture this, and we still be able to log this event in the console.

let's refresh the chrome extension, reload Gmail. Now let's try clicking on this button again. Now we can se this event being logged in the console.

Thank you!