Ohmyextension! Desarrollando mi primera extensión

Bienvenidos queridos lectores, en el rootie de esta semana os voy a enseñar qué es una extensión para nuestro navegador – en concreto Chrome -, su utilidad, y por supuesto, ¡crearemos una!

¿Qué es una extensión?

Seguramente tengáis una o varias extensiones ya instaladas en vuestro navegador. Una extensión no es más que un pequeño programa que incorpora nuevas funciones al navegador para personalizar tu experiencia de navegación. Por ejemplo, podemos hacer que nuestra extensión nos avise cuando nos llegue un email. También podemos bloquear publicidad, te sonará el archiconocido AdBlock.

Podemos incluso, simplemente, cambiar la hoja de estilos de una página y diseñarla a nuestro antojo.

En el Chrome Web Store podéis encontrar una vasta selección de extensiones pertenecientes a diversas categorías: productividad, ocio, herramientas para desarrolladores… Nos quedaríamos sin memoria RAM si decidiésemos instalarlas y utilizarlas todas a la vez.

Creando nuestra primera extensión

Buenas noticias, no estamos limitados a utilizar únicamente las extensiones que nos encontremos en el CWS.  Ya que somos developers – o se intenta -, podemos desarrollar una parte de código que queramos que se ejecute en nuestro cliente.

Para construir nuestra extensión, , lo primero será crear un directorio en nuestra máquina. Nosotros lo llamaremos ohmyextension. A continuación, dentro de él, creamos un fichero llamado manifest.json.

El manifest.json es un fichero de texto en formato JSON, el cual indica la información importante de nuestra extensión. En el este enlace podéis encontrar toda la estructura soportada por este archivo. Básicamente aquí es dónde diremos cómo se llama la extensión, descripción, si carga ficheros externos (javascript, por ejemplo), el logotipo…

La estructura básica de nuestra extensión será la siguiente:

Código de nuestro manifest.json

Simplemente haciendo esto ya podemos instalar nuestra extensión. Debemos entrar en Ajustes – Configuración – Extensiones y pulsa el botón Cargar extensión descomprimida. A continuación seleccionamos el directorio… y si todo ha ido bien, este será el resultado:

Ya tenemos nuestra extensión creada. Son unos sencillos pasos asequibles a todos los niveles, no tiene mucha historia.

Una vez la habilitemos, aparecerá en la parte superior derecha de nuestro navegador:

Dando funcionalidad

Es ahora cuando nos metemos en faena. Para ello tomaremos de ejemplo nuestra propia página y haremos una funcionalidad que no existe actualmente como tal. La idea es que podamos filtrar los rooties de mi compañero Merkury y los míos.

Lo que hará la extensión será:

  1. Añadir un icono de un ojo al lado de nuestros nombres en cada rootie de la home.
  2. Al pinchar sobre él, cargará las 12 siguientes entradas (haciendo un total de 24 en la home) y cambiará la opacidad al 10% de las que no coincidan con el autor seleccionado.

La magia de jQuery:

Y aquí el resultado después de haber hecho clic sobre un ojo en el primer rootie, que es de Merkury:

 

¡Es todo! Como véis ha sido bastante sencillo desarrollar una extensión. Las posibilidades son infinitas, podemos utilizar toda nuestra imaginación para crear funcionalidades únicas.

Os dejo por aquí el enlace de descarga por si queréis probarla directamente:

https://www.ohmyroot.com/wp-content/uploads/2017/02/ohmyextension.zip

Hasta el siguiente rootie, ¡nos vemos amigos!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *