Hola,
Llevaba un tiempo pensando en escribir un artículo acerca de como ha sido la experiencia de codificar una 
extensión de Google Chrome, casi desde que empecé con la última que hice, Smart Tab Saver, para compartir lo que ha sido aprender desde 0 con la API de Google Chrome y animaros a hacer una extensión.
Anteriormente 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, hablamos de Chrome, Firefox e incluso Internet Explorer y Safari.
Así que ya que estaba con ganas de aprender algo nuevo, me decidí a ver que tal era trabajar directamente con la API de Google Chrome, para desarrollar una extensión compleja. A modo resumen, la experiencia, si la tuviera que poner en una balanza, ha sido muy buena. Os cuento 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, 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, mayoritariamente 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 más 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, 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 porque os aseguro que os darán ganas de hacer algo, ni que sea para cubrir alguna necesidad propia vuestra. Yo por ejemplo, ahora mismo estoy con otra extensión «tonta» que lo que hace es customizarme una web cuyo estilo no me termina de convencer y le acabo inyectando mi propio CSS.
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 cuidado con esto.
- 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 deberias 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.
- 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 hablaré sobre esto.
- No abuses de las notificaciones, puedes cansar a tus usuarios.
- 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 Chrome, sendMessage y onMessage, a partir de ahí ya podrás ver como lograrlo. Aunque recuerda, simplicidad, la página en segundo plano «background» de tu extensión, si la tiene, siempre puede obtenerse y así llamar directamente a un método en vez de andar lanzando mensajes para todo, mírate getBackgroundPage.
- El storage. Google te permite almacenar información de varias maneras:
- En 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.
- El sincronizado. 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, incluye JQuery en tu extensión para facilitar este trabajo. Si además estos datos son complejos, trabaja siempre 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.
- 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.
- 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, abstrayendo 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 localStorage. 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.
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. 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, y 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 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 metodología de trabajo como Scrum.
Y no puedo evitar insistir en la reutilización del código, todo código que logres abstraer y hacer general y ponerlo en una función en iun fichero .js te permitirá tardar menos en otra futura extensión además de ser más mantenible cada 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.
Si hacéis alguna podéis ponerla en los comentarios 🙂