Una extensi\u00f3n al menos posee algunos de los siguientes componentes.<\/p>\n
- \n
- Browser action o Page action:\u00a0 Son dos de los Interfaces que la extensi\u00f3n 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\u00a0 de la barra de direcciones, y que puede ser desactivado o activado para cada tab. Una extensi\u00f3n puede tener s\u00f3lo una UI o interfaz. Browser o action.<\/li>\n
- Los Scripts de contenido o Content Scripts, que son CSS y Javascript inyectado o incluido en las p\u00e1ginas html. Se usan como hacemos con los scripts. Alternativa al browser o page actions.<\/span><\/li>\n
- Las Background pages, son scripts completos que nos ayudan a gestionar el estado y coordinar tareas a trav\u00e9s de los componentes de la extensi\u00f3n. Cuando una extensi\u00f3n se vuelve m\u00e1s compleja, puede ser necesario el uso de una background page.<\/span><\/li>\n
- Ficheros de utilidad web, un conjunto de archivos que pueden ser im\u00e1genes, bibliotecas javascript, pel\u00edculas flash, cualquier tipo de archivo que la extensi\u00f3n pueda necesitar.<\/span><\/li>\n<\/ul>\n
La API de las extensiones es peque\u00f1a y \u201cf\u00e1cil\u201d de aprender. Actualmente define unos 40 objetos y 40 m\u00e9todos<\/strong>.<\/p>\n
Chrome es el nombre del objeto superior, que es expuesto autom\u00e1ticamente a todas las extensiones.<\/p>\n
La API se divide en 6 m\u00f3dulos<\/strong>, que son representados por objetos que se encuentran contenidos en \u201cchrome\u201d<\/p>\n
- \n
- Chrome.extension.*, proporciona m\u00e9todos y propiedades que nos permiten enviar mensajes para comunicarse entre los componentes de la extensi\u00f3n y resolver las URLS de los ficheros de extensi\u00f3n.<\/li>\n
- Chrome.browserAction.*, nos permite establecer la apariencia de las acciones del navegador y de sus insignias o badges. \u00c1reas de texto, superpuestas sobre las acciones del navegador.<\/span><\/li>\n
- Chrome.PageAction.*, nos permite activar o inhabilitar las acciones de p\u00e1gina.<\/li>\n
- 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.<\/li>\n
- Chrome.tabs.*, nos permite realizar las mismas acciones en las pesta\u00f1as. Requiere tambi\u00e9n permisos en tab.<\/li>\n
- Crhome .bookmark.*, nos permite leer y escribir en el \u00e1rbol de los bookmarks. Requiere permisos de bookmarks.<\/li>\n<\/ul>\n
En el fichero de manifest aparece el nombre, versi\u00f3n de la extensi\u00f3n, una descripci\u00f3n, los iconos empleados, su posee browser_action\u00a0 (su icono, t\u00edtulo,\u00a0 p\u00e1gina html asociada, etc). Se establecen los permisos, si son sobre tabs, bookmarks, etc, Si posee una backbround page, la url de actualizaci\u00f3n, versi\u00f3n del manifest, infinidad de opciones parametrizables para la extensi\u00f3n.<\/p>\n
Sigamos<\/strong>.<\/p>\n
Por lo tango, podemos apreciar que programar una extensi\u00f3n es como programar una web, sigue una filosof\u00eda parecida y mismas tecnolog\u00edas. Donde el empleo de javascript dentro de las p\u00e1ginas es alto. Como hemos visto, muchas cosas que las extensiones pueden realizar, se logran gracias a la API proporcionada por crhome.<\/p>\n
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\u00e1gina de opciones, podemos emplear html y CSS.<\/p>\n
La API de google Chrome tambi\u00e9n proporciona acceso a objetos propios.<\/p>\n
Veamos un ejemplo:<\/p>\n
Este es el c\u00f3digo que muestra una extensi\u00f3n simple de un icono browser action.<\/p>\n
Cuando el usuario hace clic sobre \u00e9l, se abre una p\u00e1gina web que se encuentra incluida en los archivos de la extensi\u00f3n.<\/p>\n
Chrome.browserAction.onClicked.addListener (function(tab)<\/strong><\/span>
\n Chrome.tabs.create({url:chrome.extension.getURL(\u2018holamundo.html\u2019)});<\/strong><\/span><\/p>\n});<\/strong><\/span><\/p>\n
Podemos identificar en el c\u00f3digo superior que se emplea el namespace o espacio de nombes \u201cchrome\u201d . Chrome es un objeto global que toda extensi\u00f3n puede llamar y usar. Esta API de extensiones s\u00f3lo es visible en este \u00e1mbito. Usamos los m\u00f3dulos browserActions , Tabs y extension.\u00a0 Lo primero es un evento que registra la acci\u00f3n al hacer clic sobre el icono del browser.<\/p>\n
Un dato importante son los tipos de llamadas a las funciones. Existen funciones s\u00edncronas y as\u00edncronas<\/strong>. Muchas llamadas a la API son s\u00edncronas, pero otras son as\u00edncronas.<\/p>\n
La llamada s\u00edncrona espera a que finalice el m\u00e9todo, es decir, no se ejecutar la funci\u00f3n siguiente hasta que no se termine la actual. A diferencia del as\u00edncrono que no espera, contin\u00faa con otra llamada.<\/p>\n
Los callbacks son funciones que se ejecutan despu\u00e9s de que finalice otra, y se pueden encadenar.<\/p>\n
Veamos un ejemplo:<\/p>\n
Crhome.bookmarks.update(42, { title:\u201dNuevo t\u00edtulo\u201d},<\/strong><\/span><\/p>\n
Function(bookmarkNode) {<\/strong><\/span>
\n \u00a0\u00a0 \/\/ hacer algo con el marcador cambiado<\/strong><\/span><\/p>\n});<\/strong><\/span><\/p>\n
En el ejemplo superior, le decimos a google chrome que modifique uno de los marcadores del usuario, cambiando su t\u00edtulo. Esta llamada es as\u00edncrona, lo que significa que el c\u00f3digo que realiza la llamada continuar\u00e1 ejecut\u00e1ndose y la funci\u00f3n que desplegamos realizar\u00e1 un cambio despu\u00e9s, una vez que el marcador se cambie. En este caso se explica lo que se denomina callback, har\u00e1 algo cuando el marcador se cambie, pero no espera de manera s\u00edncrona a ello.<\/p>\n
Las llamadas as\u00edncronas cobran sentido en google Chrome y su arquitectura multiproceso. Las p\u00e1ginas web y javascript se ejecuta en procesos separados, aislamiento y multitarea de los mismos.<\/p>\n
Si las llamadas como el ejemplo superior fuesen s\u00edncronas, nuestra extensi\u00f3n tendr\u00eda que parar cada vez que se realiza un cambio y esperar al que el navegador responda, perdiendo iteraci\u00f3n con el usuario.<\/p>\n
El uso de APIS as\u00edncronas es m\u00e1s costoso, pero ofrece un mayor servicio y experiencia al usuario.<\/p>\n
Por lo tango es mejor escribir c\u00f3digo de la siguiente forma as\u00edncrona:<\/p>\n
Chrome.someModule.doSomething (1,function(resultado){<\/strong><\/span><\/p>\n
Chrome.otherModule.doSomeThingElse(resultado.value,<\/strong><\/span><\/p>\n
Function(OtroResultado)<\/strong><\/span><\/p>\n
\u00a0\/\/ haz mas cosas<\/strong><\/span><\/p>\n
});});<\/strong><\/span><\/p>\n
En vez de esta, s\u00edncrona:<\/p>\n
var resultado=chrome.someModule.doSometing(1):<\/strong><\/span><\/p>\n
var OtroResultado=chrome.otherModule.doSomeThingElse(\u201ctest\u201d,<\/strong><\/span><\/p>\n
resultado.value);<\/strong><\/span><\/p>\n
\/\/ haz mas cosas<\/strong><\/span><\/p>\n
Publicar una extensi\u00f3n.<\/b><\/p>\n
Es necesario aclarar que la primera vez que publicamos algo en el \u00e1rea de desarrolladores de google, es necesario pagar 5$. Por lo tanto el primer plugin te va a costar dinero.<\/p>\n
La publicaci\u00f3n de extensiones se realiza en la galer\u00eda de google. Una vez que hemos desarrollado la extensi\u00f3n, 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\u00edtulo, la descripci\u00f3n, 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.<\/p>\n
Con toda la carpeta seleccionada, hacemos un fichero zip, con cualquier compresor est\u00e1ndar. Este fichero le subimos a la galer\u00eda.<\/p>\n
https:\/\/chrome.google.com\/webstore\/category\/extensions<\/a><\/p>\n
Para ello es necesario acceder al dashboard.<\/p>\n
https:\/\/chrome.google.com\/webstore\/developer\/dashboard<\/a><\/p>\n
En el dashboard podemos ver todas las extensiones que hemos subido. Pulsamos en a\u00f1adir nuevo elemento y subimos el zip. Nos aparecer\u00e1n unas opciones relacionadas con el plugin que queremos subir, informaci\u00f3n, iconos, screenshots, direcciones, etc.<\/p>\n
Para finalizar podemos ver una preview o publicar el plugin de forma definitiva.<\/p>\n
Singularidades<\/b><\/p>\n
No todas las extensiones realizadas necesitan estar publicadas en\u00a0 la web de google.\u00a0 Podemos tener archivos CRX (hablar\u00e9 sobre ellos) que se agregar\u00e1n en la opci\u00f3n extensiones del navegador, mediante drag-drop. Antiguamente se hac\u00eda haciendo doble click sobre el crx, pero esto ha cambiado.<\/p>\n
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\u00edvocamente de forma global a la extensi\u00f3n. Esto se realiza para evitar conflictos entre extensiones. Esta asignaci\u00f3n la realiza google crhome y evita tener una central que autorice los IDs generados. El mecanismo empleado es un par de claves p\u00fablica y privada para la extensi\u00f3n. Con el hash de la clave p\u00fablica se determina el ID de extensi\u00f3n. Todo esto se realiza de forma autom\u00e1tica por google cuando se sube un archivo zip.<\/p>\n
Las extensiones de google se empaquetan en archivos crx, si usamos la galer\u00eda de google para publicar archivos, con el bot\u00f3n publicar, google genera el crx por nosotros. Pero este proceso le podemos hacer nosotros desde el navegador con el bot\u00f3n \u201cPack extensi\u00f3n\u201d en las opciones de extensiones de google chrome.<\/p>\n
Un fichero crx es realmente un archivo zip con 2 cosas a\u00f1adidas, una clave p\u00fablica, y un signature o firma del contenido generado por la clave privada, adem\u00e1s de los contenidos l\u00f3gicamente.<\/p>\n
Cuando instalamos un crx, google chrome extrae la clave p\u00fablica, la firma y el contenido zip, y se asegura que el contenido es v\u00e1lido usando la clave p\u00fablica.<\/p>\n
Otra singularidad es que dentro del fichero manifest.json del plugin puede aparecer la opci\u00f3n update_url, es una direcci\u00f3n que el navegador comprueba cada cierto tiempo (horas) en busca de un fichero xml, indicando si existen cambios. L\u00f3gicamente nosotros no nos damos cuenta puesto que es autom\u00e1tico y silencioso. El navegador puede actualizar ficheros crx sin necesidad de conexi\u00f3n ssl porque comprueba la firma dentro del crx antes de instalarle. Si se deposita la extensi\u00f3n dentro de la galer\u00eda de google no necesitaremos preocuparnos de la autoactualizaci\u00f3n ellos lo har\u00e1n por nosotros, ni de incluir esa l\u00ednea. 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.<\/p>\n
El entorno de desarrollo que proporciona google Chrome al inspeccionar un elemento, es realmente potente. Podemos a\u00f1adir breakpoints a c\u00f3digo fuente javascript y realizar un debug paso a paso con las teclas f10 y f11. Para ello segundo bot\u00f3n del rat\u00f3n sobre un elemento, inspeccionar elemento. Opci\u00f3n sources, picamos en el cuadrado peque\u00f1o superior izquierdo, seleccionamos la p\u00e1gina, y marcamos los breakpoints en el lateral. Permite a\u00f1adir expresiones a debugear, ver la pila de\u00a0llamadas,\u00a0\u00e1mbitos, etc …<\/p>\n
Este grado de depuraci\u00f3n no lo he\u00a0conseguido\u00a0con Firebug.<\/p>\n
![\"Developer-tools\"](\"http:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/03\/Developer-tools.png\")
<\/a><\/p>\nM\u00e1s cositas, esto es muy interesante, me ha costado averiguarlo.<\/b><\/p>\n
TRUCO o TRAMPA<\/strong><\/span><\/p>\n
Para aprender r\u00e1pidamente como desarrollar extensiones, podemos observar y analizar las extensiones de los dem\u00e1s, existen muchas. \u00a0Es la manera m\u00e1s r\u00e1pida de aprender a desarrollar.<\/p>\n
Pero,\u00a0 Tenemos un problema, cuando descargamos los crx no vemos donde se almacenan, no sabemos c\u00f3mo ver el contenido. Nos gusta una extensi\u00f3n, queremos traducirla al castellano, queremos mejorarla, aprender de ella para desarrollar otra \u00a0y no sabemos c\u00f3mo ver el contenido, ya que realmente es html y javascript. Sabemos que la ayuda se encuentra\u00a0 en ingles, no todo el mundo lo conoce y es difusa.<\/p>\n
No tengo ni idea de c\u00f3mo empezar.<\/p>\n
Tranquilos, os dir\u00e9 un truco, muy bueno\u2026, espero que google no se enfade \ud83d\ude09<\/p>\n
Vamos por partes. Esto es lo que he descubierto.<\/strong><\/p>\n
Primero sabemos que los crx son archivos zip. Pero no sabemos donde se almacenan ni c\u00f3mo recuperarlos,<\/p>\n
hasta ahora\u2026<\/p>\n
Si intentamos descargarlos con otro navegador alternativo, no podemos, puesto que nos pide google chrome para ello.<\/p>\n
![\"Plugin-ID\"](\"http:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/03\/Plugin-ID.png\")
<\/a><\/p>\nEn la ventana superior, capturado de herramientas-> extensiones, vemos como hemos activado el modo desarrollador, se pueden apreciar los IDs de cada extensi\u00f3n …, acordaos de esto.<\/p>\n
- \n
- Descargamos el plugin que nos interesa aprender, de la galer\u00eda de extensiones de google<\/li>\n
- Vamos a opciones en google crhome, herramientas, extensiones.<\/li>\n
- Activamos la casilla superior, modo de desarrollador.<\/li>\n
- Observamos el\u00a0 Id que aparece en la extensi\u00f3n a mejorar. Un Hash de 32 bits.<\/li>\n
- Ese ID es la carpeta que vamos a buscar en el disco duro de nuestro ordenador.<\/li>\n
- En funci\u00f3n del sistema operativo se almacena en una ruta u otra, en este caso os dejo la ruta de
\nen Windows 7:
\nC:\\Users\\mi_usuario\\AppData\\Local\\Google\\Chrome\\User Data\\Default\\Extensions\\la_clave_id_larga_generada_que_vemos
\n<\/strong><\/strong>en Windows 8:
\nC:\\Users\\golden\\AppData\\Local\\Google\\Chrome\\User Data\\Default\\Extensions<\/strong><\/li>\n<\/ol>\nRecordar que la unidad puede cambiar, en funci\u00f3n de d\u00f3nde 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.<\/p>\n
- Las Background pages, son scripts completos que nos ayudan a gestionar el estado y coordinar tareas a trav\u00e9s de los componentes de la extensi\u00f3n. Cuando una extensi\u00f3n se vuelve m\u00e1s compleja, puede ser necesario el uso de una background page.<\/span><\/li>\n
![\"extensiones-instaladas\"](\"http:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/03\/extensiones-instaladas.png\")
<\/a><\/p>\n