Нажатие кнопки на странице с помощью Greasemonkey/userscript в Chrome

Я собираюсь быть здесь максимально подробным, поскольку я столкнулся с несколькими решениями, которые в конечном итоге не сработали. Пожалуйста, имейте в виду, что я не знаю Javascript. Я знаю базовые HTML и CSS. У меня нет реального опыта программирования, но я пытаюсь учиться понемногу, исследуя базовые задачи, подобные этой. Пожалуйста, поговори со мной, как будто я идиот. Любой жаргон, который я использую в этом посте, я выучил, исследуя эту конкретную проблему. Я пишу этот пользовательский скрипт как личный проект и делюсь им с друзьями.

Что я пытаюсь сделать.

Я пытаюсь написать пользовательский скрипт для Chrome/Greasemonkey (Chrome — мой целевой браузер), который будет нажимать кнопку Обновить в браузере сервера Battlefield 3. Для тех из вас, кто не знает, Battlefield 3 использует веб-сайт в паре с подключаемым модулем браузера для VOIP и фактически запускает игру через серверный браузер. Большая часть этого выглядит как довольно прямолинейный HTML, организованный в виде таблиц.

Идея состоит в том, что при просмотре главной страницы заполненного сервера скрипт будет нажимать кнопку Обновить каждые три секунды или около того, пока страница не сообщит об открытом месте на сервере, а затем остановит обновление. цикл и нажмите кнопку присоединиться к серверу. У меня уже есть работающая часть скрипта, которая опрашивает сервера о текущих и максимальных игроках, а затем назначает их своим собственным переменным.

На данный момент я пытаюсь заставить щелчок работать в консоли, чтобы я мог использовать его в своем сценарии, и мне не повезло.

Код, которым я пытаюсь манипулировать.

Это div для кнопки, которую я пытаюсь нажать, извлеченной из инструментов разработчика Chrome:

<div class="serverguide-header-refresh-button alternate show"> 
<div type="reset" class="common-button-medium-grey">
<p style="position: relative;">
<a href="/bf3/servers/show/c7088bdc-2806-4758-bf93-2106792b34d8/">Refresh </a>
</p>
</div>
</div>

(Эта ссылка не статическая. Это ссылка на определенную страницу сервера)

Что я пробовал.

Чтобы найти кнопку, я использую getElementsByClassName. У него нет уникального идентификатора, но класс уникален для этого элемента на этой конкретной странице, поэтому getElementsByClassName("serverguide-header-refresh-button")[0] каждый раз извлекает правильный div. Проблема заключается в том, чтобы скрипт выполнял любое фактическое действие на кнопке.

document.getElementsByClassName("serverguide-header-refresh-button")[0].click();

Теперь я понимаю, что это не сработало, потому что это не обычная кнопка отправки. Я не понимаю особенностей стандарта здесь, но я понимаю, что он не поддерживает метод .click().

function addJQuery(callback) {
  var script = document.createElement("script");
  script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
  script.addEventListener('load', function() {
    var script = document.createElement("script");
    script.textContent = "(" + callback.toString() + ")();";
    document.body.appendChild(script);
  }, false);
  document.body.appendChild(script);
}

// the guts of this userscript
function main() {
  unsafeWindow.jQuery('.serverguide-header-refresh-button')[0].click();
}

// load jQuery and execute the main function
addJQuery(main);

Это просто unsafeWindow.jQuery('.serverguide-header-refresh-button').click(); завернутый в некоторый код для загрузки jQuery для пользовательских скриптов. Это было немного, что я подобрал в другом месте, но мне сказали, что это будет работать, только если на странице загружен jQuery. Я подумал, что стоит попробовать. Это один из тех снимков, понятия не имею, что делаю в темноте, и он не сработал. Я попробовал то же самое ниже с другим фрагментом кода jQuery, который я подобрал:

function addJQuery(callback) {
  var script = document.createElement("script");
  script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
  script.addEventListener('load', function() {
    var script = document.createElement("script");
    script.textContent = "(" + callback.toString() + ")();";
    document.body.appendChild(script);
  }, false);
  document.body.appendChild(script);
}

// the guts of this userscript
function main() {
   var evObj = document.createEvent('Events');
      evObj.initEvent("click", true, false);
      document.getElementsByClassName('serverguide-header-refresh-button')[0].dispatchEvent(evObj);
}

    // load jQuery and execute the main function
addJQuery(main);

Оба они возвращают Undefined в консолях Chrome и Firebug.

Итак, кто-нибудь будет так любезен, чтобы помочь мне создать немного кода для этого скрипта, чтобы нажимать кнопку «Обновить» на этой странице?


javascript automation dom-events greasemonkey userscripts
person HittingSmoke    schedule 19.11.2011    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Примечание:

  1. jQuery .click() не работает надежно с событиями кликов, которые изначально не были установлены через jQuery.

  2. Вам нужно создать правильный тип события; createEvent('Events') это не выход.

  3. Как указал Джим Девиль, псевдокнопка ссылки не была выбрана.

  4. Для этого вам не нужен jQuery (пока).

  5. Убедитесь, что элемент управления «Обновить» загружается статически для тестового кода, как показано в вопросе. Если это AJAX, попытка клика может сработать слишком рано.

Собрав все это вместе, следующий код должен работать. Но имейте в виду, что некоторые сайты (например, некоторые приложения Google) используют причудливый, чувствительный к состоянию дизайн, который требует последовательности событий.

var refreshBtn = document.querySelector (
    "div.serverguide-header-refresh-button div[type='reset'] a"
);
var clickEvent = document.createEvent ('MouseEvents');
clickEvent.initEvent ('click', true, true);
refreshBtn.dispatchEvent (clickEvent);
person Brock Adams    schedule 19.11.2011
comment
Спасибо! Кажется, он отлично работает. Теперь, когда у меня есть три основных рабочих компонента, мне просто нужно связать их все вместе. Я потрачу немного времени на сравнение этого с тем, что я делал, чтобы попытаться лучше понять, что я делал неправильно. - person HittingSmoke; 19.11.2011

arrow_upward
0
arrow_downward

Итак, вы на правильном пути, но продолжаете цепляться за тег DIV, а не за тег A. Чтобы щелкнуть «кнопку» (ссылку в данном случае), вы должны щелкнуть фактическую ссылку, потому что она не будет туннелировать к элементам, содержащимся в файле DIV.

document.querySelector('serverguide-header-refresh-button a')

Должен получить элемент A для нажатия. Из jQuery $('serverguide-header-refresh-button a').click(); должно работать.

person Jim Deville    schedule 19.11.2011