Cyber Monday Sale Save up to 40% off unlimited courses, tutorials and creative assets. Cyber Monday Sale! Save Now
Advertisement
  1. Code
  2. Tools & Tips

Desarrollando Extensiones de Google Chrome

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by David Palacios (you can also view the original English article)

No es un secreto que mi navegador favorito es Google Chrome. Me gusta porque es rápido, confiable, y no se cuelga (muy seguido), y tiene buen aspecto. También hay algo más que yo hallo aún más valioso. Es el hecho de que tú puedes crear una extensión usando solo HTML, CSS, y JavaScript. Yo siempre apoyo tales productos, productos que están abierto a la comunidad, y ocurre que Chrome es uno de esos productos. Si tú necesitas algo, y eso no ha sido implementado todavía, tú eres libre de desarrollarlo tú mismo.

Así que al final de este artículo encontrarás una extensión de Chrome que funciona, la cual usa la mayoría de las técnicas explicadas a continuación. Tú puedes descargar el ejemplo final usando el botón del código fuente de descarga en la parte superior de esta página.


Por Qué Deberías Escribir Tu Propia Extensión

Yo siempre aliento a las personas a usar mejores herramientas para acelerar su flujo de trabajo. El software que nosotros usamos debería ayudarnos, nosotros no deberíamos pelear con él. Desarrollar extensiones/plugins para tu editor o navegador favorito es de ayuda no solo para ti, sino también para otros programadores, quienes tarde o temprano estarán en la misma situación. Si algo falta, puedes crearlo tú mismo y con Chrome esto es realmente fácil. Modelar tu entorno alrededor de tus necesidades es clave para ser altamente productivo.


Desarrollar y Probar Tus Extensiones

Afortunadamente hay una manera de probar tu extensión sin tener que subirla a la tienda web de Chrome. En tu barra de direcciones del navegador, solo escribe:

Asegúrate de que seleccionas el Modo Desarrollador y haz clic en el botón Cargar la extensión descomprimida. Entonces simplemente selecione la carpeta de su disco duro que contiene los archivos de extensión.

extensionspanel

Arquitectura

He aquí un diagrama de la arquitectura para una extensión de Chrome:

architecture

Y ahora vamos a echar un vistazo más cerca de cada elemento dentro de la arquitectura.

Manifiesto

El punto de entrada de tu extensión es el archivo manifest.json. Este debería contener un objeto JSON válido. Por ejemplo:

Las propiedades requeridas son name, version, y manifest_version. La version puede estar en cualquier lugar del uno al cuatro, enteros separados por puntos. Es algo que es usado por el sistema de actualización automática de Google. Así es como este sabe cuando actualizar tu extensión. El valor del manifest_version debería ser el entero 2.

El manifiesto podría contener otras propiedades dependiendo de cual tipo de extensión tú necesitas, pero yo describiré solo aquellos que yo encuentre que son más interesantes.

Páginas De Fondo

Cada extensión tiene una página de fondo invisible la cual es corrida por el navegador. Hay dos tipos - páginas de fondo persistentes y páginas de eventos. La primera está activa, todo el tiempo. La segunda solo está activa cuando es necesario. Google alienta a los desarrolladores a usar páginas de eventos, porque esto ahorra memoria y mejora el rendimiento general del navegador. Sin embargo, es bueno saber que aquí también es donde debes poner tu lógica principal e inicialización. Normalmente la página de fondo/script cumple el papel de puente entre las otras partes de la extensión.

He aquí cómo usted debe describirlo en el manifiesto:

Como has de haber adivinado, si la propiedad persistent es false entonces tú estás usando páginas de eventos. De otro modo, tú estas trabajando con una página de fondo persistente.

Script de contenido

Si tú necesitas acceso al DOM de la página actual, entonces debes usar un script de contenido. El código es corrido dentro del contexto de la actual página web, lo cual significa que será ejecutado con cada actualización. Para agregar tal script, use la siguiente sintaxis.

Ten en mente que el valor de los matches determina para cuales páginas tu script será usado. Leer más sobre patrones de matches aquí.

Interfaz de usuario

Hay varias maneras de crear la UI de tu extensión. Aquí están las cuatro más populares.

Acción del Navegador

La mayoría de los desarrolladores usan la propiedad browser_action para crear sus plugins. Una vez que lo configuras, un icono que representa tu extension será localizado en el lado derecho de la barra de direcciones. Los usuarios pueden luego hacer clic en el icono y abrir una ventana emergente la cual es de hecho contenido HTML controlado por ti.

browseraction

Los archivos manifiesto deberían contener los siguientes datos:

El default_title es una pequeña herramienta informativa la cual es mostrada cuando el usuario pasa el ratón sobre tu icono. El default_popup es de hecho el archivo HTML que es cargado dentro de la ventana emergente. También hay un distintivo el cual puedes ubicar sobre tu icono. Tú puedes hacer eso dentro de tu script de fondo. Por ejemplo:

Este fue el código que yo usé para producir la imagen de arriba.

Page Action

La propiedad page_action es similar a la de browser action, pero el icono es mostrado en la barra de direcciones.

pageaction

Lo interesante aquí es que tu icono se oculta inicialmente, así tú debes decidir cuando mostrarlo. Por ejemplo, en la imagen anterior, el icono RSS será mostrado solo si la página actual contiene un enlace al feed RSS. Si tú necesitas ver tu icono todo el tiempo, es bueno usar directamente browser_action.

Para añadir la page action, escriba el siguiente código dentro de su manifiesto:

A diferencia del icono de browser action, el icono page action de la página no tiene insignias.

DeveloperTools

Yo uso mucho DeveloperTools, y es agradable que Chrome ofrezca un método para añadir nuevas etiquetas a esas herramientas. La primera cosa que debes hacer es añadir una página HTML la cual será cargada cuando el panel se abra.

No hay ninguna necesidad de poner algun HTML dentro de la página, excepto para enlazarla a un archivo JavaScript, el cual creará la etiqueta:

Y entonces incluir el siguiente código dentro del archivo devtools.js:

Ahora el código de arriba asñadirá una nueva etiqueta con el nombre de ElNombreDeTuExtension y una vez tú hagas clic en él el navegador cargará index.html dentro del DeveloperTools.

Omnibox

El omnibox es la palabra clave que es mostrada dentro de la barra de direcciones de Chrome. Por ejemplo, si tú añades la siguiente propiedad dentro de tu manifiesto:

Y luego añade el código de abajo, dentro de tú script de fondo:

Deberías ser capaz de escribir yeah dentro de la barra de direcciones. Entonces deberías ver algo como esto:

omnibox

Presionando el tabulador producirás la siguiente pantalla:

omnibox2

Por supuesto, usando la API chrome.omnibox, tú podrías captar lo introducido por usuario y reaccionar a eso introducido.

APIs

Hay un montón de cosas diferentes que tú podrías hacer en tú extensión. Por ejemplo, puedes lograr acceder a los marcadores o el historial de usuario. Tú puedes mover, crear etiquetas o incluso cambiar el tamaño de la ventana principal. Recomiento grandemente revisar la documentación para tener una mejor idea de como completar estas tareas.

Lo que tú deberías saber es que no todas las APIs están disponibles en cada parte de tu extensión. Por ejemplo, tú script de contenido no puede acceder a chrome.devtools.panels o el script en tu etiqueta DeveloperTools no puede leer la página de DOM. Así que, si te estás preguntando por qué algo no está funcionando, esa sería la razón.

Mensajería

Como mencioné anteriormente, tú no tienes siempre acceso a la API que tú quieres usar. Si ese es el caso, entonces tú deberías usar el paso de message. Hay dos tipos de mensajería - solicitud unica y conexiones de larga duración.

Solicitud Única

Este tipo de comunicación ocurre solo una vez. Es decir, envías un mensaje y esperas por una respuesta. Por ejemplo, tú pudieras ubicar el siguiente código en tu script de fondo.

Luego usa el código de abajo en tu script de contenido:

Y así es como tú puedes obtener información sobre la página actual del DOM y usarla dentro de tu script de fondo, el cual normalmente no da acceso a esta información.

Conexiones de Larga Duración

Usa este tipo de mensajería si necesitas un canal de comunicación persistente. Dentro de tu script de contenido ubica el siguiente código:

Y luego, en el script de fondo, usa este:

Override Pages

Reemplazar páginas es una buena manera de personalizar tu navegador. Tú eres capaz de substituir también algunas de las páginas predeterminadas en Chrome. Por ejemplo, tú puedes crear tu propia página de historial. Para ello, agregue el siguiente fragmento de código:

Los posibles valores de <page to override> son bookmarks, history, y newtab. Es algo genial tener una nueva página new tab.


Una Extensión de Ejemplo

Para concluir este artículo he decidido incluir un ejemplo sencillo, para que así puedas tener un mejor entendimiento de la imagen completa. Esta extensión de ejemplo usa la mayor parte de las cosas que yo he descrito anteriormente para simplemente configurar un color de fondo #F00 para todos los divs de la página actual. Eres libre de descargar el código fuente usando el botón que está en la parte superior de este artículo.

El Archivo del Manifiesto

Por supuesto empecé con el archivo del manifiesto:

Ten en mente que tú puedes organizar tus archivos en carpetas. También presta atención a la propiedad version. Tú deberías actualizar esta propiedad cada vez que quieras subir tu extensión a la tienda web.

Script de Fondo

Las primerísimas líneas obtienen las acciones del usuario de la omnibox. Después de eso, yo configuro un listener para una solicitud única, la cual aceptará el mensaje del icono de acción del navegador.

El siguiente fragmento es una conexión de larga duración con la etiqueta devtools (no es imprescindible usar una conexión de larga duración para esto, lo hice sólo con fines educativos). Usando estos listeners, soy capaz de obtener lo introducido por el usuario y de enviarlo al script de contenido, el cual tiene acceso a los elementos DOM. El punto clave aquí era seleccionar primero la etiqueta que yo quería manipular y luego enviar un mensaje a este. Al final, pongo un distintivo en el icono de las extensiones.

Browser Action

Nosotros empezamos con nuestro achivo popup.html:

Luego creamos el archivo popup.js:

La página emergente contiene un solo botón y una vez que el usuario hace clic en ella, esta envía un mensaje al script de fondo.

DeveloperTools

Para el DeveloperTools, nosotros estamos haciendo casi la misma cosa que hicimos con la página emergente, la única diferencia es que yo usé una conexión de larga duración.

Script de Contenido

El script contenido escucha un mensaje, selecciona todos los divs de la página actual, y cambia su color de fondo. Presta atención al objeto que yo adjunté al listener. En el script de contenido eso es chrome.extension.onMessage.

Personalizando la Página New Tab

La última cosa que esta extensión hace es personalizar la página new tab. Nosotros podemos hacer eso fácilmente con solo apuntar la propiedad newtab al archivo newtab/newtab.html:

Ten en mente que tú no puedes crear una replica de la página new tab predeterminada. La idea de esta característica es añadir una funcionalidad completamente diferente. Esto es lo que dice Google:

No intentes emular la página New Tab predeterminada. Las APIs necesarias para crear una ligeramente modificada versión de la página New Tab predeterminada - con páginas superiores, páginas cerradas recientemente, consejos, un tema de imagen de fondo, y así- no existen todavía. Hasta que ellos lo hagan, estarás mejor tratando de hacer algo completamente diferente.


Depuración

Escribir una extensión para Google Chrome no siempre es una tarea fácil y tú probablemente tendrás algunos problemas. Lo bueno es que tú todavía puedes utilizar la consola para dar salida a sus variables para ayudar con la depuración. Siéntete libre de añadir console.log a tu script de fondo o de contenido. Sin embargo, esto no funcionará en scripts los cuales son corridos en el contexto de las developer tools, en ese caso tú podrías considerar usar el método alert, ya que funciona en todas partes.


Conclusión

En mi opinión, Chrome es uno de los mejores navegadores disponibles. Los desarrolladores de Google hacen que crear extensiones sea relativamente fácil dándonos el poder de crearlos en HTML, CSS y JavaScript.

Sí, hay algunas partes engañosas, pero generalmente somos capaces de producir plugins valiosos. Ten en mente que este artículo no cubre todo lo relacionado al desarrollo de extensiones de Chrome. Hay algunas otras cosas útiles como menús contextuales, páginas de opciones, y notificaciones. Para lo temas que yo no cubrí, por favor referirse a la documentación para información más detallada.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.