Extensión sencilla para Google Chrome

Las tiendas de aplicaciones están suponiendo una revolución en el mundo de la obtención del Software. A los repositorios de aplicaciones del mundo Linux -el famoso apt-get-, o los plugins de navegadores les están siguiendo otros como la App Store de Apple, los sistemas operativos de los Smartphones (Iphone, Android, RIM…) o el modelo Chrome (bien sea navegador, o su sistema operativo).

En este post voy a explicar cómo he hecho una extensión sencilla para el navegador Google Chrome que muestra el tiempo que lleva abierto el programa. Es una idea que me parece útil y que no ví claramente plasmada en ninguna otra extensión, asi que lo mejor es currárselo uno mismo.

Las extensiones de Google Chrome son muy sencillas. Están basadas en tecnologías sencillas de cliente, como HTML+Javascript+CSS, similares a la creación de una página en local sin interacción con servidor alguno (incluso se puede utilizar HTML5, que es soportado por Chrome, para emplear el localstorage – un tutorial sencillo de las posibilidades lo encontré en http://julianapena.com/2010/01/how-to-build-a-chrome-extension-part-2-options-and-localstorage/-). A esto hay que añadirle un archivo manifest en formato JSON con la configuración de la extensión. Como casi todos los productos de Google, tiene un site con una documentación “decente”: http://code.google.com/chrome/extensions/index.html donde se puede consultar todo lo relativo a esta tecnología.

Como digo, básicamente, consiste en hacer uso de páginas HTML con Javascript en su interior, que emplea, entre otras funcionalidades propias de este lenguaje, la API del navegador, para poder controlar aspectos como los Tabs que hay abiertos, ventanas, eventos, etcétera. En general se trata de interactuar con el navegador y con el cliente a través de Javascript.

Centrándonos en la extensión que he creado, ésta tiene como objetivo mostrar el tiempo que lleva el navegador abierto, es decir, desde que se ejecuta. La información aparecerá en una ventana de popup que aparecerá cuando el usuario pulse sobre el icono. Dirá algo del estilo: “Lleva abierto 0:25:56”.

Una vez definida la estructura veamos el contenido. Necesitaremos 2 páginas y 1 archivo de configuración:

  • background.html, que se ejecuta cuando arranca la extensión, es decir, cuando inicia el navegador si está instalada o inmediatamente después de iniciar. Está en continua ejecución y contiene un código Javascript al que se puede acceder desde otras páginas. En nuestro ejemplo, tendrá una variable que almacena el tiempo (en ms) en el que se ha cargado la página.
  • popup.html, que se ejecuta cuando el usuario hace click en el icono de la extensión. Es similar a visitar una página en un tab, sólo que aparece como un bocadillo en la pantalla.
  • manifest.json, que es la configuración de la extensión.

En detalle:

background.html:

<!-- Developed by alberto.moratilla@gmail.com on January 2011
http://about.me/alberto.moratilla
A Chrome's basic extension example
Icon taken from: http://www.famfamfam.com/lab/icons/silk/-->
<html>
<script>
var tiempo_inicio = new Date;	//Check the time when chrome loads
</script>
</html>

Como se ejecuta al principio, al arrancar Chrome, simplemente guardamos en una variable el instante en el que carga la página.

popup.html:

Posteriormente, cuando el usuario pulse el icono y tengamos que mostrar el tiempo que lleva abierto, restaremos este valor del tiempo actual. La dificultad radica en saber leer el valor de una variable de la página background.html cuando estamos en popup. La API de Chrome pone a disposición del programador un método que devuelve el DOM de la página background:

var background = chrome.extension.getBackgroundPage();

Para acceder a una variable o método de esta página sólo tenemos que usar la notacion “.” de los DOM:

var tiempo_inicio = background.tiempo_inicio;

Está separado en dos pasos por claridad, pero obviamente también sería posible hacer:

var tiempo_inicio = chrome.extension.getBackgroundPage().tiempo_inicio;

El resto del código consiste en tomar el tiempo actual igual que se hizo en background, restarlo y así obtener la diferencia entre ambos instantes en milisegundos. Programar una función que formatee de milisegundos a hh:mm:ss es muy sencillo y aparece a continuación:

function pintaTiempo()
{
	var tiempo_actual = new Date();
	var tiempo_inicio = background.tiempo_inicio;
	document.write(formatTime(tiempo_actual-tiempo_inicio));
}

//Transforms from ms to hh:mm:ss format
function formatTime(ms)
{
	var horas = Math.floor(ms / (1000*60*60));
	
	ms = ms%(1000*60*60);
	var minutos = Math.floor(ms / (1000*60));
	minutos=(minutos <=9)?"0"+minutos:minutos;
	ms = ms%(1000*60);
	var segundos = Math.floor(ms / (1000));
	segundos=(segundos <=9)?"0"+segundos:segundos;
	ms = ms%(1000);

	return (horas + ":" + minutos + ":" + segundos);
}

Finalmente, se pone todo junto en un HTML que se pintará en el bocadillo de popup que aparece al pulsar sobre el icono. No tiene mayor dificultad que unas CSS mal puestas y una llamada a la función dentro del HTML para que haga el document.write (o el innerHTML) correspondiente.

<!-- Developed by alberto.moratilla@gmail.com on January 2011
http://about.me/alberto.moratilla
A Chrome's basic extension example
Icon taken from: http://www.famfamfam.com/lab/icons/silk/-->
<html>
    <head>
        <title>Timer's Popup
        </title>

        <script type="text/javascript">

            var background = chrome.extension.getBackgroundPage();


            function pintaTiempo()
            {
                var tiempo_actual = new Date();
                var tiempo_inicio = background.tiempo_inicio;
                document.write(formatTime(tiempo_actual-tiempo_inicio));
            }

            //Transforms from ms to hh:mm:ss format
            function formatTime(ms)
            {
                var horas = Math.floor(ms / (1000*60*60));
                
                ms = ms%(1000*60*60);
                var minutos = Math.floor(ms / (1000*60));
                minutos=(minutos <=9)?"0"+minutos:minutos;
                ms = ms%(1000*60);
                var segundos = Math.floor(ms / (1000));
                segundos=(segundos <=9)?"0"+segundos:segundos;
                ms = ms%(1000);
	
                return (horas + ":" + minutos + ":" + segundos);
            }

        </script>
        <style>
            body{
                width: 5em;
                text-align: center;

            }
            h1{
                font-size:medium;
                font-family: sans-serif;
                color:brown;
                margin: 0em;
            }

            p{
                font-family: sans-serif;
            }
            #mensaje
            {
                font-size: small;
                color:slategray;

            }
            #tiempo
            {
                font-size: large;
            }
        </style>
    </head>
    <body>
        <h1>Timer</h1>
        <p id="mensaje">Chrome was opened for:</p>
        <p id="tiempo"><script>pintaTiempo();;</script></p>
    </body>
</html>

El último paso del código son las “instrucciones” para que Google Chrome sea capaz de entender nuestra extensión y usarla correctamente. En él aparecerá el nombre de la extensión, comentarios y las referencias a los objetos necesarios. En este caso la página de background, el popup y el icono. También el permiso de acceso a los tabs, aunque no es necesario.

{
  "name": "CTO (Chrome Time Opened)",
  "version": "0.1",
  "description": "Shows the time Chrome is opened. Needs to restart Chrome. Click on the icon to check how much time Chrome is opened.",
  "background_page": "background.html",
  "browser_action": {
    "default_icon": "icon.png",
    "popup":"popup.html"
  },
  "permissions":["tabs"]
}

Simplemente falta el icono de 19×19 para poner en la barra. Se puede tomar uno con liencencia Creative Commons, ya que la extensión será gratuita. Yo he tomado el mío de: http://www.famfamfam.com/lab/icons/silk/

Finalmente, una vez está comprobado que funciona, se puede subir a la tienda de extensiones para poder compartirla con el mundo y ganarse la racción de ego https://chrome.google.com/extensions/?hl=en. Si nunca hemos subido nada como programadores de Google, nos cobrarán 5 dólares. Se crea un .zip con los archivos para subir la extensión, un icono de 128×128 y un screenshot, además de los comentarios descriptivos.

Podéis ver cómo quedó la mía en: https://chrome.google.com/extensions/detail/lkhahcnmgjhbbdkieijbndecclgcibjp?hl=en

Además de los foros y la típica ayuda de Google, es interesante poder descargar apps y comprobar su contenido mediante el modo debug http://code.google.com/chrome/extensions/tut_debugging.html que nos da acceso a la opción “Inspect popup” y poder localizar los archivos ya que se trata de HTML+Javascript+CSS perfectamente analizables. Las extensiones ya instaladas suelen estar en el directorio de configuración de Chrome. En mi disco duro, una de ellas está en: /home/alberto/.config/google-chrome/Default/Extensions/mokmnbikneoaenmckfmgjgjimphfojkd/1.0.9_0. Como se puede ver, tiene un código único que es visible en la configuración de la extensión: con buscar ese código en el disco duro se localizan fácilmente.

Anuncios

One comment

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s