Crea una extensión para Chrome (V) – Obtener información de una Web y el sistema de notificaciones. | DiazSecurity.com – Blog de Miguel Díaz
28 noviembre, 2011 a las 7:30

Nos acercamos al final de este curso de creación de extensiones para Chrome y hoy aprenderemos dos puntos muy importantes y muy llamativos: Aprenderemos a obtener información de una página Web y descubriremos cómo enviar notificaciones en forma de “Pop Up”

Una vez dicho esto, vamos al grano.

Obtener información de una página externa

El sistema de extensiones de chrome nos permite obtener información de otras páginas mediante AJAX, como sabéis normalmente las solicitudes AJAX están limitadas para realizarlas dentro de un mismo dominio, por ejemplo la Web ralliza.com no podría realizar una consulta asíncrona a forocoches.com, pudiendolas hacer únicamente a ralliza.com/*. Pero esto no pasa con las extensiones: Las extensiones tienen permiso para realizar consultas a cualquier dirección.

Pongamos un ejemplo: Obtener las notificaciones en forocoches.com

Lo primero, como siempre definir los permisos del manifest.json

{
"name": "Mi quinta extension",
"version": "1.0",
"background_page": "background.html",
"description": "Aprendiendo a obtener datos de páginas Web",
"browser_action": {
"default_icon": "icono.png"
},
"permissions": [
    "http://www.forocoches.com/"
  ]
}


Nada que no hayamos visto hasta la fecha: Una descripción, un icono, un nombre, una página en segundo plano y permiso para acceder a http://www.forocoches.com

Una vez declarado el manifiesto lo siguiente es programar background.html para realizar una consulta AJAX a www.forocoches.com/foro y así obtener su código fuente. Esta parte la voy a dejar que lo hagáis como queráis pero yo pondré un ejemplo usando Jquery.

Paso 1: Obtener el código fuente de la página

En este sencillo ejemplo obtenemos el código fuente de forocoches.com y lo mostramos en un alert()

background.html

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
<script>
	//Función enecargada de obtener el código fuente de forocoches.com
	function obtener_notificaciones(){
		$.ajax({ //Declaramsos el objeto AJAX
			type: "POST",
			url: "http://www.forocoches.com/", //URL que solicitaremos
			dataType: "html", //Tipo de datos que nos devolverá
			success: function(codigo_html){ //Cuando complete la solicitud
				alert(codigo_html.search("Herman")); //Mostrar HTML
			}
		})
	}
</script>
</head>
<body onload="javascript:obtener_notificaciones()">
</body>
</html>

Cómo veis es una página sencilla que usa jquery. Hemos declarado una función llamada obtener_notificaciones que realiza una consulta AJAX hacia forocoches.com, el resultado lo almacena en la variable codigo_html y posteriormente lo muestra mediante un alert. Esta funcion es llamada a través de .

Paso 2: Saber dónde está lo que queremos.

El siguiente texto es mas propio de JavaScript que del funcionamiento de una extensión, pero creo que es necesario explicarlo.

Lo primero es ver en que parte del código fuente se encuentra la información que deseamos sacar, para ello visitamos la Web y vemos su código fuente, en nuestro caso la cantidad de notificaciones está en este trozo de código:

<div><span id="notifications"><a href="usercp.php">Notificaciones:</a> <strong>1</strong>

Vemos que el numero de notificaciones lo encontramos justo entre el texto “Notificaciones:<strong>” y “</strong>” Así que solo nos queda aislar ese contenido para ello editamos la funcion obtener_notificaciones dejandola así:

background.html

//Función enecargada de obtener el código fuente de forocoches.com
	function obtener_notificaciones(){
		$.ajax({ //Declaramsos el objeto AJAX
			type: "POST",
			url: "http://www.forocoches.com/foro", //URL que solicitaremos
			dataType: "html", //Tipo de datos que nos devolverá
			success: function(codigo_html){ //Cuando complete la solicitud
				notificaciones = 0 //Iniciamos la variable a 0

				//Posicion donde aparece "Notificaciones:</a> <strong>" +29 que es la logitud del texto
				posicion_inicial = codigo_html.search("Notificaciones:</a> <strong>")+28;

				if(posicion_inicial > 28){ //Si se ha encontrado el texto elimina todo lo anterior.
					codigo_html = codigo_html.substr(posicion_inicial);

					//Ahora elimina lo posterior
					codigo_html = codigo_html.substr(0,codigo_html.search("</strong>"));

					//lo guarda en la variable notificaciones
					notificaciones = parseInt(codigo_html);

				}

				//Muestra la cantidad de notificaciones
				alert(notificaciones);

			}
		})
	}

Aunque están todas las líneas comentadas básicamente lo que hace es buscar donde se encuentra el texto “Notificaciones:<strong>” y eliminar todo lo anterior, de la cadena obtenida ahora se elimina todo lo posterior a “</strong>” y así queda únicamente el número de notificaciones, luego lo muestra mediante un alert();

Y hasta aquí el apartado de como obtener datos de una página externa, he explicado el modo mas difícil ya que otras páginas disponen de APIs que nos facilitaran la obtención de los datos en lugar de tener que hacerlo limpiando el HTML. Y hasta aquí este apartado, si lo deseas puedes descargar la extensión de ejemplo.

Sistema de notificaciones de Google Chrome

Para el que no sepa a que me refiero, me refiero a esas advertencias, similares a las de programas como MSN Messenger que Chrome nos muestra a veces.

Es muy sencillo enviar estas notificaciones. En primer lugar pediremos permiso a “notifications” en nuestro manifest.json

"name": "Mi sexta extension",
"version": "1.0",
"background_page": "background.html",
"description": "Aprendiendo a enviar notificaciones",
"browser_action": {
"default_icon": "icono.png"
},
"permissions": [
    "notifications"
  ]
}

En segundo lugar, en nuestro background.html realizamos la función que enviará la notificación.

	//Función enecargada de enviar una notificacion
	function enviar_notificacion(){
		notificacion = webkitNotifications.createNotification( //Creamos la notificacion
			'imagen.jpg', //Imagen que se mostrara
			'Titulo de la notificacion', //Titulo
			'Miguel Díaz quiere que visites su blog' //Texto de la notificacion
		)
		notificacion.show();
		setTimeout("notificacion.cancel()", 3000);
		
	}

No hay mucho que explicar, es realmente fácil, simplemente creamos una clase y definimos la imagen de la notificación, titulo y texto. Una vez hecho esto la mostramos con notificacion.show() y para ocultarla usamos notificacion.cancel(), esto lo metemos dentro de un setTimeout para que no oculte la notificación hasta que no pase un tiempo determinado.

Y esto ha sido todo de momento, sigue atento al blog para descubrir el último numero de este curso.

¡Hasta la próxima!

Acerca de Miguel Díaz

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

Deja un comentario

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