javascript - Hacer clic en un botón en una página usando un Greasemonkey/userscript en Chrome

javascript-events automation

Question

Voy a ser tan absolutamente detallado aquí como sea posible, ya que me he encontrado con algunas soluciones que no terminaron en un panorama. Tenga en cuenta que no sé Javascript . Sé HTML básico y CSS. No tengo ningún fondo de programación real, pero estoy tratando de aprender poco a poco investigando tareas básicas como esta. Por favor, háblame como si fuera un idiota. Cualquier jerga que arroje en este post lo aprendí mientras investigaba este tema específico. Estoy escribiendo este usuario como un proyecto personal y para compartirlo con algunos amigos.

Lo que intento hacer

Estoy intentando escribir un UserScript para Chrome / Greasemonkey (Chrome es mi navegador de destino) que hará clic en el botón Actualizar en el navegador del servidor Battlefield 3. Para aquellos de ustedes que no lo sepan, Battlefield 3 usa un sitio web emparejado con un complemento de navegador para VOIP y realmente inicia el juego a través de un navegador de servidor. La mayor parte parece ser un HTML sencillo y ordenado en tablas.

La idea es que al ver la página principal de un servidor lleno, la secuencia de comandos haga clic en el botón Actualizar cada tres segundos o menos hasta que la página informe un punto abierto en el servidor, luego detenga el bucle de actualización y haga clic en el botón unirse al servidor . Ya tengo la parte del guión ejecutándose que sondea el servidor actual y el máximo de jugadores luego los asigna a sus propias variables.

En este punto estoy tratando de hacer que un clic funcione en la consola, así que puedo usarlo en mi script y no tengo suerte.

El código que intento manipular.

Este es el div para el botón que intento hacer clic extraído de las herramientas de desarrollo de 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>

(Ese enlace no es estático. Es un enlace a una página específica del servidor)

Lo que he intentado.

Para encontrar realmente el botón, estoy usando getElementsByClassName . No tiene una ID única, pero la clase es única para ese elemento en esta página en particular, por lo que getElementsByClassName("serverguide-header-refresh-button")[0] está tirando de la div adecuada cada vez. El problema es obtener la secuencia de comandos para realizar cualquier acción real en el botón.

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

Ahora me doy cuenta de que esto no funcionó porque no es un botón de envío convencional. No entiendo los detalles del estándar aquí, pero entiendo que no es compatible con el método .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);

Esto es simplemente unsafeWindow.jQuery(''.serverguide-header-refresh-button'').click(); envuelto en algún código para cargar jQuery para los usuarios. Fue un poco que recogí en otro lado, pero me dijeron que solo funcionaría si jQuery se cargaba en la página. Pensé que valía la pena intentarlo. Este es uno de esos que no tengo idea de qué estoy haciendo tiros en la oscuridad y no funcionó. Intenté lo mismo a continuación con otro fragmento del código jQuery que recogí:

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);

Ambas vuelven indefinidas en las consolas Chrome y Firebug.

Entonces, ¿alguien sería tan amable de ayudarme a crear un poco de código para este script para presionar el botón Actualizar en esta página?

Answer 1

Nota:

1. jQuery .click() no funciona de manera confiable en los eventos de clic que no se establecieron a través de jQuery en primer lugar.

2. Necesita crear el tipo correcto de evento; createEvent(''Events'') no es el camino.

3. Como señaló Jim Deville, el pseudo-botón del enlace no estaba siendo seleccionado.

4. No necesitas jQuery para esto (hasta ahora).

5. Asegúrese de que el control "Refresh" se cargue estáticamente para el código de prueba como se muestra en la pregunta. Si está AJAX insertado, el intento de clic puede dispararse demasiado pronto.

Poniendo todo eso en conjunto, el siguiente código debería funcionar. Pero tenga en cuenta que algunos sitios (como ciertas aplicaciones de Google) usan diseños funky, sensibles al estado, que requieren una secuencia de eventos.

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);

Answer 2

entonces, estás en el camino correcto, pero sigues agarrando el DIV no la etiqueta A Para hacer clic en el "botón" (enlace en este caso), debe hacer clic en el enlace real, ya que no hará un túnel hacia abajo a los elementos contenidos en el DIV .

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

Debería obtener el elemento A para hacer clic en. Desde jQuery $(''serverguide-header-refresh-button a'').click(); Deberia trabajar.