Google Chrome extension popup open event and focus, blur event

Question

I have tried numerous of tricks and the normal stuff to try and make this work but none of them worked. I am trying to check when the popup of a Google Chrome extension gets opened and when an input element gets blurred or focused. I have tried jQuery and just vanilla Javascript but to no avail.

document.getElementById('username').onblur = function() {
    alert('Blurred');
};

This doesn't do anything when the element with the id "username" gets blurred, the same is onfocus. Inline tags aren't working either.

document.onload = function() {
    alert('Loaded');
};

This only loads when the extension gets reloaded which I don't want. There are some other tricks I tried but all of them lead to nothing.

Answer 1

I have found a way to check for onblur, here is the code:

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('input').addEventListener('blur', blurHandler);
});

function blurHandler() {
    alert('This will appear when an input gets blurred.');
}

Place this in your popup.js file in order to make it work, more information can be found here .