Aprende cómo crear una extensión para Chrome

Total
2
Shares
cómo crear una extensión para Chrome
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.

Crear Extensión básica Chrome
Archivos para crear Extensión básica en Chrome

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.

Modo de desarrollador Chrome
Modo de desarrollador en Chrome

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

Cargar extensión descomprimida Chrome
Cargar extensión descomprimida en Chrome

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

Extensión para Chrome
Extensión para Chrome: Hola Adictec

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.

Extensión creada para ChromeSi 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! 😉

4 comentarios
Deja una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.


Recibe los trucos más ocultos de tecnología 🤫

Aprende trucos como la técnica 'correo+1' para recibir correos en tu misma cuenta principal. ¡Únete ahora y accede a información exclusiva!

¡No hacemos spam! Lee nuestra política de privacidad para obtener más información.


Puede que también te interese