Extensiones de Chrome :: Consejos y sensaciones

Llevo ya un tiempo desarrollando extensiones y pensé en reeditar esta entrada, relacionada con el desarrollo de extensiones de Chrome, para actualizarla y aprovechar, dado que ahora esta la versión 3 de Manifest, obligatoria de Google. También quería hacerlo para hablar con más propiedad de lo que es la experiencia de codificar una extensión de Google Chrome. Actualmente llevo, a nivel personal, dos extensiones publicadas, sobre diferentes cosas, una sobre pestañas de navegador https://smarttabsaver.com y la otra, reciente, para complementar funcionalidades llamada Basecamp Beautifier. A nivel laboral, también llevo una extensión un tanto compleja llamada El Genio del Ahorro, con mas de 30k usuarios.

A fecha en que escribo esto, también estoy acabando una nueva extensión, relacionada con el mundo de las alergias alimentarias, que conoceréis pronto, para tratar de ayudar a las personas que padecen alguna alergia de este tipo, esta tendrá también página web, porque cuadra que este disponible vía web también. Y en mente además, mas adelante, tengo otra que haré de una temática completamente diferente y divertida 🙂

Asi que por todo esto, me gustaría compartir lo que ha sido aprender desde 0 y desarrollar con la API de Google Chrome y así animaros a hacer una extensión, bien para vosotros mismos o para cubrir alguna necesidad que encontréis u os gustaría tratar.

Anteriormente a usar la API de Chrome, ya había hecho alguna otra, pero usando frameworks multi-navegador, como Crossrider, extinto tras los problemas que empezó a dar con los diferentes navegadores. La ventaja que tenía usar este tipo de frameworks era evidente, no tenías que andar codificando para los principales navegadores, algo deseable si querías que tu extensión llegase a la mayor parte del público, entre los principales navegadores web, Chrome, Firefox e incluso Internet Explorer y Safari sin tener que codificar tu extensión para cada uno.

Hoy día sin embargo, las extensiones de Chrome son totalmente funcionales con el navegador Edge de Microsoft, ya que por debajo Edge, usa el motor Chromium. Llevándose Chrome actualmente casi la totalidad de la cuota de mercado entre los navegadores asi que de base, ya accedes al 77% de los usuarios a nivel global, como se puede ver en la tabla:

Google Chrome	77.03%
Safari	8.87%
Mozilla Firefox	7.69%
Microsoft Edge	5.83%
Internet Explorer	2.15%
Opera	2.43%
QQ	1.98%
Sogou Explorer	1.76%
Yandex	0.91%
Brave	0.05%

Asi que desarrollar una extensión para Chrome te asegura un público potencial de mas del 82%, algo que esta muy bien. Y si funciona bien tu extensión, siempre podrías migrarla a Firefox o Safari.

A modo resumen, antes de entrar en detalles, la experiencia al programar una extensión con la Chrome API, si la tuviera que poner en una balanza, es muy buena. Os cuento, ahora si, más en detalle 🙂

Antes de empezar

Lo primero que todo programador desea cuando empieza a trabajar con algo nuevo es que se tenga una buena documentación, si bien no es perfecta, Google ha hecho un buen trabajo en este punto y junto con una documentación práctica y accesible, dispone de suficientes ejemplos, descargables, de extensiones como para poder tener una idea de funcionamiento de cada cosa que se puede llegar a hacer con Google Chrome a través de una extensión.

Lo segundo es la depuración del código, para ver como funciona todo y arreglar lo que falla cuando algo no se comporta como uno espera. Este punto también es sencillo, basta con usar las propias herramientas de desarrollo de Google Chrome, la consabida tecla F12, esto junto con la función “console.log()” de Javascript para pintar en consola. Esto ha sido suficiente para salir de todos los atolladeros con los que me ido encontrando.

Lo tercero es la curva de aprendizaje. En este caso, para hacer extensiones se usa la misma tecnología que el frontend de cualquier web, es decir: HTML, CSS y Javascript, por lo que la curva se reduce considerablemente. Esto hace que ya de buenas a primeras puedas empezar con lo que ya sabes. Y si a esto le sumas las posibilidades que te da la API de chrome, que permite interactuar con el navegador para cualquier cosa que se te ocurra, pues la verdad es que aunque hay veces en que las cosas se complican, mayormente vas superando cada bache de una manera más o menos rápida, resultando una experiencia gratificante.

Posibilidades de la API de Chrome

Sin entrar en muchos detalles, ya que ya hay muchos tutoriales de como programar extensiones de Crome, la verdad es que puedes hacer casi cualquier cosa con la API de Chrome de Google. Me ha gustado mucho la de cosas que se pueden hacer, dan ganas de pensar en algo para poderlo llevar a cabo, dada su facilidad de uso.

Entre las cosas que se pueden hacer, algunas, a modo de ejemplo:

Inyectar código en las páginas que visita el usuario.
Manejo de las pestañas y ventanas.
Notificaciones.
Obtener datos de navegación: URLs, marcadores, historial, etc.
Sincronización de datos entre instalaciones.

Os aconsejo echar un ojo a la API, de verdad, porque os aseguro que os darán ganas de hacer algo, como a mi, ni que sea para cubrir alguna necesidad propia vuestra.

Bri-Consejos

Siempre hay cosas que vas viendo a medida que vas desarrollando. Cosas que te gustan y cosas que no, pero en este caso, me gustaría también aportar algo de ayuda a través de unos pequeños consejos, por si decidís poneros con el desarrollo de una extensión.

A tener en cuenta que:

Si desinstalas una extensión, se elimina el contenido sincronizado. Así que tenedlo en cuenta.
Eventos de la extensión. El evento de desinstalación de una extensión, Google nos permite realizar alguna acción cuando una extensión se instala, se desinstala, hay una actualización disponible, etc, no permite acceder a los datos de la extensión, tan solo permite indicar una URL sencilla. Mírate la API runtime de Chrome para saber más, es algo que deberías hacer nada más empezar.
Si necesitas procesos que corran cada cierto tiempo, usa la API de Chrome, alarms. No te vuelvas loco reinventando la rueda ni uses mecanismos «artesanales» que puede que Google más adelante no permita, usa siempre que puedas mecanismos presentes en la API de Chrome.
Trata de internacionalizar tu extensión, nunca se sabe quien puede llegar a usarla, es un esfuerzo inicial pero merece la pena. Como nota, recuerda las restricciones de la política de seguridad de Chrome, no podrás indicar los textos i18n directamente en el HTML, tendrás que insertarlo mediante Javascript, declara <spans> por ejemplo y asigna su contenido a los textos que necesites.
Échale un ojo a la API debugger de Chrome.
Integra Analytics en tu extensión, te ayudará a saber que funciona en la extensión y que no. En otro post más adelante hablaré sobre esto si quereis.
No abuses de las notificaciones, puedes cansar a tus usuarios y esto no le gusta a Google, además puede generar comentarios negativos en tu pagina del store.
Si necesitas comunicarte con otras partes de tu extensión, puedes lanzar mensajes que tu extensión podrá escuchar para reaccionar, mírate por ejemplo de la API de Runtime, ahí tienes los métodos sendMessage y onMessage, a partir de ahí ya podrás ver como lograrlo.
La página en segundo plano, que siempre estaba corriendo, ya no es así en la versión 3 de Manifest, ahora es un service worker, por lo que esta página arranca cuando se necesita y se para, asi que no podrás guardar en ella variables globales. El metodo «getBackgroundPage()» ya no funciona debido a ello.
Para almacenar los datos que necesites, usa la API de storage. Ten en cuenta que si los datos con los que trabajarás son complejos, te conviene siempre trabajar con estructuras de datos, objetos, para poder transformarlos a JSON y de ahí a String mediante Javascript y viceversa. De esta manera podrás manejar tus datos de manera más sencilla y organizada y podrás guardar el string JSON de tus datos. Google te permite almacenar información de varias maneras:
- De manera local. Es el ideal, tienes un máximo de 5,242,880 bytes pero si necesitas mucho espacio, añade el permiso “unlimitedStorage” a tu fichero de configuración de la extensión “manifest.json” para disponer de especio local ilimitado.
- De manera sincronizada. Es muy limitado, 102,400 bytes, casi nada. No esperes poder guardar mucha información en el. Úsalo solo para guardar datos sencillos, no muy complejos, por ejemplo configuración. Si necesitas almacenar mucha información, te aconsejo que te crees tu propio servidor donde alojar los datos, con llamadas vía AJAX usando fetch, en la version 3 del Manifest ya no se soportan las llamadas XmlHttpRequest. Si consideras que podrías sacar provecho a la librería de jQuery, impórtala a tu proyecto, asi tambien podrás realizar llamadas AJAX con esta librería.
Cuando realices operaciones con la API de Chrome en iteradores, ten en cuenta que todo resultado de cualquier operación con la API de Chrome se trata con callbacks, no trates de que cada callback se resuelva en el mismo orden que la llamada al método que lo genera en el iterador, mejor recopila los datos y lanza una sola llamada que trate con los datos, si es el caso. También podrías usar Promises en vez de callbacks.
Cuando lo que tengas que hacer, bien sea en un iterador o en el callback de una llamada a la API de Chrome, sea complejo, evita problemas y comportamientos extraños, haciendo el ejercicio de abstraer ese código en una función para llamar a dicha función. Es buena práctica en general la abstracción del código para un mejor mantenimiento y futura reusabilidad también.
Usa solo los permisos que necesites, una extensión que usa demasiados permisos puede llegar a resultar sospechosa si no se explica en ningún lado. Si necesitas aún así muchos permisos, trata de explicar porque en la descripción de la extensión en la Chrome Web Store.
El javascript se ejecuta en otro contexto, diferente al de las páginas en las que estemos. Por ello, no podrás acceder a las variables o funciones de las páginas, aunque sí al storage que te proporciona la API de Chrome o los datos en tu servidor propio si usas uno. Es por esto que no importa por ejemplo que inyectemos jQuery en tu extensión, no afectará a las páginas que veamos o con las que interactuemos.
Si tu extensión requiere de una interfaz compleja, trata de usar estándares o frameworks que te faciliten el trabajo. Un buen combo por ejemplo es Bootstrap + jQuery.
Trata de capturar posibles errores revisando en la API de Chrome el valor que tenga runtime.lastError tras cada llamada a la API. Si no lo haces acabarás con comportamientos extraños y errores en ocasiones difíciles de seguirles la traza cuando la extensión se complica. Por ello, de lo primero que tendrías que hacerte es una función de logging personalizada, pudiendo hacer que solo se pinte log si estas en modo developer.

Ya como último consejo, organízate, cuando empieces:

No te pongas a programar directamente, piensa bien lo que quieres.
Revisa la documentación de la API de Chrome para saber que necesitas usar.
Cuando planifiques que has de hacer, haz lo siguiente:
- Divide lo que quieres en “hitos”, ve de lo mas sencillo a lo más complejo, sobretodo cuando empiezas con algo nuevo, será más fácil así ver que falla y poderlo evolucionar.
- Divide los hitos en «historias«, cosas que deseas lograr.
- Divide las «historias» en tareas, pasos a dar o necesidades para lograr cada historia.

De esta manera, no te abrumará el trabajo y podrás calcular que te llevará mas o menos y asi poder elegir aquello con lo que te apetece avanzar cada vez. Esto hace que seas más feliz cuando programas. Puedes echar un ojo a alguna herramienta de planificación de tareas como Trello.

Y ya para terminar, siempre que codifiques, piensa en reutilizar, en ir montándote tu librería, en este caso de JS, todo código que logres abstraer será un código que no tendrás que escribir más adelante en otra futura extensión. Limpieza, mantenibilidad y reutilización han de ser tus dogmas 🙂

Y ya esta, no te hace falta saber mucho más para ponerte con una extensión, tan solo ganas de aprender y voluntad. ¡Anímate a hacer tu propia extensión!

Si hacéis alguna podéis ponerla en los comentarios