Клик не работает на этой кнопке Google Translate?

Я создаю пользовательский скрипт Tampermonkey, который будет автоматически нажимать кнопку «звездочка» на веб-сайте Google Translate и сохранять мои поисковые запросы, чтобы я мог позже просмотреть их и отрепетировать.

Это кнопка, на которую я нацелен: введите здесь описание изображения

Это то, что у меня есть до сих пор:

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

Я столкнулся с 2 проблемами.

  1. @match должно быть при каждом поиске на translate.google.com, а не только во время поиска. Как указать весь домен?
  2. Я попытался нажать кнопку «звездочка» с помощью метода click(), но он не работает. Не уверен, почему.

Не могли бы вы помочь мне закончить этот пользовательский скрипт?

Изменить: кажется, что установка match на https://translate.google.com/ обрабатывает первый вопрос. До сих пор не знаю, почему не работает click().


javascript greasemonkey tampermonkey userscripts
person potato    schedule 23.11.2015    source источник
comment
Не помещайте свой ответ в вопрос, это не то, как работает переполнение стека. Поместите это в ответ ниже.   -  person Brock Adams    schedule 24.11.2015

Ответы (2)


arrow_upward
6
arrow_downward

См. раздел Выбор и активация правильных элементов управления на AJAX. управляемый сайт.
Элементы управления не всегда работают с click. Особенно это касается страниц Google.

У этой кнопки есть несколько вещей, о которых вам нужно знать:

  1. Не срабатывает по клику.
  2. События привязаны к #gt-pb-star > .trans-pb-button, не #gt-pb-star.
  3. Даже когда кнопка находится на странице, она все равно не готова. Чтобы кнопка стала активной, могут потребоваться сотни миллисекунд.
  4. В этом случае кнопка невидима для запуска и становится видимой примерно в то же время, когда она готова щелкнуть. Таким образом, вы должны подождать, пока узел не появится и не станет видимым.

Вот скрипт 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);
}
person Brock Adams    schedule 24.11.2015
comment
Большое спасибо. Я добавил немного мозгов в сценарий. Теперь он должен обрабатывать запросы без перезагрузки страницы. Вы можете увидеть это в моем исходном вопросе. - person potato; 24.11.2015

arrow_upward
2
arrow_downward

Вот мой полностью интеллектуальный код для хранения ваших поисков, основанный на ответе Брока Адамса:

// ==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);
});
person potato    schedule 24.11.2015