Aplicación de JavaScript: secuencias de comandos de usuario

Escribir un Usercript es una forma divertida de usar sus habilidades de JavaScript. Lo lleva del editor al navegador con retroalimentación y validación en tiempo real.

¿Qué es un script de usuario?

Userscripts (también conocido como scripts de usuario, scripts de usuario, o .user.js) son de código abierto con licencia complementos para navegadores web que cambiar las páginas de web, ya que se cargan. Le dan a los usuarios el poder de hacer que los sitios web hagan lo que ellos quieran, en lugar de lo que se pretendía originalmente.

Los scripts de usuario están escritos en JavaScript y le permiten modificar la apariencia de una página web en su navegador. Los scripts solo afectan su navegador, no la página web real.

Una advertencia rápida

Debe tener en cuenta los problemas de privacidad al utilizar scripts de usuario y no debe instalarlos de fuentes en las que no confíe. Los scripts de usuario pueden llevar a cabo acciones en su nombre y potencialmente pueden acceder a cualquier información en un sitio web al que tiene acceso, o que ingresa en un sitio web. A menudo se les permite realizar funciones que los scripts en sitios web normales no pueden, como almacenar información en su computadora y compartirla entre sitios web. Los scripts de usuario mal escritos también podrían ser explotados por sitios web maliciosos.

explicaciones tomadas de //github.com/OpenUserJs/OpenUserJS.org/wiki/Userscript-Beginners-HOWTO

¿Por qué los scripts de usuario?

Free Code Camp tiene muchos proyectos geniales del mundo real que enriquecerán su conjunto de habilidades y su cartera. Personalmente, me gusta usar las habilidades que he aprendido en JavaScript, jQuery y CSS para modificar mi navegación diaria.

Algunas secuencias de comandos de usuario han sido extremadamente populares y se convirtieron en extensiones de navegador. Un ejemplo de uno sería Reddit Enhancement Suite que se encuentra en //redditenhancementsuite.com/.

¡Usted también puede usar su script de usuario como base de una extensión de navegador!

Empezando

Los scripts de usuario se ejecutan desde las propias extensiones del navegador. Grease Monkey (FireFox) fue el complemento pionero que permitió a las personas personalizar su experiencia de navegación. Instale el complemento apropiado para su navegador.

Para FireFox: Grease Monkey

Greasemonkey

El canal de desarrollo te permite probar una nueva versión experimental de este complemento antes de que se lance a la versión general… addons.mozilla.org

Para Chrome: Tamper Monkey

Tampermonkey

El administrador de script de usuario más popular para navegadores basados ​​en Blink chrome.google.com

Para este tutorial usaré Chrome con Tamper Monkey.

No debería haber diferencias significativas con el proceso después de instalar Grease Monkey o Tamper Monkey.

Por si acaso, aquí hay un enlace rápido para instalar Grease Monkey (además de hacer algunas cosas con él).

Tutorial de Greasemonkey para principiantes

En el tutorial de Greasemonkey, he cubierto cómo escribir scripts de usuario de Greasemonkey. Después de este tutorial, podrá ... hayageek.com

el proyecto

Vamos a realizar un pequeño cambio en la página de inicio de Hacker News //news.ycombinator.com.

Usaremos jQuery para hacer que los colores de fondo de los enlaces alternos sean ligeramente diferentes para mejorar la legibilidad.

iniciar un nuevo guión

Haga clic en el icono de Tamper Monkey en la parte superior derecha y seleccione ' Agregar un nuevo script' en el cuadro de diálogo.

Debería ser llevado a una nueva pestaña que se ve así

Complete la información

Después de iniciar un nuevo script, lo primero que queremos hacer es completar la información del script en la parte superior. Continúe y complete los siguientes atributos como quiera

  • nombre
  • descripción
  • autor

También te mostraré cómo es el mío.

Agregar jQuery

justo antes de la línea

// ==/UserScript==

añadir una línea con el texto de

// @require //code.jquery.com/jquery-latest.js

Piense en esto como importar / requerir jQuery para un proyecto JS.

aquí esta el mio

¡Hola script.js!

Veamos si nuestro script se carga en //news.ycombinator.com y jQuery está listo.

Después de la línea // su código aquí , agregue el siguiente código

$(document).ready(function() { alert('WINNING');});

e ingrese Ctrl + s o haga clic en el botón guardar a la izquierda

Puede ser llevado a la siguiente página. De lo contrario, haga clic en la pestaña Scripts de usuario instalados.

¡Increíble! La secuencia de comandos se carga en Tamper Monkey. El punto verde de la izquierda significa que la secuencia de comandos está activada. Incluso puede ver el logotipo de Hacker News en la captura de pantalla.

ejecutar el script

Visite Hacker News en su navegador y si lo ha estado siguiendo y todo salió bien, debería ver

Enciende el depurador

Es hora de encontrar los elementos de la publicación que queremos modificar. Ingrese Ctrl + Shift + i para abrir el depurador del navegador.

Ahora queremos seleccionar un elemento para verlo más de cerca. Al hacer clic en el cuadrado azul con el mouse en la parte superior izquierda del depurador, se abrirá el selector de elementos. También puede usar el comando de teclado Ctrl + Shift + c .

Como puede ver, encontré un elemento llamado td.title . Después de hacer clic en él, el elemento se resalta en la pestaña de elementos del depurador (también se muestra arriba).

Resaltando el elemento sobre nuestro título llamado

selecciona esto en el navegador

Bingo. Parece que encontramos el elemento que queremos. Hacker News tiene un diseño HTML limpio, por lo que no fue demasiado difícil encontrar nuestro elemento de destino.

Si recuerda su jQuery, todo lo que tiene que hacer para encontrar todos los elementos de la publicación es usar el selector

$('.athing')

hacer algo en nuestro elemento de publicación

Ahora que tenemos una forma de seleccionar nuestro elemento con jQuery, podemos alterar nuestro elemento. Cambiemos el color de fondo de las publicaciones usando el siguiente código. Cambie el código $ (document) .ready () a este

$(document).ready(function() { $('.athing').css('background-color', '#DDD');});

nota: #DDD es una abreviatura de #DDDDDD;

veamos la página resultante. Recuerde guardar su script de usuario y luego actualice la página de HackerNews. Puede que tenga que cerrar su depurador para ver la página completa.

¿Ya terminamos? No exactamente. Hemos cambiado todos los elementos de nuestra publicación en lugar de alternarlos. Puede parecer el efecto cebra que queríamos, pero eso es solo porque el elemento score / subinfo no se ve afectado. Si también desea modificar ese elemento, hágalo y no dude en publicar su método en los comentarios. Está fuera del alcance de esta guía.

¡¿Oh no?! ¿Qué hacemos? ¡No quiero escribir ningún bucle!

jQuery al rescate

No tengan miedo, compañeros campistas. jQuery ha venido al rescate una vez más.

jQuery proporciona selectores especiales solo para una ocasión como esta.

Ahora presentamos : impar

: selector impar

Descripción: Selecciona elementos impares, indexados a cero. Véase también incluso. En particular, tenga en cuenta que la indexación basada en 0 significa ... api.jquery.com

todo lo que tenemos que hacer es agregar : impar al final de nuestro selector para que la línea se vea así. nota: también he cambiado el color a #EEE; para integrarse mejor.

 $(‘.athing:odd’).css(‘background-color’, ‘#EEE’);

Guarde su script y actualice HackerNews y debería ver este producto final

Terminando

Ahí tienes. ¡Ahora tienes otra salida creativa para dar rienda suelta a tu incipiente hechicería de codificación! Los scripts de usuario se pueden usar para modificar la funcionalidad o el aspecto de un sitio, para agregar una característica que siempre ha deseado, y mucho más.

Deberes

Escriba su propio User Script para agregar algo a un sitio web que usa con frecuencia. Ya sea un estilo o un botón que puede alternar la visibilidad de ciertos elementos, todo depende de usted. ¡Proporcione su producto en los comentarios aquí!

¡Ve y conquista a los campistas!

Más lectura

Tampermonkey

Tampermonkey es una extensión de navegador gratuita y el administrador de script de usuario más popular para navegadores basados ​​en Blink como Chrome ... tampermonkey.net GreaseSpot Wiki

GreaseSpot es documentación comunitaria para la creación de scripts de usuario con Greasemonkey. wiki.greasespot.net Greasy Fork: scripts de usuario seguros y útiles

Las secuencias de comandos de usuario le permiten controlar su experiencia de navegación. Una vez instalados, automáticamente hacen que los sitios que usted ... greasyfork.org Introducción: creación de una extensión de Chrome

Las extensiones le permiten agregar funcionalidad a Chrome sin profundizar en el código nativo. Puede crear un nuevo… developer.chrome.com Cómo desarrollar una extensión de Firefox

Esta publicación de blog está muy desactualizada. Si desea una guía más reciente para el desarrollo de extensiones, lea el nuevo Cómo… blog.mozilla.org