Ya esta funcionando de nuevo la generación de URLs cortas y QRs.

Disculpad las molestias.

La entrada L4Y (Link for You) – Funcionando OK✔️ se publicó primero en JavocSoft.

Estamos trabajando en ello y lo tendremos solventado lo antes posible.

Disculpad las molestias. Info al minuto en el canal de X (Twitter).

Un saludo.

La entrada L4Y (Link for You) – Falla la generación de URLs y QRs se publicó primero en JavocSoft.

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:

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 

La entrada Extensiones de Chrome :: Consejos y sensaciones se publicó primero en JavocSoft.

Ya esta funcionando de nuevo la sincronización. También esta funcionando bien el registro, llegando bien el e-mail para activar la cuenta asi como el resto de comunicaciones.

Disculpad las molestias.

La entrada SmartTabSaver :: Sincronización funcionando✔️ se publicó primero en JavocSoft.

Ya esta disponible para Chrome y Edge, y cualquier navegador que soporte las extensiones de Chrome, la nueva extensión que he desarrollado, Basecamp Beautifier.

Su objetivo es ayudar en la gestión de tareas para aquellos equipos o personas que usen la aplicación web de Basecamp . Aunque Basecamp es un software muy completo, adolece de algunas carencias que facilitarían la gestión de tareas a sus usuarios. En este punto, lo que aporta Basecamp Beautifier es:

• Poder usar etiquetas coloridas en los nombres de tus tareas.
• Poder destacar una de estas etiquetas para que en el listado de tareas te indique cuantas de este tipo hay.
• Poder configurar los colores y formato de tus etiquetas de una manera facil, para que Basecamp se acomode a tus necesidades. Tendrás de hasta tres tipos de etiquetas, la normal, la mas pequeña e incluso etiquetas con su texto en cursiva.
• Poder exportar tu configuración de etiquetas, para tener una copia de respaldo asi como poder compartirla con el resto de tu equipo, para que todos puedan importarla y verlo igual.

Futuras funcionalidades 

• Etiquetas Wildcard. Es decir, etiquetas por ejemplo tal que [WF*]. Esto haría que toda etiqueta que comenzara con WF adquiriera la configuración indicada, ahorrando tiempo de configuración y el poder tener rangos de etiquetas.
• Selector de Grupos de Etiquetas pre-configurados en la configuración. Esto permitirá, nada más instalar la extensión, poder tener una serie de conjuntos de etiquetas para usar, agrupadas por objetivo o tipo de equipo: «Desarrollo», «Gestión», «Comercial», «Procesos» u «Operaciones». De esta manera puedes comenzar en seguida a usar la extensión teniendo solo que modificar aquellas que necesites.
• Configuración de etiquetas compartida con el equipo. Esto permitirá que un equipo use la misma configuración de etiquetas de manera automatizada y que esta se sincronice por si cambia.
• Barra de filtros en la vista de lista de tareas. Esto te permitirá poder mostrar solo las tareas con las etiquetas que necesites, quitando todas las demas tareas que no te interesen de la vista de tareas hasta que quites el filtro.

Espero que os sea útil y como siempre, cualquier feedback o sugerencia constructiva es bienvenida

La entrada Basecamp Beautifier :: Nueva extensión se publicó primero en JavocSoft.

Actualmente estamos teniendo problemas con el proceso de sincronización de las sesiones en SmartTabSaver entre dispositivos por un fallo en el servidor. También no esta llegando el e-mail de registro en donde se facilita la activación de la cuenta para poder activar la sincronización entre dispositivos.

Estamos trabajando en ello para tenerlo solucionado lo antes posible.

Disculpad las molestias y gracias por la paciencia.

Un saludo.

La entrada SmartTabSaver :: Fallo de sincronización⚠️ se publicó primero en JavocSoft.