Crea tus propios scripts con Tampermonkey
¿No te has visto alguna vez con la necesidad o la curiosidad de querer que una web haga algo diferente o cambiar el aspecto porque crees que podría estar mejor? Pues que sepas que eso puedes hacerlo creando tus propios scripts con Tampermonkey, ¡vamos a ello!
Crea tus propios scripts con Tampermonkey
Crea tus propios Scripts con Tampermonkey
Lo que vamos a aprender con este artículo es lo siguiente:
- Modificar una web a través de Javascript
- Qué es Tampermonkey
- Un ejemplo super sencillo de cómo funciona
Personaliza el frontend de una página web a tu gusto con Javascript
Si no sabes lo que es el frontend te sugiero que leas este artículo, pero de forma resumida, es lo que el usuario ve y puede interactuar con la aplicación, para hacer aquello de lo que se espera de la misma. El frontend de una página web es lo que el usuario ve: menús, enlaces, imágenes, párrafos, etc.
Y el frontend de un web se construye de muchas cosas, pero particularmente de tres que son imprescindibles, que son: HTML, CSS y JAVASCRIPT.
Con estos tres elementos el motor de renderizado construye lo que ves cuando se carga, y como lo que ves se está montando en tu navegador, porque el cliente es tu navegador, eso significa que como usuario puedes darle un toque diferente, es decir, que puedes modificarlo.
Cuando tienes una página cargada, en función del navegador, con el botón derecho sobre la web puedes elegir inspeccionar el código. Con esto estarías viendo la parte visible, el frontend, de la página. Y si realizas alguna modificación inmediatamente lo verías en tu pantalla.
El problema lo tienes cuando quieres que siempre que cargue una página lo haga también tu modificación, y para eso tenemos Tampermonkey.
¿Qué es Tampermonkey?
Es una extensión para Google Chrome mediante el cual podrás cargar automáticamente tus scripts, éstos se guardan en tu ordenador, y Tampermonkey los lanzará en el momento que detecte que has entrado en una web determinada.
Tampermonkey no existiría si no fuera por Greasemonkey, que es la misma extensión pero para Mozilla Firefox.
Voy a dejar a continuación las extensiones para Firefox, Chrome y para rizar el rizo también para Android.
DescargarQR-Code
Desarrollador: tampermonkey.net
Precio: Gratis
DescargarQR-Code
Desarrollador: Jan Biniok
Precio: Gratis
DescargarQR-Code
Desarrollador: derjanb
Precio: Gratis
También está para Safari, el navegador para Mac.
Una vez instalado, en Chrome verás un icono a la derecha, que indicará con algún número los scripts que se están ejecutando para esa página, y más abajo podrás ver los nombre de los mismos, que en mi caso tengo uno que se llama Hola! y otro que se llama Time Session Intranet.
Por último en el penúltimo botón tendrás un acceso para entrar en el menú llamado Dashboard.
Acceso al dashboard de Tampermonkey
En la siguiente imagen veremos el menú principal de Tampermonkey.
Menú principal de Tampermonkey
Podemos apreciar por las columnas que una nos valdrá para activar/desactivar el script, el nombre, la versión, los sitios webs a los que afecta el script, si el script usa fuentes de otros sitios (jquery, bootstrap, etc.), la última actuación, etc.
Para crear un script nuevo tenemos el botón + justo a la izquierda de la opción Scripts instalados, esto nos abrirá un IDE para empezar a programar o pegar el que tengamos hecho ya desde otro programa.
Nuevo Script en Tampermonkey
- El script empieza por ==UserScript== y termina por ==/UserScript==, sin eliminar los signos de comentarios.
- En @name ponemos el nombre que queramos para el script
- El @namespace se usa para evitar colisiones en los repositorios generales, con poner una referencia de la página web sería suficiente, o el nombre de la empresa, por ejemplo, o tu nickname de algún grupo.
- Con @version indicamos la versión de la misma, no tiene ninguna complicación
- En @description incluiremos un pequeño resumen de lo que hace el script
- En @author ponemos al responsable del código o el que lo haya desarrollado
- Indicaremos a qué páginas web afecta en @match
- Con @require podemos incluir fuentes de otras páginas como jquery.
- Y @grant sirve para usar el comando GM_*, que sería como declararar CONSTANTES.
En la documentación puedes ver el detalle de éstos otros mas.
Un ejemplo super sencillo
Ya hemos visto como instalarlo, cómo acceder al menú, cómo saber si se está ejecutando algún script o los que tenemos cargados. Ahora vamos a ver cómo ponerlo en funcionaniemto con un ejemplo muy sencillo pero suficiente para entender cómo funciona.
Para nuestro ejemplo vamos a usar la web demo.davidbp.com, que cargará una página html sencilla con un div con el id de usuario y el texto “hola mundo”, nada del otro mundo. Seguramente al acceder os diga que el certificado de seguridad está caduco o no es válido, no os preocupéis porque no os llevará a ningún sitio malicioso, como digo solo tengo un index.html.
Con el siguiente script cada vez que cargemos la página mostraremos una ventana emergente que diga Hola, tal cual.
- // == UserScript ==
- // @name Hola!
- // @namespace DavidBP.com
- // @version 1.0
- // @description Ventana emergente diciendo Hola!
- // @author DavidBP
- // @match https://demo.davidbp.com/*
- // @require http://code.jquery.com/jquery-latest.js
- // @grant none
- // == / UserScript ==
- var $ = window.jQuery;
- $ (función () {
- alert(“HOLA!”);
- });
Con este código tan sencillo cada vez que se carga el DOM de la página saltará una ventana emergente. Este código lo llevamos a tampermonkey, le damos a + y pegamos el código, pulsamos CTRL + S para guardarlo y entramos en la web que hayamos indicado en @match.
Si lo hemos hecho bien tendremos en el programa lo siguiente:

Ejemplo de uso de script con Tampermonkey
¿Hay alguna página con repositorios de scripts?
Sí, las hay, te dejo a continuación algunas, pero ten la precaución a la hora de instalarlo porque estás incluyendo código que no has hecho tu.
Iré incluyendo más adelante ejemplos de usos de los propios scripst (user script), como por ejemplo este donde indico cómo incluir Bootstrap en Tampermonkey, ¡hasta la próxima!
Para conocer mas tecnologias pueden seguirme en mis redes sociales:
Facebook: https://web.facebook.com/wilbeDEV/
facebook: https://web.facebook.com/TechManiako/
Grupo_facebook: https://web.facebook.com/groups/166091130742535/
YouTube: https://www.youtube.com/c/WILBERCCORIDEVELOPER