Tutorial desarrollo de extensiones Chrome (2ª parte)

Tutorial desarrollo de extensiones Chrome (2ª parte)

Después de la primera parte del tutorial de extensiones Chrome voy a continuar añadiendo un poco más de funcionalidad a la extensión de la entrega anterior para mostrar más cosas que podemos hacer con la API de extensiones de chrome.

El código completo de la extensión se puede consultar en mi github.

Y también se puede instalar la extensión desde la Chrome Store.

 

En la entrega anterior expliqué cómo hacer una extensión para añadir un contador de letras en el Gmail. Ahora vamos a guardar estadísticas de las letras escritas cada dia y mostraremos en un popup una gráfica con esa información.

Para guardar las estadísticas usaremos la API chrome.storage y para acceder a ella no podemos hacerlo desde código inyectado en gmail.com por lo que habrá que hacerlo desde un proceso asociado a la extensión. Para ello usaremos el “background” que es un proceso que se arranca con el navegador y se ejecuta en segundo plano controlando los eventos de la extensión.

Para ello definiremos en el manifest el script que vamos a usar como background que será el background.js

En el manifest también definiremos el popup de la extensión con “browser action”, aquí se declara el icono que aparecerá en la barra y el html que se ejecutará al hacer click en el icono.

 

manifest.json

 

 

Cada vez que se abra el gmail se inyectará el siguiente código que es casi idéntico al de la versión anterior excepto que ahora enviamos un mensaje al proceso de background cada vez que se pulsa una tecla al escribir un mail. Para ello usamos chrome.extension.sendMessage();

 

inject.js

 

En el proceso de background para recibir el mensaje hay que declarar un “listener” para ello usamos chrome.extension.onMessage.addListener(). Para distinguir entre otros posibles mensajes (aunque en nuestro caso no los hay) miramos la variable request que es el objeto que se recibe de la pestaña del gmail.

Aquí construimos un objeto con la fecha del dia y el número de carácteres introducidos. Ese objeto lo guardamos serializado en el LocalStorage (sólo puede contener texto plano) habitual de HTML5 y además también usamos  chrome.storage.sync para guardar el objeto (no hace falta serializarlo) y tenerlo sincronizado en cualquier otra instalación de chrome que tengamos asignado a nuestro usuario, de esta forma tendremos las estadísticas sincronizadas aunque usemos el gmail en más de un ordenador.

Posiblemente no haría falta usar el LocalStorage, pero al ser el chrome.storage una API asincrona prefiero ir haciendo sets continuamente, al pulsar cada tecla, sin tener que hacer un get previo, ya que podrían perderse pulsaciones. Guardaremos en el localStorage el objeto local y lo iremos sincronizando cada diez minutos en sincroniza().

 

background.js

 

Finalmente con el popup mostraremos las estadísticas.

El popup es muy sencillo, simplemente tiene un título y un canvas donde se dibujará la gráfica.

popup.html

 

En el código del popup símplemente usaremos el objeto que tenemos para construir la gráfica con chart.js, en el siguiente link se puede ver un tutorial para usar esta libreria.

Sólo se mostrarán los datos de los últimos 30 dias. Se crean dos arrays labels donde van los 30 dias anteriores a la fecha del dia (el eje de las X) y data donde se informa el número de letras introducidas (eje de las Y). Sino se tiene información para un dia se pone a 0.

popup.js

 

Y nada más por ahora. En siguientes entregas añadiré algo más a la extensión o crearé otra nueva diferente, se aceptan sugerencias.

 

Enviar comentario

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