Las extensiones de Google Chrome son pequeños programas que agregan porciones de funcionalidad al navegador o browser.

Su instalación es muy sencilla, sin necesidad de reiniciar el navegador, y poseen la característica al igual que Chome de actualizarse automáticamente en modo silencioso, cuando existen nuevas versiones disponibles.

Las extensiones han sido diseñadas por el equipo de google, tendiendo a los desarrolladores web muy presentes.  Si sabes crear páginas web, tienes un gran paso dado, puesto que puedes desarrollar extensiones.

De hecho,  las extensiones se desarrollan respetando las tecnologías estándar web, como pueden ser HTML, CSS, JS, etc.

Una extensión es un fichero comprimido (en formato zip), con un conjunto de ficheros dentro del archivo.

Sepamos algo más sobre ellas …

Uno de los archivos importantes que toda extensión posee es el manifesto o manifiest . Posee un nombre único y especial, manifest.json. Como su nombre indica, un fichero manifest es un JSON con datos formateados. Este formato es muy empleado usando Javascript para el intercambio de archivos. Este formato no requiere el uso de XML necesariamente. JSON se emplea en entornos donde el tamaño de los datos entre el cliente y el navegador es de fiar y no es importante disponer de procesamiento XSLT para manipular los datos en el cliente.

Por lo tanto en el fichero manifest.json existen metadatos de configuración de la extensión. Los permisos, componentes y otros recursos empleados. Estos componentes ofrecen a la extensión su funcionalidad.

Estructura de una extensión.

Una extensión al menos posee algunos de los siguientes componentes.

• Browser action o Page action:  Son dos de los Interfaces que la extensión posee. El browser action se encuentra en la barra de cada tab del navegador. El Page action aparece selectivamente en lo que se denomina omnibox, o icono al lado derecho  de la barra de direcciones, y que puede ser desactivado o activado para cada tab. Una extensión puede tener sólo una UI o interfaz. Browser o action.
• Los Scripts de contenido o Content Scripts, que son CSS y Javascript inyectado o incluido en las páginas html. Se usan como hacemos con los scripts. Alternativa al browser o page actions.
• Las Background pages, son scripts completos que nos ayudan a gestionar el estado y coordinar tareas a través de los componentes de la extensión. Cuando una extensión se vuelve más compleja, puede ser necesario el uso de una background page.
• Ficheros de utilidad web, un conjunto de archivos que pueden ser imágenes, bibliotecas javascript, películas flash, cualquier tipo de archivo que la extensión pueda necesitar.

La API de las extensiones es pequeña y “fácil” de aprender. Actualmente define unos 40 objetos y 40 métodos.

Chrome es el nombre del objeto superior, que es expuesto automáticamente a todas las extensiones.

La API se divide en 6 módulos, que son representados por objetos que se encuentran contenidos en “chrome”

• Chrome.extension.*, proporciona métodos y propiedades que nos permiten enviar mensajes para comunicarse entre los componentes de la extensión y resolver las URLS de los ficheros de extensión.
• Chrome.browserAction.*, nos permite establecer la apariencia de las acciones del navegador y de sus insignias o badges. Áreas de texto, superpuestas sobre las acciones del navegador.
• Chrome.PageAction.*, nos permite activar o inhabilitar las acciones de página.
• Chrome.windows.*, nos deja abrir, cerrar , buscar y actualizar ventanas del navegador. Requiere permiso de tabs en el manifest. Windows y tabs se encuentran estrechamente relacionados compartiendo permisos comunes.
• Chrome.tabs.*, nos permite realizar las mismas acciones en las pestañas. Requiere también permisos en tab.
• Crhome .bookmark.*, nos permite leer y escribir en el árbol de los bookmarks. Requiere permisos de bookmarks.

En el fichero de manifest aparece el nombre, versión de la extensión, una descripción, los iconos empleados, su posee browser_action  (su icono, título,  página html asociada, etc). Se establecen los permisos, si son sobre tabs, bookmarks, etc, Si posee una backbround page, la url de actualización, versión del manifest, infinidad de opciones parametrizables para la extensión.

Sigamos.

Por lo tango, podemos apreciar que programar una extensión es como programar una web, sigue una filosofía parecida y mismas tecnologías. Donde el empleo de javascript dentro de las páginas es alto. Como hemos visto, muchas cosas que las extensiones pueden realizar, se logran gracias a la API proporcionada por crhome.

Por ejemplo, si necesitamos dialogar con un servidor, podemos emplear XmlHttpRequest. Si necesitamos datos persistentes almacenados, podemos emplear cookies, LocalStorage o HTML5 Databases. Si necesitamos mostrar una página de opciones, podemos emplear html y CSS.

La API de google Chrome también proporciona acceso a objetos propios.

Veamos un ejemplo:

Este es el código que muestra una extensión simple de un icono browser action.

Cuando el usuario hace clic sobre él, se abre una página web que se encuentra incluida en los archivos de la extensión.

Chrome.browserAction.onClicked.addListener (function(tab)
Chrome.tabs.create({url:chrome.extension.getURL(‘holamundo.html’)});

});

Podemos identificar en el código superior que se emplea el namespace o espacio de nombes “chrome” . Chrome es un objeto global que toda extensión puede llamar y usar. Esta API de extensiones sólo es visible en este ámbito. Usamos los módulos browserActions , Tabs y extension.  Lo primero es un evento que registra la acción al hacer clic sobre el icono del browser.

Un dato importante son los tipos de llamadas a las funciones. Existen funciones síncronas y asíncronas. Muchas llamadas a la API son síncronas, pero otras son asíncronas.

La llamada síncrona espera a que finalice el método, es decir, no se ejecutar la función siguiente hasta que no se termine la actual. A diferencia del asíncrono que no espera, continúa con otra llamada.

Los callbacks son funciones que se ejecutan después de que finalice otra, y se pueden encadenar.

Veamos un ejemplo:

Crhome.bookmarks.update(42, { title:”Nuevo título”},

Function(bookmarkNode) {
   // hacer algo con el marcador cambiado

});

En el ejemplo superior, le decimos a google chrome que modifique uno de los marcadores del usuario, cambiando su título. Esta llamada es asíncrona, lo que significa que el código que realiza la llamada continuará ejecutándose y la función que desplegamos realizará un cambio después, una vez que el marcador se cambie. En este caso se explica lo que se denomina callback, hará algo cuando el marcador se cambie, pero no espera de manera síncrona a ello.

Las llamadas asíncronas cobran sentido en google Chrome y su arquitectura multiproceso. Las páginas web y javascript se ejecuta en procesos separados, aislamiento y multitarea de los mismos.

Si las llamadas como el ejemplo superior fuesen síncronas, nuestra extensión tendría que parar cada vez que se realiza un cambio y esperar al que el navegador responda, perdiendo iteración con el usuario.

El uso de APIS asíncronas es más costoso, pero ofrece un mayor servicio y experiencia al usuario.

Por lo tango es mejor escribir código de la siguiente forma asíncrona:

Chrome.someModule.doSomething (1,function(resultado){

Chrome.otherModule.doSomeThingElse(resultado.value,

Function(OtroResultado)

 // haz mas cosas

});});

En vez de esta, síncrona:

var resultado=chrome.someModule.doSometing(1):

var OtroResultado=chrome.otherModule.doSomeThingElse(“test”,

resultado.value);

// haz mas cosas

Publicar una extensión.

Es necesario aclarar que la primera vez que publicamos algo en el área de desarrolladores de google, es necesario pagar 5$. Por lo tanto el primer plugin te va a costar dinero.

La publicación de extensiones se realiza en la galería de google. Una vez que hemos desarrollado la extensión, y todos los archivos se encuentran en la carpeta, lo primero que tenemos que hacer es comprobar los datos del manifest, como son el título, la descripción, y que los recursos se encuentren todos en la carpeta. El icono tiene especial relevancia, puesto que son cosas que se muestran a los usuarios cuando lo descargan.

Con toda la carpeta seleccionada, hacemos un fichero zip, con cualquier compresor estándar. Este fichero le subimos a la galería.

https://chrome.google.com/webstore/category/extensions

Para ello es necesario acceder al dashboard.

https://chrome.google.com/webstore/developer/dashboard

En el dashboard podemos ver todas las extensiones que hemos subido. Pulsamos en añadir nuevo elemento y subimos el zip. Nos aparecerán unas opciones relacionadas con el plugin que queremos subir, información, iconos, screenshots, direcciones, etc.

Para finalizar podemos ver una preview o publicar el plugin de forma definitiva.

Singularidades

No todas las extensiones realizadas necesitan estar publicadas en  la web de google.  Podemos tener archivos CRX (hablaré sobre ellos) que se agregarán en la opción extensiones del navegador, mediante drag-drop. Antiguamente se hacía haciendo doble click sobre el crx, pero esto ha cambiado.

Todas las extensiones poseen un ID que se puede apreciar activando el modo desarrollador dentro del google chrome. Esta Id posee 32 caracteres, que identifican unívocamente de forma global a la extensión. Esto se realiza para evitar conflictos entre extensiones. Esta asignación la realiza google crhome y evita tener una central que autorice los IDs generados. El mecanismo empleado es un par de claves pública y privada para la extensión. Con el hash de la clave pública se determina el ID de extensión. Todo esto se realiza de forma automática por google cuando se sube un archivo zip.

Las extensiones de google se empaquetan en archivos crx, si usamos la galería de google para publicar archivos, con el botón publicar, google genera el crx por nosotros. Pero este proceso le podemos hacer nosotros desde el navegador con el botón “Pack extensión” en las opciones de extensiones de google chrome.

Un fichero crx es realmente un archivo zip con 2 cosas añadidas, una clave pública, y un signature o firma del contenido generado por la clave privada, además de los contenidos lógicamente.

Cuando instalamos un crx, google chrome extrae la clave pública, la firma y el contenido zip, y se asegura que el contenido es válido usando la clave pública.

Otra singularidad es que dentro del fichero manifest.json del plugin puede aparecer la opción update_url, es una dirección que el navegador comprueba cada cierto tiempo (horas) en busca de un fichero xml, indicando si existen cambios. Lógicamente nosotros no nos damos cuenta puesto que es automático y silencioso. El navegador puede actualizar ficheros crx sin necesidad de conexión ssl porque comprueba la firma dentro del crx antes de instalarle. Si se deposita la extensión dentro de la galería de google no necesitaremos preocuparnos de la autoactualización ellos lo harán por nosotros, ni de incluir esa línea. Pero si la hospedamos nosotros tendremos que incluir el update_url dentro del manifest. Proteger esa clave privada es muy importante cuando somos nosotros quienes hospedamos las extensiones.

El entorno de desarrollo que proporciona google Chrome al inspeccionar un elemento, es realmente potente. Podemos añadir breakpoints a código fuente javascript y realizar un debug paso a paso con las teclas f10 y f11. Para ello segundo botón del ratón sobre un elemento, inspeccionar elemento. Opción sources, picamos en el cuadrado pequeño superior izquierdo, seleccionamos la página, y marcamos los breakpoints en el lateral. Permite añadir expresiones a debugear, ver la pila de llamadas, ámbitos, etc …

Este grado de depuración no lo he conseguido con Firebug.

Más cositas, esto es muy interesante, me ha costado averiguarlo.

TRUCO o TRAMPA

Para aprender rápidamente como desarrollar extensiones, podemos observar y analizar las extensiones de los demás, existen muchas.  Es la manera más rápida de aprender a desarrollar.

Pero,  Tenemos un problema, cuando descargamos los crx no vemos donde se almacenan, no sabemos cómo ver el contenido. Nos gusta una extensión, queremos traducirla al castellano, queremos mejorarla, aprender de ella para desarrollar otra  y no sabemos cómo ver el contenido, ya que realmente es html y javascript. Sabemos que la ayuda se encuentra  en ingles, no todo el mundo lo conoce y es difusa.

No tengo ni idea de cómo empezar.

Tranquilos, os diré un truco, muy bueno…, espero que google no se enfade 😉

Vamos por partes. Esto es lo que he descubierto.

Primero sabemos que los crx son archivos zip. Pero no sabemos donde se almacenan ni cómo recuperarlos,

hasta ahora…

Si intentamos descargarlos con otro navegador alternativo, no podemos, puesto que nos pide google chrome para ello.

En la ventana superior, capturado de herramientas-> extensiones, vemos como hemos activado el modo desarrollador, se pueden apreciar los IDs de cada extensión …, acordaos de esto.

1. Descargamos el plugin que nos interesa aprender, de la galería de extensiones de google
2. Vamos a opciones en google crhome, herramientas, extensiones.
3. Activamos la casilla superior, modo de desarrollador.
4. Observamos el  Id que aparece en la extensión a mejorar. Un Hash de 32 bits.
5. Ese ID es la carpeta que vamos a buscar en el disco duro de nuestro ordenador.
6. En función del sistema operativo se almacena en una ruta u otra, en este caso os dejo la ruta de
   en Windows 7:
   C:\Users\mi_usuario\AppData\Local\Google\Chrome\User Data\Default\Extensions\la_clave_id_larga_generada_que_vemos
   en Windows 8:
   C:\Users\golden\AppData\Local\Google\Chrome\User Data\Default\Extensions

Recordar que la unidad puede cambiar, en función de dónde se encuentra el sistema instalado, y es muy importante activar la casilla, mostrar archivos ocultos. En la imagen se observan las carpetas con cada una de las extensiones y su respectivo ID.

Voilá, ese es el código fuente de  la extensión.  Ya podéis estudiarla.

Nota: Puede aparecer ofuscado, el desarrollador puede no ser tan tonto, o no querer compartir código …

Esta es la dirección inicial

https://developer.chrome.com/extensions/api_index.html

Eso es todo, a crear plugins, pero en castellano por favor… 😉 hay mucho en inglés, mejoremos chrome en nuestro idioma…

A por ellos.