单击此 Google 翻译按钮不起作用？

Question

我正在创建一个 Tampermonkey 用户脚本，它会自动单击 Google 翻译网站上的 "star" 按钮并保存我的搜索，以便我以后可以查看它们并排练。

这是我定位的按钮：

这是我目前得到的：

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

我遇到了 2 个问题。

@match 应该是每个 translate.google.com 搜索而不仅仅是胃口。如何指定整个域？
我尝试使用 click() 方法单击 "star" 按钮，但它不起作用。不知道为什么。

你能帮我完成这个用户脚本吗？

编辑：似乎将 match 设置为 https://translate.google.com/ 可以解决第一个问题。仍然不知道为什么 click() 不起作用。

Answer 1

参见Choosing and activating the right controls on an AJAX-driven site。
控件并不总是使用 click。对于 Google 页尤其如此。

这个按钮有几件事你需要注意：

它不会在点击时触发。
事件附加到 #gt-pb-star > .trans-pb-button，不是 #gt-pb-star。
即使按钮在页面上，它仍然没有准备好。单击该按钮可能需要数百毫秒。
在这种情况下，按钮在启动时是不可见的，大约在准备好单击的同时变为可见。因此，您必须等到节点既存在又可见。

这里有一个 Greasemonkey/Tampermonkey 脚本可以完成所有这些工作：

// ==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

根据 Brock Adams 的回答，这是我用于存储搜索的全智能代码：

// ==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);
});

单击此 Google 翻译按钮不起作用？

Click doesn't work on this Google Translate button?

javascript

greasemonkey

userscripts

tampermonkey