Cómo hacer una extensión para Google Chrome parte 2 – creando una extensión desde cero

Después del post introducción a las extensiones de Chrome tenía bastantes ganas de hacer la segunda parte. En esta vamos ha hacer una extensión desde cero.Como os comenté en el otro  post, en lugar de hacer un “hola mundo” típico, prefería hacer algo más útil y a la vez encontré algo que me servía a mi para promocionar el blog. Es una extensión en la que se podrá acceder a los últimos posts de mi blog y que además cuando haya uno nuevo avise (sin molestar :) ).Pulsa en la logo para instalarlo y ver como funciona:

Instalar la extensión en Chrome

Si además quieres saber como lo e implementado, sigue leyendo:

¿Por donde empezamos?

En general la extensión tiene 2 códigos separados: Uno que se ejecuta cuando se pulsa en el icono para abrir la extensión y otro que se ejecuta cuando se abre chrome y comprueba cada cierto tiempo si hay un nuevo post.Para que la extensión lea cómodamente el contenido de mi blog, he instalado este plugin que permite leer el contenido en JSON:JSON APIComo ya dije en la primera parte, una extensión no es más que una web un poco especial. Así creamos una carpeta en vuestro PC con el nombre de la extensión, en mi caso la voy a llamar (en principio) “Juan Ramón Jiménez Quick WordPress reader”, dentro de esta carpeta tengo los siguientes archivos:listado de archivosAhora expliquemos cada archivo por separado.

manifest.json

Este es el archivo de descripción de la extensión, contiene los permisos que necesita y los archivos que ejecuta y tiene la siguiente pinta:

 No quiero explicar todo punto por punto ni todas las posibilidades porque extendería demasiado el post, pero si lo más importante que he hecho.Todo el contenido de este archivo es muy importante, cualquier cosa que no definamos bien aquí puede provocar que nuestra extensión no funcione correctamente.El “content_security_policy“, le dice a Chrome cual es la “política de seguridad”, en este caso está puesta la política por defecto y además ‘unsafe-eval‘ que le permite a la extensión ejecutar el comando “eval” y todos sus derivados.El nameversion y description sirven para entre otras cosas mostrarlo en la lista de extensiones en Chrome.Debemos crear 4 iconos, iguales pero de distinto tamaño. Como ves hay definidos tres: 16px, 48px y 128px ancho por alto, y además, más abajo hay otro “icon.png“, este debe tener 19px. Este último es el icono que se mostrará en Chrome y será el que pulsen los usuario para abrir la extensión.El “browser_action” es el que define las acciones que realiza nuestra extensión, en este caso definimos que tiene un icono, que cuando el ratón está encima muestra el texto “default_title“, y que al pulsarlo mostrará un popup contenido en el index.html que tenemos en nuestra estructura de archivos.He definido dos permisos “alarms“, que es lo que permite a la extensión crear una alarma (luego explicaré para que) y permiso para “juanramonjimenez.es” que es el que permite a la extesión leer datos de esta url, aquí podríamos usar el permiso https://*/* que hace que la extensión pueda leer datos de cualquier url que se visite.Por último definimos el que será nuestro proceso en segundo plano en “background” que es el archivo alarms.js, esto hará que cuando el usuario abra Chrome, ejecutará este archivo y lo dejará cargado en segundo plano mientras navegamos.

alarms.js

Primero explico lo que hace y después pongo el código completo comentado. Como ya dije será un proceso en segundo plano. Crea una referencia a la base de datos local y crea una alarma que se ejecutará cada 60 minutos. El resto son las funciones que llaman al plugin de JSON del WordPress para leer los posts y la lógica que comprueba si hay entradas nuevas y ponen el icono rojo en el logo de la extensión para advertir al usuario.

index.html

Esta es la “web” que se mostrará cuando se pulse en el icono de la extensión, es muy simple solo carga la hoja de estilos, los scripts loadDB.js y app.js y pone la estructura html para que se listen las entradas.

loadDB.js

Este archivo tiene la lógica necesaria para crear la base de datos y la variable de la instacia a esta para poder leerla o insertar nuevos archivos. Realmente no es necesario porque solo se una en el index.html pero si decido ampliar mi extensión y ponerle otros apartados en los que se accede a la base de datos local.Veréis que el archivo alarms.js empieza exactamente igual, y esto es porque JavaScript no provee de ningún método estandar para hacer “includes” de archivos (de los pocos fallos de javascript :) )

app.js

El archivo es bastante simple, únicamente lee las entradas existentes en la base de datos local y los inyecta en el html de la extensión.

 

estilos.css

Finalmente la hoja de estilos que le da el diseño a la extensión.

Ya con todos los archivos lo único que falta es instalarla en nuestro Chrome.

Instalar la extensión en nuestro Chrome

mantenimientoTienes que pulsar en menú, dentro configuración, ahí en el menú de la izquierda tenemos el menú de extensiones. Como ya expliqué hay que activar el modo desarrollador. Pulsamos en “Cargar extensión desempaquetada” y seleccionamos la carpeta en el disco duro que contiene todos los archivos anterior. Si lo has hecho bien verás el icono nuevo en la barra de extensiones, al pulsarlo ejecutará la extensión y verás las entradas del blog.Ya con todo hecho…

¿Y que más?

Dejamos para futuros posts dos apartados muy importantes: Uno de depuración de la extesión, mediante la cual podemos comprobar internamente como funciona, los fallos que salgan, como guarda los datos en la base de datos local… etc. Y lo otro que dejamos es subir la extensión a la tienda.

Conclusiónwrench-fig11_x002

Como ves si sabes hacer una web y sabes un poco de javascript puedes hacer una extensión de Chrome. En mi caso me ocurre mucho que estoy navegando y se me ocurren cosas que desarrollar, porque me sirven a mi, y probablemente le resulte interesante a más personas, porque aunque ya haya otra extensión que haga lo que se te ha ocurrido tu siempre lo puedes hacer mejor o darle tu estilo.¡A programar!.