Crear una extensión para Google Chrome (I) | DiazSecurity.com – Blog de Miguel Díaz
9 septiembre, 2010 a las 19:20

Sin duda Google Chrome es un navegador que está teniendo un gran éxito y es que en tan solo dos años ha conseguido colocarse como el tercer navegador mas usado, por delante de navegadores como Opera o Safari.

Si a esto le añadimos que Google está desarrollando un sistema operativo (Chromium OS) para netbooks basado en este navegador creo que hay razones mas que suficientes como para tomarlo en serio y empezar a aprender a programar para el.

El desarrollo de las extensiones es distinto al de competidores como Firefox ya que se programan en HTML5 vitaminado pero no obstante es muy potente.

Las extensiones tienen permiso para almacenar datos en variables HTML5, recibir eventos (nueva pestaña, nueva página cargada, cierran pestaña, etc), inyectar javascript en las páginas, etc. Pero nunca podrán crear nuevas partes en el navegador (barras, nuevos menús, etc.)

Antes de continuar me gustaría aclarar que se van a dar por sabidos que el lector posee ciertos conocimientos en lenguajes de programación y diseño Web como JavaScript y HTML.

El primer paso es crear una carpeta donde incluir todos los archivos de la extensión. Una vez hecho esto empecemos diferenciando las partes que posee una extensión para Google Chrome.

Archivo manifest.json

Este archivo es obligatorio (debe estar codificado en UTF-8) y es el que contiene toda la información básica de nuestra extensión. A continuación ponemos un ejemplo y explicaremos línea a línea su significado


{
	"name": "Nombre de la extensión",
	"version": "1.0",
	"options_page": "opciones.html",
	"background_page": "pagina.html",
	"description": "Mi primera extension",
	"browser_action": {
		"default_icon": "icono.png",
		"popup":"popup.html"
	}
}

La segunda y tercera líneas son obligatorias y define el nombre y versión respectivamente.
La línea 4 es opcional y define el nombre de la página que se usará para modificar las distintas opciones de la extensión. Esta página deberá estar en la misma carpeta que el resto de archivos de la extensión.
En la línea 5 definimos “background_page”, que es una página que cargará de forma oculta cuando se inicie chrome. Es opcional, pero si nuestra extensión va a realizar acciones cada vez que por ejemplo se visite una página debemos añadirla.

En la línea 6 tenemos definida la descripción de nuestra extensión. Opcional.

En la línea 7 definimos el browser action, y en su interior definimos el icono que aparecerá en nuestra extensión y la página que se cargará en modo popup al hacer clic en el icono. Tened en cuenta que esta página carga unicamente al hacer clic en el icono y se cierra al salir de la misma.

OJO: Todos los archivos mencionados en el manifest.json deben estar en la misma carpeta o en una subcarpeta.

Nuestra primera extensión “Hola mundo”
Ahora vamos a hacer una de las probablemente extensiones mas simples que puedan hacerse. Para ello usaremos el siguiente manifest.json


{
	"name": "Nombre de la extensión",
	"version": "1.0",
	"description": "Esta extensión solo muestra Hola mundo al hacer clic en su icono",
	"browser_action": {
		"default_icon": "icono.png",
		"popup":"popup.html"
	}
}

Como vemos solo se ha definido su nombre, descripción y versión, un icono para la extensión y por ultimo una pagina que se mostrará como popup.

Ahora debemos crear una página HTML que contenga el texto que deseemos mostrar, un buen ejemplo sería este:

<html>
<head>
	<title>Titulo del popup</title>
</head>
<body>
	<div style="text-align: center; color: #ff0000">Hola mundo</div>
</body>
</html>

Es simplemente una página que mostrará el texto “Hola mundo” centrado y en color rojo.

Bien, por último nos queda probar nuestra extensión, para ello vamos al menú de chrome>Herramientas>Extensiones, desplegamos “Modo desarrollador”, pulsamos el botón “Cargar extensión descomprimida” y elegimos la carpeta donde hemos guardado nuestros archivos (manifest.json, popup.html e icono.png), recordar que no debe faltar ninguno de los archivos para que la extensión se cargue correctamente.

Si todo ha salido bien aparecerá un nuevo icono en nuestro navegador y al hacer clic aparecerá el archivo popup.html que hemos creado antes.

Y hasta aquí el manual por hoy, en la próxima entrega explicaré como cargar páginas en segundo plano y algunos ejemplos para realizar acciones sobre el navegador cuando ocurren algunos eventos en chrome (abrir una nueva pestaña, cargar una página, refrescar, etc.).

Links de interés:

Acerca de Miguel Díaz

Informático, enamorado de la programación, diseño Web y el deporte.
Categorías: Chrome, Programación. Etiquetas: , , , , , .

11 comentarios en Crear una extensión para Google Chrome (I)

  1. Pingback: Crear una extensión para Google Chrome (II) | Blog de Miguel Díaz

  2. Pingback: Crear una extensión para Google Chrome (III) | Blog de Miguel Díaz

  3. Pingback: Crear una extensión para Google Chrome (IV) – Guardado de opciones y configuración personalizada | Blog de Miguel Díaz

  4.  Anthony Alegria Bernal dice:

    Hola muy interesante tu blog.
    Quisiera crear una simple extension para mostrar en una pequeña ventana la siguiente direccion:
    http://www.ideasclaro.com.pe/enviosms.php
    Esta sirve para mandar mensajes de texto a cewlulares claro solo de Peru.
    Agradeceria que me ayudaras como crear los archivosa necesarios.

    •  Miguel Díaz dice:

      Hola, tal y como digo para seguir el manual es necesario tener unos conocimientos mínimos de programación Web. Dejando claro esto te comento como hacerlo:

      Debes de crear un archivo popup.html en el cual se defina la altura y anchura del body y dentro del mismo colocar un iframe hacia la página Web que quieras.

      Espero que sea de ayuda.

  5. Pingback: Breves « Ubuntu Life

  6.  percy dice:

    tareas del cole

  7.  Kalvin Manson dice:

    Muy interesante amigo, ¿Queria saber si es posible crear una extension que se ejecute cuando no hay acceso a internet, mejor dicho para rremplazar el juego del dinosaurio?.

  8.  APH dice:

    Hola muy buenas , esta muy bueno el blog, aunque un poco de actualización no vendría mal XD. Es de los poco tutoriales que se entienden, no lo dejes porfa.
    Lo digo porque el código ya no funcionaria.
    Faltaría la “versión”:2, y el “default_popup” en el browser_action

  9. Voy a intentarlo. Si me sale bien te digo.

Deja un comentario

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