Desarrolla tu primera extensión para Chrome

En este artículo explicaré como desarrollar tu primera extensión para Chrome.

Al principio, pretendía solo mostrar el famoso “Hola Mundo”, pero opté por ahondar un poco en la API que nos ofrece Google.

Descarga el código [ZIP]

Descarga la extensión [CRX]

El artículo será explicado de una manera detallada y asume que tienes un conocimiento previo de HTML, CSS y Javascript. Usaremos también algunas funciones de DOM para la manipulación de las páginas.

¿Que vamos a hacer?

Vamos a crear una extensión, la cual despliegue un popup con los nombres de las pestañas que tenemos abiertas. Aparte del nombre, tambien nos va a desplegar el favicon de la página y resaltará la que tengamos abierta.

Para hacerlo un poco más completo, también vamos a imprimir la cantidad de pestañas que tenemos abiertas.

Una vez terminada, se verá así:

Generalidades básicas de las extensiones en Chrome.

-Las extensiones son básicamente páginas web. A estas les puedes agregar hojas de estilo, imágenes y sobre todo Javascript. Javascript es lo que le dará la funcionalidad a la extensión.

-La API de Google nos permite tener una interacción con las páginas, los favoritos, las tabs, el historial y otros componentes más.

-Todas las extensiones requieren de un archivo llamado “manifest.json”, el cual define las características mas importantes de la extensión.

Agrega tus propias extensiones con el modo desarrollador de Chrome.

Google se ha caracterizado por brindar herramientas muy potentes a los desarrolladores. Su proyecto Chrome es un ejemplo de esa afirmación.

Si alguna vez has usado las herramientas de Chrome para analizar tus páginas, sabrás que no estoy lejos de la realidad. Basta con hacer click derecho sobre algún componente y seleccionar Inspect element.

Ahora, para agregar tus propias extensiones, abre el Menú de Herramientas o Tools y selecciona Extensions. Te mostrará las extensiones que tienes instaladas y del lado superior derecho encontrarás la opción para ampliar el modo Desarrollador.

Hacemos click sobre el botón que dice “Load unpacked extension” y seleccionamos nuestra carpeta que incluye los archivos. Una vez con esto y si todo está bien, veremos algo como así:

Esto quiere decir que ya tenemos agregada la extensión a Chrome.

Creando lo más básico.

Lo primero que tenemos que hacer, es crear el archivo que llamaremos “manifest.json”. En él, vamos a definir lo siguiente:

-El nombre de nuestra extensión, en nuestro caso lo llamaremos “Tabs Manager”.
-La versión de nuestra extensión.
-La descripción de la misma.
-La manera en la que desplegaremos nuestra extensión y también que página html vamos a desplegar. (Ver aquí para más detalles.)
-El icono que queremos que tenga nuestra extensión.
-Por último también le diremos con que elementos vamos a interactuar. En nuestro caso usaremos las “Tabs”.

Nuestro archivo “manifest.json” nos quedaría así:

{
"name": "Tabs Manager",
 "version": "1.0",
 "description": "Primera extensión en Chrome creado por www.arathvelazquez.com",
 "browser_action": {
		     "default_icon": "icon.png",
		     "popup": "tabs.html"
		   },
 "permissions": ["tabs"]
}

Con esto, ya podriamos agregar nuestra extensión a Chrome, aunque nos marcaría que no encuentra la página por que hace falta nuestro archivo “tabs.html”.

El XHTML

Crearemos nuestro archivo XHTML que llamaremos “tabs.html”, el cual es simplemente una página web que definimos como XHTML y donde incluimos el archivo de JavaScript, así como la hoja de estilo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
<head>
<title>Tabs</title>
<style type="text/css"> @import 'style.css'; </style>
<script src="script.js"></script>
</head>
<body>
</body>
</html>

Nuestro archivo JavaScript.

Lo siguiente, es lo más importante de la extensión, ya que en este archivo tendremos toda la funcionalidad. El archivo lo llamaremos “script.js”

Todos los bloques de código están comentados, y se explican por si solos. Aún así, voy a hacer algunas observaciones.

Empezamos por crear dos funciones. Estas las usaremos más adelante para crear nuevos elementos de manera dinámica en nuestro HTML.

Lo que hacen estas funciones es crear el div contenedor y la lista desordenada. Para eso, usamos las utilidades de DOM.

//Variables generales.
var popup;
var ul;
var li;
 
//Esta función crea la div principal y la agregamos a la página.
function creaContent() {
  	popup = document.createElement("div"); //Creamos el elemento div.
  	popup.id = "content";		       //Le damos nombre al id <div id="content">.
  	popup.style.cssText = "width: 100%;";  //Que abarque todo el ancho de la página.
  	document.body.appendChild(popup);      //Lo agregamos al body -DOM-.
}
 
//Con esta función vamos a crear una lista y la agregamos a nuestro div anterior.
function creaUls() {					 	
  	if (ul) popup.removeChild(ul);	       //Si ya existe ul, lo removemos.
  	ul = document.createElement("ul");     //Creamos el elemento ul.
  	popup.appendChild(ul);		       //Lo agregamos a div llamado popup. -DOM-
}

Vamos a necesitar también, una función que acorte los títulos de las pestañas.

//Truncamos el titulo de la página para obtener solo 30 caracteres.
function truncate(cad) {
	var length = 30;
	var cad2Truncate = cad;
	var truncatedCad = cad2Truncate.substring(0,length);
	return truncatedCad;
}

Creamos una función para llenar los elementos de la lista. En esta función lo que hacemos, es recibir el numero de pestañas que tenemos abiertas en nuestro navegador y también recibimos la variable que tendrá la información de las pestañas.

Con esta información, podemos empezar a crear los elementos li de nuestra lista.

//Creamos los elementos de la lista con el nombre y el favicon.
function creaElementos(numTabs, tabName)
{
	var i;					//Contador para las tabs.	
	var favicon;				//Para almacenar el favicon.
	var title;				//Para almacenar el titulo.
 
	creaUls();				//Creamos el elemento de lista desordenada.
 
	for (i=0;i<=numTabs;i++)		//Recorremos todas las tabs de la ventana.
	{
		li = document.createElement("li");  //Creamos los items para la lista.
		li.id = tabName[i].id;		    //Le asignamos como id, el mismo id de la tab.
 
		if (tabName[i].selected) 	    //Si la tab es la seleccionada, le damos otro estilo.
		{
			li.className = "selected";
		}
 
		favicon = document.createElement("img");  //Creamos un elemento de imagen.
		favicon.style.cssText = "width:16px; height:16px;";//Le damos las dimensiones con CSS.
		favicon.src = tabName[i].favIconUrl || "vacio.png";//El src será el favicon o en su caso una imagen en blanco.
 
		title = document.createElement("span");	//Creamos un span para darle formato al titulo
		title.className = "titulo";			//La clase para el CSS
		title.textContent = truncate(tabName[i].title);	//Agregamos el titulo de 30 caracteres a nuestro elemento span.
 
		//Aquí vamos a agregar los elementos creados dinamicamente a nuestra página usando -DOM-
		//En la "impresión" de HTML, lo que veremos será algo así:
		//<li style="width:16px; heigth: 16px;" src="la_ruta_del_favicon">
		//<span class="titulo">El_titulo_del_tab(Truncado a 30 caracteres)</span></li>
 
		li.appendChild(favicon);	//Agregamos el favicon a nuestro item de la lista.								
		li.appendChild(title);	        //Agregamos el titulo a nuestro item de la lista.
		ul.appendChild(li);		//Ahora, agregamos el item y su formato a la lista completa.
	}
}

Lo siguiente es hacer uso de la API que nos brinda Google para las extensiones. Lo que vamos a hacer con ello, es utilizar un EventListener que está a la espera de algún evento, y en este caso, hará que la función entre en juego al momento de cargar la extensión.

Utilizamos la API para las tabs o pestañas de la siguiente manera:

chrome.tabs.getAllInWindow(null, function( tabs) {...});
//Donde function(tabs), le dará a tabs la información como un vector.
//Google lo expone así:
//El parametro para el callback, debe de especificar una función similar a esta:
//function(array of Tab tabs) {...});

También les habia comentado al principio, que vamos a imprimir el número de tabs en el ícono de la extensión. Para eso usamos lo siguiente:

chrome.browserAction.setBadgeText({text: num_tabs});
//Donde el num_tabs es una cadena con el numero de tabs.

El código de la implementación sería así:

 
//Esta parte es la mas importante.
//Creamos un evento para que al momento de cargar la página se ejecuten nuestras funciones.
//Si no tuvieras este Event Listener, tendrias que mandar llamar la función directamente desde tu HTML.
window.addEventListener("load", function() { 	 //Se ejecuta al momento de cargar la página ('load').
  //En esta parte, es necesario aclarar que al parámetro llamado "tabs", le daremos toda la informacion de las pestañas.
  //Observa que la parte de function(tabs) es el callback del método y en este se realizan las operaciones.
  chrome.tabs.getAllInWindow(null, function(tabs) { //Obtenemos información de todas las tabs abiertas...
	var num_tabs = tabs.length;	    //Aquí obtenemos el numero de tabs.
	num_tabs = num_tabs.toString();	    //Convertimos el numero a string.
 
	//Este método, nos permite modificar algunas partes del icono de la extensión.
	chrome.browserAction.setBadgeText({text: num_tabs});//Imprimimos en el icono, el numero de tabs abiertas.
 
	//Ya con toda la información necesaria, solo nos queda crear los elementos principales.
	creaContent();			//Creamos dinámicamente el div llamado content.
	creaElementos(num_tabs,tabs);	//Creamos los elementos como ul, li y los valores finales.
  });
}, false);

Estiliza la extensión.

Por último, le daremos el estilo a nuestra extensión de la siguiente forma:

body 		{width:230px; font-family:Verdana;font-size:11px; margin:0px; padding:0px; color:black;}
#content 	{margin:0px;padding:0px;}
ul 		{margin:0px; padding:0px; list-style: none;}
li 		{margin:0px; padding:4px 2px 0px 4px; height:20px; -webkit-border-radius:5px;}
img 		{vertical-align:middle;}
.titulo 	{margin:5px 0px 0px 6px; vertical-align:middle;}
.selected 	{background-color:#FF9933;}

Listo! Ya has creado tu primera extensión para Google Chrome.

¿Que faltaría hacer?

Después de desarrollar esta extensión, podrás utilizar la API y hacer, por ejemplo:
-Que al momento de presionar sobre el título, abra la pestaña seleccionada.
-Agregar un botón para cerrar cualquier pestaña desde la extensión.
-Realizar una búsqueda entre los titulos de las pestañas abiertas.

Espero que les sirva esta guía/artículo para conocer un poco más las extensiones de Chrome, así como el uso básico de las API’s que ofrece Google.

Si tienes algún comentario, no dudes en hacérnoslo saber.

July 10 del 2010 | Desarrollo, Desde Cero, Extensiones, Freelancing, Google Chome, Proyectos, Sitios Web

Puedes dejar un comentario, o enlazar el post desde tu propia página.

Arath Velazquez