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

{
 "manifest_version":2,
 "name": "Hola Adictec",
 "version":"1.0",
 
 "description": "Primera Extensión para Chrome",
 "browser_action":{
 "default_icon": "adictec.png",
 "default_popup": "popup.html"
 },
 "permissions":[
 "activeTab"
 ] 
}

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

<!doctype html>
<html>
 <head>
 <title>Hola Adictec</title>
 </head>
 <style type="text/css">
 body{
 margin: 5px;
 }
 h1{
 font-size: 15px;
 text-align: center;
 }
 </style>
 </body>
 <h1>Hola Adictec!</h1>
</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! 😉

Aprende cómo crear una extensión para Chrome
4.6 (92.73%) 11 votes