Extensiones para Chrome, introducción y generalidades

En este artículo les quiero compartir el desarrollo de extensiones para Google Chrome. En este caso que les propongo seguir, vamos a crear una extensión para Google Chrome que muestre un banner animado propio de html5.

El desarrollo de extensiones para Chrome es muy simple de realizar, solo debemos tener en cuenta algunos pormenores. En primer lugar vamos a seleccionar un editor de código html y javascript en mi caso voy a usar algo simple, notepad2, eso depende del gusto del desarrollador.

Fig.1 – Editor notepad2

Para que la extensión funcione, necesitamos definir un manifiesto, esto lo vamos a llamar "manifest.json".

Entonces como primera tarea, vamos a generar una carpeta donde como primera actividad generemos este archivo de manifiesto.

Fig.2 – Estructura del manifest.json

En la Fig.2 vemos la estructura del manifiesto que propone un nombre para la extensión, una versión, la descripción y luego algunos comando que le permiten colocar funcionalidades, en el caso de nuestro ejemplo, tenemos que centrar la atención a "browser_action" que permite mostrar mediante "popup" una página con el nombre "publicidad.html" que tendrá la implementación del banner en html5, finalmente mediante la etiqueta "default_icon" colocaremos un icono a la extensión.

Ya creado nuestro manifiesto debemos generar la página referenciada "publicidad.html" y copiar a la carpeta de trabajo nuestro ícono referenciado, para el ejemplo "music1.png".

Vamos a crear la página "publicidad.html":

El head de la página se vería de la siguiente manera:

Fig.3 Head de la página publicidad.html

En la Fig.3 se muestra la manera de generar el texto animado propuesto en los requerimientos cada una de las propiedades utilizadas para generar el texto animado tienen una especificación detallada en el siguiente vínculo http://www.w3.org/TR/css3-animations/

Para detallar el ejemplo la función "pulse" determina en el "from" un tamaño de fuente con tanta opacidad y en el "to" varía estos valores para generar la animación, luego se exponen algunas propiedades como duración, tiempo, etc…

Si seguimos detallando la página "publicidad.html" encontraremos la implementación de la animación en su body.

Fig.4 Body de la página publicidad.html

En la Fig.4 podemos visualizar algo muy simple en donde se mezcla contenido texto animado.

Finalmente ya tenemos todo lo necesario para cargar nuestra extensión a Chrome, solo debemos ir al mené extensiones de nuestro Google Chrome, y cargar la extensión.

Fig.5 Extensiones de Chrome

Como muestra la Fig.5 debemos cargar la extensión que buscaremos referenciando la carpeta de trabajo donde tenemos el manifiesto, el icono y la página html generadas.

Fig.6 Muestra de extensión Chrome funcionando.

Como muestra la Fig.6 de una forma muy simple se pueden generar extensiones interesantes para Google Chrome, en este caso cumpliendo el objetivo planteado al inicio del artículo.

Les dejo un video de la implementación:



Espero que les sea de utilidad.