Cómo hacer una exetensión para Google Chrome parte 1 Introducción

Este post va a ser una simple introducción a las extensiones. Mi conocimiento no es de experto aunque es cierto que ya tengo una extensión publicada, otras en desarrollo e ideas que haré algún día, pero prefiero indicar que este post es solo para quien no tiene ni idea de por donde empezar.

Esta es la Parte 1 donde voy a describir de forma general las extensiones. En la parte 2 quiero hacer una extensión desde cero que avise cuando haya un nuevo post de este blog 🙂

Para empezar, diferencias entre App y Extension

Veamos algunos conceptos porque se puede confundir:

¿Qué es una Chrome App?

Es una aplicación de chrome, las encontramos en la tienda de extesiones de Chrome, aquí.

aplicaciones chrome extensions

Cuando te la instalas estas aparecen en el menú de aplicaciones chrome:

Pantalla_completa_092015_104016_AM

Como se puede ver en la captura algunas apps tienen una flecha y otros no, sin entrar en detalle es porque hay dos tipos de apps: Las que tienen flecha son solo enlaces a una webapp (en una ventana separada) y las otras son más apps autocontenidas pero igualmente webapps.

¿Que es una extensión de Chrome?

Las extensiones de chrome son pequeñas utilidades que se usan mientras navegas… imagina… cualquier cosa, desde guardar la página para más tarde, tomar una captura de pantalla, publicar en tus redes sociales, formatear el código JSON… y cualquier cosa que hayan desarrollado ¡o lo hagas tu mismo!.

Al principio parecía que en el futuro sería posible usar las extensiones de Chrome en Android, pero parece ser que por ahora no lo van a implementar. Esto habría sido interesante.

Captura_de_pantalla_092015_014540_PM

Al igual que las aplicaciones, las extensiones las podemos encontrar en la tienda de extensiones de Google, como verás hay miles (no he llegado a encontrar una estadística) pero siempre hay cosas por inventar/mejorar o simplemente hacer algo a tu medida que te ayude en tu trabajo solo para ti, yo lo hice.

Instalarlas es tan fácil como elegir una en la tienda y pulsar en instalar, la gradísima mayoría (yo diría que el 99%) son gratis. Dependiendo del tipo de extensión se mostrará de una forma u otra, lo normal es que tengas un icono como la captura de arriba, y de esta forma “abres”(ejecutas) la extensión (también pueden tener un proceso en segundo plano).

Explicada la diferencia veamos en las extensiones algo más en detalle.

Extensiones de Chrome

Internamente ¿Qué son las extensiones?, básicamente son pequeñas páginas web con unas características especiales:

  1. Un archivo manifest.json donde se describen las características de la extensión, archivos que contiene, permisos, etc.
  2. Iconos de unos tamaños concretos (si se va a publicar, que no es necesario, hay que hacer unos diseños especiales).
  3. Una página principal en HTML.
  4. Archivo(s) CSS para darle diseños a las web de la extensión.
  5. Archivo(s) Javascript para darle funcionalidad, uno de ellos puede ser un proceso en segundo plano que se definirá en archivo json, otro puede ser un archivo de instalación que solo se ejecuta cuando instalas la extensión.

Definamos por cada característica especial, lo que las hace especiales:

Archivo manifest.json

Un archivo básico, sin entrar en detalles, podría ser:

Archivos HTML

En las páginas HTML no puede ir integrado código javascript, ni en los tags <script> ni por ejemplo, en los atributos “onload”, “onclick”, etc. Todo debe ir en los archivos JS. Si podemos, por ejemplo, llamar a una función JS desde un tag anchor:

[javascript]
&lt;a href=”javascript:pulsa();”&gt;Pulsa aquí&lt;/a&gt;
[/javascript]

Puedes tener tantas páginas html como necesite tu extensión, sin embargo hoy en día se tiende a hacer webapps en una sola página, para no notar recargas entre páginas por ejemplo.

Las WebApps en una sola página se las conoce como SPA: Single Page Application (aplicaciones de una sola página)

Archivos CSS

No son imprescindibles, siempre puedes integrarla en el tag head dentro del tag style, no es lo más elegante, pero hay que tener en cuenta que son mini páginas y no van a tener unos diseños muy complejos por lo que los estilos serán más minimalistas, si que son más importantes por ejemplo si usas varios html para no tener que replicar los estilos en cada página.

También podemos integrar algún diseño bootstrap pero… hay que tener en cuenta el peso.

Archivos Javascript

Realmente aquí es donde estará el grueso de la extensión pues es donde residirá toda la lógica, todo lo demás es descripción y diseño.

En principio no hay restricciones… una característica bastante potente pues se podrían integrar gestores de Base de datos como TaffyDB (me encanta), librerías como jQuery (para quien las use… yo no), etcétera.

Ya he instalado/creado muchas extensiones y quiero hacer una limpieza, donde las encuentro en chrome.

Administración de extensiones

La forma más rápida es pulsando con el botón derecho sobre el propio icono de la extensión y en el menú que parece pulsar en Administrar extensiones. Que tenga icono es lo más habitual pero como he dicho antes podría no tenerlo. Se pueden administrar las extensiones pulsando en el menú de chrome (las tres barras horizontales debajo de la X para cerrar la ventana en windows), en el menú que se abre pulsar en Configuración. En el menú de la izquierda pulsar en extensiones.

Y es en este apartado donde puedes probar las extensiones que crees sin tener que subirla a la tienda.

Cargar una extensión propia

En la administración de extensiones hay un checkbox para “modo desarrollador” debes tenerlo marcado, así aparecen 3 botones:Captura_sin_título_092215_061410_PM

  • Cargar extensión descomprimida sirve para integrar tu extensión en tu Chrome.
  • Empaquetar extensión sirve para generar un archivo para poder subir la extensión a la tienda.
  • Actualizar extensiones es bastante descriptivo 🙂

Una vez cargada ¿como puedo testearla y ver los fallos internos?

Es fácil, al ser una extensión propia, cuando pulsas con el botón derecho sobre su icono, en el menú aparece la opción de “Inspeccionar popup”, lo que produce que aparezca el mismo panel de inspeccionar del chrome para webs, pero en este caso solo para la extensión, una maravilla.

Conclusión

Cuando descubrí el desarrollo de extesiones, la potencia que tienen y las de posibilidades me pareció un campo interesantísimo para explorar y de hecho siempre me van surgiendo ideas incluso que no quiero ni publicar, sino que simplemente me ayudan en mi trabajo.

También es interesante hacer extensiones de servicios de terceros, como quiero hacer en la segunda parte: crear una extensión que avise cuando haya nuevos posts. Espero tenerla en una semana o dos.

Comparte!