Crear una extensión para Google Chrome (II) – Funcionamiento en segundo plano y gestión de eventos. | DiazSecurity.com – Blog de Miguel Díaz
4 abril, 2011 a las 23:11

En una entrada anterior hicimos una pequeña introducción a las extensiones de Google Chrome.

Aprendimos que sus extensiones son básicamente páginas Web vitaminadas que se encuentran en segundo plano y/o se ejecutan al hacer clic en el icono de la extensión. Hoy iremos un paso mas y veremos como capturar eventos e información del propio navegador.

Haremos dos ejemplos sencillos, en uno se mostrará una ventana de alerta cada vez que el usuario abra una pestaña en el navegador y en el segundo ejemplo haremos que la extensión cierre la pestaña si se visita google.es.

Como en la entrada anterior, se da por hecho que el lector tiene conocimientos medios de JavaScript y HTML.

Un primer cambio en esta extensión es que no usaremos la opción “popup” del manifest ya que no vamos a mostrar ningún PopUp al hacer clic en el icono, no obstante usaremos la opción “background_page” la cual nos permite definir un script que entra en funcionamiento en el momento que el navegador se abre, dicho script será el encargado de capturar los eventos del navegador.

Así pues nuestro manifest.json quedará así


{
	"name": "Nombre de la extensión",
	"version": "2.0",
	"background_page": "background.html",
	"description": "Mi segunda extension",
	"browser_action": {
		"default_icon": "icono.png"
	}
}

Como vemos es casi igual que la otra vez, pero con la salvedad de no definir un popup ni una página de opciones.
Ahora iremos a lo que realmente hace la magia, capturar los eventos del navegador chrome y realizar alguna acción cuando se cumpla uno de ellos, esto se realizará en la página “background.html” que es la que hemos dicho que va a ejecutarse en segundo plano. Esta página no se verá nunca, pero si puede realizar acciones como cerrar o abrir pestañas, ejecutar códigos en JavaScript (alert(), etc..).

Primer ejemplo: Mostrando una advertencia cada vez que se abre una pestaña..

Mostrando una advertencia cuando se carga la extensión o se abre el navegador.

Como hemos dicho antes, el fichero background.html se ejecuta nada mas cargar la extensión en el navegador de forma oculta, por tanto se ejecutará todo el código HTML nada mas iniciarlo o cargar la extensión.
Por tanto, para mostrar una advertencia al cargar la extensión simplemente deberemos introducir el código JavaScript necesario. Un simple alert es suficiente

<script type="text/javascript">alert('Se ha cargado la extensión');</script>

Y listo, ahora cargamos nuestra extensión tal y como aprendimos en el primer tomo y cada vez que abramos nuestro navegador o carguemos la extensión aparecerá el mensaje “Se ha cargado la extensión”.

Pasemos a algo un poquito mas complicado, capturar eventos del navegador.

Mostrando una advertencia cada vez que se abre una pestaña

Chrome es muy astuto y las extensiones solo podrán capturar los eventos para los que haya pedido permiso. Los permisos se piden en el propio manifest.json, en nuestro caso pediremos permisos para aquellos eventos relacionados con las pestañas (al abrirse, al cerrarse, actualizarse, etc.) Añadiendo lo siguiente a nuestro manifest

	"permissions": [
		"tabs"
	]

Deberemos así tener encuentra este punto para crear nuestras extensiones por que en caso contrario nos será imposible capturar los eventos. De esta forma ha quedado nuestro manifest:

{
    "name": "Nombre de la extension",
    "version": "1.0",
    "background_page": "background.html",
    "description": "Mi primera extension",
    "browser_action": {
        "default_icon": "icono.png"
    },
	"permissions": [
		"tabs"
	]
}

Como hemos dicho el fichero background.html se carga al abrir el navegador y se ejecuta, no se vuelve a ejecutar hasta que no se cierra la aplicación y se vuelve a ejecutar, por tanto ¿Como hacemos para que se ejecuten ciertas acciones cuando nos interesa en lugar de ejecutarlas al inicio?

Pues muy fácil, poniendo nuestra extensión a la escucha, haciendo que espere a que se produzca alguna de las acciones para ejecutar una determinada función mediante eventos. Dentro de la clase chrome.tabs, tenemos multitud de eventos, entre los mas usados encontramos: onCreated, onUpdated y onRemoved, nombres que claramente nos dicen de que se tratan, al crear una pestaña, al actualizarla o al cerrarla. Una vez visto esto pasamos a ver el código del que se compondrá nuestro background.html

<script>
 chrome.tabs.onCreated.addListener(function(tab) {
		alert('Has abierto una nueva pestaña');
 });
</script>

En la primera linea establecemos que se ponga a la escucha cuando una pestaña es creada, el parametro ‘tab’ devuelve información acerca de la tabla como su ID (tab.id), titulo (tab.tittle) o URL (tab.url). Y el alert, es la advertencia que se mostrará al abrir una nueva pestaña, este código lo podemos cambiar por el que nosotros queramos.

Por ejemplo, en este caso se mostrará la URL de la nueva pestaña

<script>
 chrome.tabs.onCreated.addListener(function(tab) {
		alert('La URL de la nueva pestaña es: ' + tab.url);
 });
</script>

¿Fácil verdad? Ahora vamos un pasito mas ejecutaremos acciones en el propio navegador, concretamente cerraremos una pestaña

Enlaces utiles:

Cerrar una pestaña cuando se visite una determinada página

Bien, en nuestro caso no nos hará falta editar el archivo manifest.json mas ya que tenemos permisos sobre las acciones en las tablas, así que iremos directamente a nuestro archivo background, en el cual en este caso pondremos a la escucha el evento onUpdated (chrome.tabs.onUpdated.addListener(function(integer tabId, object changeInfo, Tab tab) {…});) que se ejecutará cada vez que una página sea cargada o actualizada.

Como vemos en este caso el evento nos da varios valores (tabId, changeInfo y tab), los describimos a continuación.

  • tabId: Es el identificador de la pestaña que se ha actualizado.
  • changeInfo: Es un objeto con diferente información de la pestaña.
    • status: cadena que contiene el estado de la pestaña “loading” o “complete”.
    • url: cadena que contiene la dirección de la pestaña.
    • pinned: boleana que nos dice si la página se está mostrando o no.
  • tab: Información variada sobre la pestaña entre ellos los que mas nos interesan
    • url: Contiene la dirección Web de la pestaña
    • id: Contiene el identificador de la pestaña

Una vez aclarado pasemos a realizar una extensión que simplemente nos muestre un advertencia cuando se visite google.es.

<script>
 chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
	if(tab.url.indexOf("google.es") != -1){
		alert('Estas visitando Google');
	}
 });
</script>

Si sabéis javascript, lo cual se da por echo si estáis leyendo el manual no veréis ninguna dificultad, simplemente se pone a la escucha el evento y cada vez que hay un cambio en la página se comprueba si la URL contiene google.es y en ese caso lanza el alert().

Si lo que queremos es que se cierre la pestaña deberemos usar la funcion chrome.tabs.remove(tabID), donde tabID sería el identificador de la tabla a cerrar, lo podemos sacar de tabID que nos devuelve el evento. En este caso el background.html se quedaría de esta forma:

<script>
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
	if(tab.url.indexOf("google.es") != -1){
		chrome.tabs.remove(tabId);
	}
 });
</script>

Tenéis mas funciones relacionadas con las pestañas en la documetación oficial.

Y hasta aquí la segunda parte, en la próxima entrega os enseñaré alguna función interesante mas, a editar el contenido de las páginas y a crear un archivo de configuración de la extensión.

Mas información:

Google Code Chrome Extensions

Acerca de Miguel Díaz

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

5 comentarios en Crear una extensión para Google Chrome (II) – Funcionamiento en segundo plano y gestión de eventos.

  1.  Almudena dice:

    Me gusta mucho tu blog! Muy bien redactado, presencia impecable, variedad de contenidos y todo muy bien explicadito. Enhorabuena y sigue así de bien. Eres el mejor!!!

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

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

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

Deja un comentario

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