Tras la salida de la chrome webstore y de las apps de Google Chrome (y futuras de Chrome OS) empieza a tener cierto sentido echar un ojo a que posibilidades nos da esta plataforma de aplicaciones.

Antes de empezar permitirme especificar que tipo de aplicaciones/añadidos pueden hacerse a Google Chrome:

– Como base tenemos las extensiones –Extensions–, que son el equivalente a los plugins de Firefox pero en Chrome. La forma «fácil» de crear extensiones es añadiendo un nuevo botón a la barra de Chrome que realizará una acción o mostrará una pequeña ventana cuando lo pulsemos. Las extensiones aparte de sus propias funcionalidades aportan una API javascript bastante cómoda y decentemente documentada.

– Para continuar tenemos las aplicaciones ‘Hosteadas’ –Hosted Apps–, que son aplicaciones web -o sea, paginas web, en las que podemos pedir anticipadamente permisos de interacción con el navegador que harán que nuestras aplicaciones aun estando en nuestros propios servidores puedan disponer de la misma API que las extensiones.

– Para terminar, tenemos las aplicaciones paquetizadas –Packaged Apps–, que evitan llamar a una web concreta para cargar la Aplicación y por tanto esperan que el html y el javascript queden por completo definidos en la propia aplicación.

(Hay otras cosas que podemos hacer con Chrome como los «Themes» que son plantillas gráficas para el navegador, pero creo que eso nos interesa mucho menos.)

Cuando desarrollo un tipo de aplicación u otro

Básicamente lo primero a decidir es si hacemos una extensión o una app. Ahí no hay que complicarse pensando en posibilidades de programación sieno pensar en que busca el usuario. Cuando busca una extensión espera tener un añadido global a todas sus páginas o una pequeña funcionalidad recurrente. Cuando busca una App quiere un entorno cerrado que le permita interactuar. Así de simple.

¿Como empiezo? – El manifiesto

Superada esta primera decisión, sigamos con nuestro espíritu de desarrollo y veamos como podemos empezar a desarrollar. Google Chorme ha detallado un único archivo llamado manifiesto («manifest.json») donde en formato json debemos declarar las variables de configuración de nuestra aplicación/extensión.

Todos los posibles añadidos a realizar en Google Chrome parten del archivo de manifiesto y por lo tanto tenemos que aprender a codificarlo. Si bien es cierto, que para cada tipo de aplicación usaremos distintas variables del manifiesto con lo que lo mejor es disponer de un pequeño ejemplo para cada tipo de aplicación.

– Manifiesto para las extensiones

– Manifiesto para aplicaciones hosteadas

– Manifiesto para aplicaciones paquetizadas

– Manifiesto para los themes

Como se ve, es siempre lo mismo, pero al realizar un tipo de aplicación u otra algunas variables cambian o cobran un matiz distinto. Al final, lo mejor es empezar por el ejemplo del tipo de aplicación que vamos a crear y a partir de ahi empezar a coger experiencia. Más adelante ya pasaremos a entender completamente todas las posibilidades que nos Chorme nos aporta con el manifiesto y solo entonces necesitaremos una referencia global a este tipo de archivos:

– Referencia global del archivo «manifest.json»

Aportando contenido

Una vez hemos declarado nuestro manifiesto seguiremos creando el resto de elementos de nuestra aplicación. Para ello básicamente hay dos formas de hacerlo: incluir una url donde debe consultarse la aplicación (Hosted Apps) o incluir los archivos junto al manifiesto en la programación de la propia aplicación (Extensions y Packaged Apps). Es importante saber que normalmente deberemos incluir algún fichero (como iconos o javascript) a nuestra aplicación incluso si es cargada en otro host.

– Al cargar el contenido externo, simplemente dirigiremos al usuario a la URL que indiquemos en el manifiesto y por lo tanto a partir de ahí ya todo queda en el desarrollo web normal a día de hoy (pero con html5 y la api de chrome).

– Al incluir nosotros el contenido, simplemente debemos crear una carpeta en nuestro ordenador (o sistema de desarrollo), incluir en ella el manifiesto y a su lado los archivos que vayamos necesitando. En el propio manifiesto haremos la llamada a algunos de ellos y a partir de ahi seran ellos mismos los que vayan volviendose más o menos complejos. Las tecnologías de las que disponemos básicamente son Html 5 y Javascript. Esto tiene la ventaja de que no tenemos que aprender nada nuevo (salvo la api javascript de chrome) y como desventaja que se hace extraño no disponer de un entorno servidor como tal y tener que tratar toda la programación en javascript.

Interactuando con el navegador/sistema

Hasta aqui hemos podido hacer pequeños añadidos simples al navegador. Ahora nos queda la parte divertida: interactuar con él.

Para ello podemos usar los nuevos métodos de HTML 5 y las chrome APIs que básicamente ponen a nuestra disposición el objeto «chrome» dentro del cual podemos encontrar los disintos objetos con sus métodos y propiedades de acceso.

Así llamando por ejemplo a «chrome.browserAction» dispondremos de varios métodos para manipular los botones de la barra de navegación de chrome.

Esta api, conjuntamente con los métodos HTML5, crea un sistema realmente potente y por eso requiere de la solicitud de permisos especiales al usuario que debe permitir expresamente que va a darle ese acceso a la aplicación.

– Ver permisos especiales de las APIs y de los métodos HTML5 en Chrome

Así pues, para jugar con estos permisos podemos:

– Declararlos en el manifiesto con la variable «permissions». De esta forma al instalar la nueva aplicación/extensión se le solicitará al usuario el permiso, que ya será válido durante toda la vida de esa aplicación/extensión.

– Lanzarlos, si se permite, sin estar declarados (o en webs que realmetne no están declaradas ni como aplicación ni como extensión). De esta forma Se mostrará una alerta al usuario (como las de bloqueadores de popups) anunciando al usuario que la aplicación esta intentando acceder a ese tipo de información.

La gestión de todas las funciones de la api se vuelve radicalmente más sencilla si pedimos los permisos en el manifiesto, por lo tanto es preferible hacerlo siempre ahí.

A partir de ahi veamos algunas cosas interesantes que pueden permitirnos las apis:

– chrome.bookmarks Nos permite acceder a y manipular los «favoritos» del navegador del usuario. No hay sorpresas aquí, simplemente se trata de ver el directorio de «bookmarks» y poco más.

– chrome.browserAction, como decíamos nos permite manipular los botones de la barra de navegación de Chrome.

– chrome.cookies es un interesante añadido a las coockies del navegador. Por un lado nos permite, al solicitar permisos, acceder a las coockies de dominios concretos desde la aplicación y así interactuar mejor con ciertas apps/webs. Por otro aporta métodos rápidos para la gestión de coockies.

– chrome.tabs Aparte de lo que podemos esperar de una api de tabs (creación, captura y cierre de tabs) podemos usar esta aplicación para añadir Javascript y/o CSS a caulquier Tab abierto. Y ya sabemos que de añadir javascript a modificar el DOM solo hay un paso. Esto significa que todo lo que sea manipulación o añadidos a páginas lo lanzaremos desde esta api.

– chrome.extension Es un sistema para interactuar entre extensiones y ver datos de las mismas. Ya para código profundo con listeners de distintos tipos.

– chrome.history Nos permite acceder al historial del usuario. Esto sol tiene sentido para estadisticas y páginas de gestión del historial, pero es necesario para páginas como la propia home de Chrome. Interesante la posibilidad de añadir historial falso mediante la aplicación 😉

– chrome.i18n Como no podía ser de otra forma con ese nombre, nos sirve para gestionar aplicaciones o extensiones multiidioma.

– chrome.idle Es un gestor del tiempo de abandono del usuario. Nos permite saber hace cuanto que no está interactuando con el navegador y lanzar eventos cuando vuelva a activarlo. Ideal para no saturar la maquina con procesos y recargas innecesarias.

– chrome.management Permite acceder a la lista de extensiones y apps que el usuario tiene instaladas. Resulta ideal para cruzar ofertas.

– chrome.pageAction Permite añadir botones en la propia barra de direcciones del navegador (dentro de la barra, no al lado como con browser action). Estos botones son ideales para remarcar que una accion actua sobre la página actual y no las demás.

– chrome.contextMenus Con esta extensión podemos crear secciones y submenús en el menú contextual del navegador (el que se abre al hacer click con el botón derecho del mouse).

– Por último chrome.windows Permite trabajar con distintas ventanas de chromme, que quedan diferenciadas de los propios tabs.

Tan solo leyendo esta lista, ya nos vienen a la cabeza distintos añadidos que podríamos querer realizar a Chrome o formas de mejorar nuestras apps, ¿verdad? Pues esto no es lo único que hay ya que Chrome también permite acceder a algunas apis experimentales con chrome.experimental. Es de suponer que estas apis terminarán formando parte del global pero de momento tan solo son accesibles para desarrollos de prueba (no podemos publicar apps ni extensiones con ellas, pero viene bien echarles un ojo).

¿y ahora qué me falta? ¡Guardar datos!

Y es que nuestras aplicaciones no pasarán de ser pequeños añadidos hasta que no podamos guardar datos de los usuarios de una sesión a otra. Estos datos podemos querer guardarlos simplemente para ofrecer un poco de configuración al usuario (por ejemplo en extensiones) o para ir guardando sus ultimas acciones o decisiones.

Creando páginas de opciones:

Las páginas de opciones se declaran en el manifiesto como una simple página html. No tiene más, queda en nuestro terreno crear el HTML, dar formato y validar los datos que ahí se guarden.

Guardando datos en el sistema:

Para eso se usan los metodos de html5 «localStorage» (que guardará el dato para siempre) y sessionStorage (que guardará el dato durante la actual sesión del usuario):

Así los guardados de datos se simplifican mucho. Veamos un ejemplo de como mostramos un contador de numero de veces que ha pasado el usuario por una página:

if (localStorage.pagecount)
{
  localStorage.pagecount= Number(localStorage.pagecount) + 1;
}
else
{
  localStorage.pagecount = 1;
}

alert(" Te recordamos que has visto esta página " + localStorage.pagecount + " vez/veces.");

Probando nuestro desarrollo y publicándolo…

Ya tenemos todas las herramientas para contruir nuestra Aplicación/Extensión de Chrome. Ya solo queda poder ir probando lo que hacemos y terminar subiendo la aplicación a Google para que la muestre en su directorio.

En la guía de inicio de la documentación de google podemos ver como subir nuestra aplicación en modo desarrollo. Básicametne se trata de habilitar el modo desarrollador en las extensiones ( Preferencias >> Herramientas >> Extensiones) e indicar en «Cargar estensión descomprimida…» nuestra carpeta con el manifiesto y el resto de los archivos. Se agradece que hayan pensado en un sistema tan sencillo para realizar las pruebas.

Cuando hayamos terminado nuestra extensión/aplicación podemos empaquetarla en un archivo «.crx» para publicarla donde queramos. Esto lo podremos hacer desde el propia página de desarrollo de extensiones indicandole a chrome la opción «Empaquetar extensión» y seleccionando de nuevo la carpeta en nuestro ordenador. El sistema nos creará 2 archivos, el «.crx» corresponde a nuestra extensión y un archivo «.pem» que nos sirve para poder en un futuro actualizarla, asi que este hay que guardarlo en un sitio donde no se pierda (¿alguien dijo Dropbox?).

Otra opción es publicarla en la webStore. Esto es aún más sencillo. Entramos en el panel de desarrolladores de la Chrome web store y clickamos en Add New Item. Nos pedirá nuestra aplicación en un archivo ZIP y de ahi seguiremos el proceso de publicación en la webStore. Si tu aplicación va a ser de pago necesitarás también usar la api de licencias, pero yo empezaría por probar cosas pequeñas grauitas antes de lanzarme a vender aplicaciones importantes.