Click doesn't work on this Google Translate button?

Question

I am creating an Tampermonkey userscript that would automatically click the "star" button on Google Translate website and save my searches so that I can later view them and rehearse.

This is the button that I am targeting:

This is what I've got so far:

// @match        https://translate.google.com/#en/de/appetit/
var el = document.getElementById("gt-pb-star");
setTimeout(function(){
el.click();
},4000);

I encountered 2 problems.

1. @match should be every translate.google.com search and not just appetit. How do I specify the whole domain?
2. I tried clicking the "star" button with click() method but it doesn't work. Not sure why.

Can you please help me finish this userscript?

Edit: it seems that setting match to https://translate.google.com/ handles the first question. Still don't know why click() doesn't work.

Answer 1

See Choosing and activating the right controls on an AJAX-driven site.
Controls don't always operate with a click. This is especially true with Google pages.

This button has several things you need to be aware of:

1. It doesn't fire on click.
2. The events are attached to #gt-pb-star > .trans-pb-button, not #gt-pb-star.
3. Even when the button is on the page, it is still not ready. It can take hundreds of milliseconds for that button to be clickable.
4. In this case, the button is invisible to start and goes visible about the same time it is ready to click. So, you must wait until the node is both present and visible.

Here is a Greasemonkey/Tampermonkey script that does all that:

// ==UserScript==
// @name     _Auto click the Star button on Google Translate
// @match    https://translate.google.com/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
waitForKeyElements ("#gt-pb-star > .trans-pb-button", clickNodeWhenVisible);

function clickNodeWhenVisible (jNode) {
    if (jNode.is (":visible") ) {
        triggerMouseEvent (jNode[0], "mouseover");
        triggerMouseEvent (jNode[0], "mousedown");
        triggerMouseEvent (jNode[0], "mouseup");
    }
    else {
        return true;
    }
}

function triggerMouseEvent (node, eventType) {
    var clickEvent        = document.createEvent('MouseEvents');
    clickEvent.initEvent (eventType, true, true);
    node.dispatchEvent   (clickEvent);
}

Answer 2

Here is my fully intelligent code for storing your searches, based on Brock Adams's answer:

// ==UserScript==
// @name     _Auto click the Star button on Google Translate
// @match    https://translate.google.com/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

function triggerMouseEvent (node, eventType) {
    var clickEvent        = document.createEvent('MouseEvents');
    clickEvent.initEvent (eventType, true, true);
    node.dispatchEvent   (clickEvent);
}

$(window).on('hashchange', function(e){
    var firstURL = window.location.href;
    console.log(firstURL);
    setTimeout(function(){
    var secondURL = window.location.href;

        if (firstURL == secondURL){
            var el = document.getElementById("gt-pb-star").firstChild;
            if (el.classList.contains("trans-pb-button-saved")){

            }else{
            triggerMouseEvent (el, "mouseover");
            triggerMouseEvent (el, "mousedown");
            triggerMouseEvent (el, "mouseup");  
            }
        }
    },3000);
});