Aprende cómo crear una extensión para Chrome

Seguramente hayas utilizado como navegador al popular Chrome. Y también has instalado varias extensiones. Pero, se ha preguntado ¿cómo se crea una extensión para Chrome? Aquí un ejemplo sencillo.

Google ofrece un conjunto de información para quienes deseen desarrollar extensiones para su navegador. Esta información se puede encontrar aquí, pero no siempre es fácil de seguir. Para ello, Adictec te deja una pequeña guía, basada en ella, donde te enseña a crear una simple extensión.

1. Cómo crear una extensión básica

Para este tutorial vamos a crear un simple botón que muestra el texto «Hola Adictec».

Para ello contamos con un archivo de la imagen del icono (adictec.png), el archivo manifest.json (que define toda la extensión de Chrome) y el archivo HTML ( «popup.html») que presentará el mensaje que desee.

manifest.json

Como se indica, el archivo manifest.json tiene la información sobre la extensión, como por ejemplo el nombre de la extensión, la versión, los archivos que se van a cargar, etc.

• name: Nombre de la extensión
• version: Versión de la extensión
• description: Pequeña descripción de la extensión
• browser_action: carga el icono de la extensión a través de parámetros default_icon y también la ventana emergente que se crea en el archivo popup.html
• permissions: Hasta este punto hemos creado los permisos para activeTab – se puede ver aquí otros permisos

popup.html

El archivo popup.html tiene un simple código en html que mostrará la frase «Hola Adictec».

2. Cómo cargar la extensión en Chrome

Después de preparar el código anterior, en el archivo popup.html y manifest.json, junte también, en una sola carpeta el icono icon.png.

Entonces deben ir a escribir barra de direcciones y escribir chrome://extensions/ y activar el modo de desarrollador como se muestra en la figura.

Luego seleccionar «Cargar extensión descomprimida…» e indicar el directorio que contiene su extensión.

Si todo está bien, la extensión se debe cargar como se muestra en la imagen:

Junto a las otras extensiones deberá ser presentada la extensión que hemos creado. Intente pulsar el botón para ver si el texto que definimos aparece.

Si tuviera curiosidad por saber cómo crear una extensión para Chrome, entonces aquí hemos dado los primeros pasos. Ahora si, si usted está interesado en desarrollar algo, empiece a explorar la documentación de Google disponible aquí. Cualquier duda déjala en los comentarios. ¡Y comparta con los demás! 😉