¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Aprende a crear tu propio bookmarklet con jQuery

Hoy vamos a ver cómo invertir un pequeño tiempo de nuestras vidas creando un bookmarklet que luego nos puede servir para ahorrar tiempo.

Pero…

¿Qué es un bookmarklet?

Un bookmarklet es un marcador guardado en un navegador que contiene código JavaScript que usamos para extender la funcionalidad del navegador o para automatizar una tarea (como haremos en este caso). La idea es que lo guardes como marcador, le des un click y haga algo.

El objetivo

En este caso vamos a automatizar el proceso de rellenar un extenso formulario de registro. Imagina que tenemos una aplicación a la que tenemos que registrarnos para acceder y, para realizar pruebas durante el desarrollo, tenemos que andar introduciendo datos.

La premisa es simple, como puedes ver así que el script, no iba a ser para menos:

javascript: (function() {  
  function autocompletar() {
    var $ = jQuery.noConflict(true),
      usuario = prompt("Usuario", ""),
      pass = "password",
      correo = usuario + "@test.com";

    $('#usuario').trigger("focus").val(usuario);
    $('#pass').trigger("focus").val(pass);
    $('#pass2').trigger('focus').val(pass);
    $('#nombre').trigger('focus').val('Nombre');
    $('#apellidos').trigger('focus').val('Apellido1 Apellido2');
    $('#dia').trigger('click').trigger('focus').find('option[value="1"]').attr('selected', 'selected').end().trigger('change');
    $('#mes').trigger('click').trigger('focus').find('option[value="ENERO"]').attr('selected', 'selected').end().trigger('change');
    $('#ano').trigger('click').trigger('focus').find('option[value="1980"]').attr('selected', 'selected').end().trigger('change');
    $('#direccion').trigger('focus').val('Calle de la piruleta sin número');
    $('#ciudad').trigger('focus').val('Madrid');
    $('#pais').trigger('click').trigger('focus').find('option[value="España"]').attr('selected', 'selected').end().trigger('change');
    $('#codigoPostal').trigger('focus').val('28001');
    $('#telefono').trigger('focus').val('666666666');
    $('#aceptoTerminos').trigger('focus').attr('checked', true);
  }
  var version = "1.9.1";
  if (window.jQuery === undefined || window.jQuery.fn.jquery < version) {
    var ready = false,
      script = document.createElement("script");
    script.src = "https://ajax.googleapis.com/ajax/libs/jquery/" + version + "/jquery.min.js";
    script.onload = script.onreadystatechange = function() {
      !ready && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") && (ready = true, autocompletar())
    };
    document.getElementsByTagName("head")[0].appendChild(script);
  } else {
    autocompletar();
  }
})();

Veamos cómo funciona…

Lo primero que vemos es javasript: esto le indica al navegador que cuando le demos al marcador, lo que queremos es ejecutar código JavaScript.

Lo siguiente que tenemos es una función anónima auto-invocada, esto es, que en cuanto le demos al botón ocurrirá algo. Si no sabes cómo funcionan este tipo de funciones y qué ventajas tienen, te recomiendo que le eches un ojo a este artículo.

Ahora pasamos a la parte que más nos interesa. La función autocompletar es la que se va a encargar de rellenar los campos, no tiene mucho misterio. Cargamos jQuery en su propia variable para evitar conflictos con lo que pueda haber en la página, creamos un par de variables con valores predefinidos, solicitamos por prompt el nombre del usuario, y nos encargamos de ir rellenando campos. Destacable es que vamos activando eventos. Esos eventos se disparan para que cualquier código que tengamos en la página que esté pendiente de esos eventos se activen. De manera que, quizá tengamos un evento pendiente de que cambie el valor de la fecha de nacimiento para poner un tick verde si eres mayor de 18 años, pues activándolos manualmente, conseguimos que esas funciones se ejecuten.

Después de la función lo que hacemos es realmente sencillo, miramos si tenemos jQuery y si la versión de jQuery es la que tenemos en la variable version. Si es así, ejecutamos la función autocompletar directamente. Si no, adjuntamos el script a la página y, una vez que esté listo, nos encargamos de llamar a autocompletar. ¿Fácil, no?

Espero que este pequeño truco te sea de utilidad y te ahorre algo de tiempo en tus desarrollos. Es habitual en las compañías vender por ejemplo una aplicación en la que haya que registrarse, si tenemos que registrarnos periódicamente en X clientes, sin duda ahorraremos mucho tiempo usando algo así.

¿Y ahora cómo lo añado al navegador?

Lo primero que haremos será comprimirlo, para ello nos valdremos de alguna herramienta como Uglify-js. Esta nos creará un código tal que así:

(function(){function e(){var e=jQuery.noConflict(!0),r=prompt("Usuario",""),t="password" e("#usuario").trigger("focus").val(r),e("#pass").trigger("focus").val(t),e("#pass2").trigger("focus").val(t),e("#nombre").trigger("focus").val("Nombre"),e("#apellidos").trigger("focus").val("Apellido1 Apellido2"),e("#dia").trigger("click").trigger("focus").find('option[value="1"]').attr("selected","selected").end().trigger("change"),e("#mes").trigger("click").trigger("focus").find('option[value="ENERO"]').attr("selected","selected").end().trigger("change"),e("#ano").trigger("click").trigger("focus").find('option[value="1980"]').attr("selected","selected").end().trigger("change"),e("#direccion").trigger("focus").val("Calle de la piruleta sin número"),e("#ciudad").trigger("focus").val("Madrid"),e("#pais").trigger("click").trigger("focus").find('option[value="España"]').attr("selected","selected").end().trigger("change"),e("#codigoPostal").trigger("focus").val("28001"),e("#telefono").trigger("focus").val("666666666"),e("#aceptoTerminos").trigger("focus").attr("checked",!0)}var r="1.9.1" if(window.jQuery===void 0||window.jQuery.fn.jquery<r){var t=!1,i=document.createElement("script") i.src="https://ajax.googleapis.com/ajax/libs/jquery/"+r+"/jquery.min.js",i.onload=i.onreadystatechange=function(){!t&&(!this.readyState||this.readyState=="loaded"||this.readyState=="complete")&&(t=!0,e())},document.getElementsByTagName("head")[0].appendChild(i)}else e()})()

Ahora, pegamos ese texto directamente en el campo URL del marcador y… ¡voilá! En cuanto pulsemos ese marcador, ¡ocurrirá toda la magia!

¡Personalízalo a tu gusto! Y recuerda, si este artículo te pareció interesante, útil o incluso equivocado, por favor considera el dejar un comentario. ¡Lo apreciaré mucho!

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!