How to get and update a list of all elements that have mouse event listeners && a pointer cursor?

elements that have a pointer cursor are either by default clickable elements like links and buttons, or elements that have their css property cursor set to pointer.

some optimizations are needed so not to naively and excessively call getComputedstyle and ruin performance, right?

is it gonna only require the monkey patching/wrapping of add/removeEventListener like how Zone.js does – to catch the adding and removing of events listeners on elements? and not need getEventListeners from DOMDebugger API.

in case you’re wondering what’s the use case,
it’s to make vimium show hints on all clickable elements it currently misses, it doesn’t need and require dev tools permissions.

How can I listen for keyboard events in Gmail?

I have a script part of a chrome extension that runs something like this:

document.addEventListener("keypress", captureEvent);
document.addEventListener("keyup", captureEvent);

function captureEvent(e) {
    console.log(e.target);
    if (e.target && e.target.matches("input, textarea, [contenteditable]")) {
        yay();
    }
}

but does not work in Gmail’s compose window, but does elsewhere. I think it might be an issue with propagation being stopped but I have no idea how to prevent that.

Check browser back in Chrome extension in Trello

I’m developing a Chrome extension, that processes cards in Trello in My Cards list.

Even though Trello is a dynamic JS app, my extension is able to detect URL change when user clicks a link.

BUT how to detect when user clicks a Back/Forward button in browser?

I tried many (easy) ways to detect the Back button I found on the internet, but with no luck. Here’s my current detection function.

function detectHistoryChange(handler) {
    document.head.appendChild(document.createElement('script')).text = '(' +
        function () {
            // injected DOM script is not a content script anymore,
            // it can modify objects and functions of the page
            var _pushState = history.pushState;
            history.pushState = function (state, title, url) {
                _pushState.call(this, state, title, url);
                window.dispatchEvent(new CustomEvent('state-changed', { detail: state }));
            };
            // repeat the above for replaceState too
        } + ')(); $(this).remove();'; // remove the DOM script element

    // And here content script listens to our DOM script custom events
    window.addEventListener('state-changed', function (e) {
        console.log('History state changed', e.detail, location.hash);
        handler();
    });
}

Thanks!

Chrome Extension Injected Javascript Button Changes Page

So, I am working on an extension that will scoop up the values in some text fields on a page, and search them on another site to make sure they are not trademarked.

I have injected a button in the page, and when I click it, it works, but it also boots me out to the main page of the site, as though I were not logged in. However, I am still logged in and can hit “back” to get back to where I was, but then all my text fields are no longer filled in. This is obviously a problem for the end user.

Any ideas?

Here is my Content Script:

window.addEventListener("load", function load(event){

    var amz = document.getElementById("draft-field");
    var TMbutton = document.createElement("button");
    var text = document.createTextNode("TMHunt Your Product");
    TMbutton.className = "a-button a-button-primary scripter-button  button-fill"
    TMbutton.appendChild(text);
    amz.appendChild(TMbutton);

},false);

TMbutton.onclick = function() {
            chrome.runtime.sendMessage("test");
}

This does create the button and has the desired effect, except for this side-effect of popping us into a different page. Would this be something to do with the host page receiving a message to do something from my Javascript somehow that I am not seeing?