Proyecto: Como crear una extensión para Chrome

Publicado por Danilo Toro en

Banner proyecto- Crear extensión para chrome

En este post voy a explicar como desarrollar una Extensión para Chrome que sea capaz de traducir palabras seleccionadas del inglés al español utilizando la API de Yandex Translate.

Yandex Translate

Si te interesa ahondar más en el desarrollo de extensiones para Chrome, puedes leer en el sitio oficial de Google.

Nota: Para realizar este proyecto debes tener conocimientos básicos de javascript

Estructura

Para que funcione correctamente nuestra extensión, necesitamos crear mínimo 4 archivos:

  • manifest.json: Este archivo contiene toda la información importante de nuestra extension
  • background.js: Archivo javascript que se encargará de escuchar todos los eventos referentes a nuestra extensión
  • content.js: Este archivo contendrá el código que se injectará a la página donde queremos que funcione nuestra extensión
  • index.html: Archivo html con el diseño del popup de la extensión

Solo el archivo manifest.json, debe ser nombrado de esa forma, el resto de los archivos puedes renombrarlos.

Manifest.json

Manifest.json es el archivo más importante de nuestra extensión. Este archivo contiene tanto la información de nuestra extensión como los permisos que necesesita.

El contenido de este archivo puede ser enorme dependiendo de que tan compleja es nuestra extensión, pero la información básica necesaria es la siguiente:

El valor de manifest_version debe ser 2, ya que es la versión utilizada actualmente. La versión 1 está en desuso. Fuente: manifest version

Para probar nuestra extensión, debemos ir a la siguiente url chrome://extensions y activamos el modo desarrollador. Nos aparecerán 3 nuevos botones, Cargar descomprimida, Empaquetar extensión y actualizar.

Hacemos click en Cargar descomprimida y nos aparecerá una ventana para buscar la carpeta que contiene nuestra extensión. Una vez que demos click en Seleccionar carpeta, se agregará nuestra extensión a nuestro navegador

Extensión para Chrome
Extensión Chrome cargada

Si te fijas en la imagen, en el lado derecho del botón quitar tienes el símbolo de recargar, con ese botón actualizaremos nuestra extensión cada vez que realicemos un cambio mientras desarrollamos.

Content.js

Nuestro archivo content.js será el encargado de interactuar con cada página web que visitemos. Los archivos encargados de realizar esta interacción son llamados Content Scripts. En nuestro proyecto solo necesitaremos de uno, pero puedes crear los que quieras

Cada archivo que creemos debemos registrarlo en nuestro manifest, así que creamos un nuevo campo llamado content_scripts, y escribimos lo siguiente

Los content scripts se agregan en un array como un objeto que contiene dos atributos, “matches” y “js”

  • Maches es un array que contiene las url donde queremos que inyecte nuestro script. En nuestro caso será en todas las url, así que escribimos “<all_urls>”.
  • Js es un array con la ruta de los archivos a inyectar. Yo almacenaré todos mis archivos javascript en una carpeta llamada js. Escribimos “js/content.js”

Ahora nuestra extensión sabe que debe inyectar un script, así que solo nos queda crearlo.

Lo que queremos hacer es que cada vez que se seleccione un texto, este lo reciba la extensión y lo traduzca, así que debemos crear un escuchador que ejecute la función que obtenga el texto seleccionado y lo envíe a la extensión para que la muestre en nuestro popup. El código es el siguiente

Dentro de la función hacemos uso del método getSelection() del objeto windows para obtener el texto seleccionado. Transformamos el objeto a string y usamos el método trim() para eliminar los espacios.

Como la función se ejecutará cada vez que se suelte el botón del mouse, debemos comprobar si existe texto seleccionado, así que usamos un if para validar. Si hay texto seleccionado entonces debemos enviar un mensaje a la extensión. Esto lo hacemos con chrome.runtime.sendMessage() el cual requiere un objeto como parametro, que llamaremos msg y contendrá el texto a traducir.

Background.js

En el código anterior enviamos un mensaje desde la página a la extensión, ahora nos falta la función que reciba ese mensaje, para esto creamos nuestro archivo background.js

Los archivos background a diferencia de los content scripts, no se inyectan en la página que se visita, sino que se ejecutan de fondo en la extensión. Estos archivos tienen la capacidad de escuchar otros eventos que los content scripts no pueden, como por ejemplo, cuando el usuario hace click en la extensión.

Nuevamente, debemos registrar nuestro archivo en el manifest. En este caso, con el campo background, que contiene lo siguiente

background es un objeto con los atributos scripts que es un array con la ruta de nuestro archivo background.js, y persistant que debe ser false.

El campo persistant decide si el background se mantiene cargado todo el tiempo a menos que se deshabilite la extensión. En nuestro caso, con false basta.

Nota: Para saber más acerca de los archivos background y de cuando usar persistant como true, haz click aquí

Lo único que contiene nuestro archivo background es el siguiente escuchador chrome.runtime.onMessage.addListener() que requiere como parámetro una función callback.

Los parámetros del callback son:

  • Request es el mensaje que se envió, nuestro objeto msg creado en el archivo content.js
  • Sender es un objeto con la información de quien envia el mensaje
  • sendResponse es el callback con el cual respondemos el mensaje que llega

Finalmente, creamos una variable llamada text, con el texto recibido

Index.html

Lo ultimo que nos está faltando es crear el popup de la extensión y para eso debemos crear un archivo html.

Los popups se activan cada vez que se hace click en el ícono de una extensión, por lo tanto, en nuestro manifest debemos registrarlo en un campo nuevo llamado browser_action.

El campo browser_action contiene un objeto con la información referente al icono que aparece en la barra del navegador. Esta información es, el archivo que contiene el popup, su título y el ícono

El popup que diseñe para este proyecto es sencillo. Contiene los estilos en el mismo archivo y el código javascript se encuentra en un archivo aparte, alojado en la carpeta js.

Si te fijas, agregamos dos archivos javascript extra popup.js y p5.js. Popup.js es el código javascript que realicé para enviar el texto en inglés a la API de Yandex y muestra el texto traducido, y p5.js es una librería en la que he apoyado para crear los elementos en el popup.

Nota: Usé la librería p5js porque la estuve usando en un proyecto que estoy realizando y quise probarla en la extensión, pero no es indispensable en el proyecto, todo se puede hacer perfectamente con javascript puro

El código del archivo popup.js hace lo siguiente: Primero que hacemos es crear la función setup. Esta función es necesaria para usar la librería p5js, y es la función donde crearemos nuestro código principal. Dentro de esta función invocamos la función noCanvas(), lo que hará que nuestra librería p5js no cree un canvas.

La función getBackgroundPage() del objeto chrome.extension nos permite acceder al código en nuestro archivo background, y nos sirve para obtener la variable con el texto seleccionado.

Si existe texto seleccionado, con la función loadJSON, hacemos una petición GET a la url de la API que realizará la traducción. (Puedes reemplazarlo por el método Fetch). El segundo parámetro de loadJSON es un callback con la respuesta de la petición GET.

Nota: Si quieres obtener más información acerca de la API de Yandex, puedes visitar su sitio web y así puedes tener tu propio token

La primera línea del callback gotData(), obtiene el texto traducido y lo guarda en la variable text, luego crea una etiqueta p que contiene el texto, con la función de p5js createP(). Adicionalmente, creamos un botón para poder copiar el texto traducido con la función createButton().

Al botón “copiar”, le agregamos un escuchador que ejecuta una función que agrega el texto al portapapeles cada vez que se presiona. Esto lo hacemos con el método mousePressed() que requiere una función que llamamos copy().

La función copy() invoca la función que copia el texto. La función la copie de aquí. (Copie la función copy 😂)

Conclusiones

Listo!! Ya tenemos una extensión que traduce del inglés al español.

Si quieres saber con más detalle las funcionalidades de cada archivo que creamos, puedes ver los vídeos de The Coding Train, canal en el que me inspiré para realizar este proyecto. Además de la documentación oficial obviamente 😜

El mundo de las extensiones es enorme, ¡Puedes tener casi una página entera en una extensión! ¿Que tal si nuestro siguiente proyecto sea “Como hacer un bot en una extensión para chrome” que permita enviar mensajes a Telegram o Facebook? En esté blog ya he explicado el 80% de como hacerlo 😉.


2 comentarios

Nicolas · 22 septiembre, 2020 a las 6:14 PM

Excelente!

    Danilo Toro · 24 septiembre, 2020 a las 1:43 PM

    Gracias Nicolas 🙌

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *