Jueves 7 de abril del 2011


Nos acercamos a la recta final de este curso para crear extensiones de Google Chrome en el que hemos aprendido muchas cosas: Que son realmente las extensiones, Partes de las que se compone una extensión, mostrar un popUp al hacer clic en el icono, ejecutar acciones en el navegador, capturar eventos de Chrome… Y ahora aprenderemos a crear una extensión con acceso al historial del navegador capaz de añadir una Web al historial aunque no la hayamos visitado. A editar el contenido de las páginas Web . He pensado que el apartado del archivo de configuración es mejor dejarlo para la siguiente entrega del curso para no saturar demasiado esta.

Si aún no has leído las entregas anteriores de el curso hazlo ahora: Crear una extensión para Google Chrome (I), Crear una extensión para Google Chrome (II). Como viene siendo habitual os advertimos que se da por hecho que el lector posee conocimientos de programación JavaScript.

Antes de empezar defeniremos el manifest.json de nuestra nueva extensión que será algo así

{
"name": "Nombre de la extensión",
"version": "3.0",
"background_page": "background.html",
"description": "Mi tercera extension",
"browser_action": {
"default_icon": "icono.png"
}
"permissions": [
    "history"
  ]
}

Es muy similar a usado en la entrega anterior, pero hemos sustituido la linea en la que se pedía permisos para obtener acceso a las pestañas por una que pide permisos para acceder al historial. Este permiso es necesario en cualquier aplicacion que precise realizar acciones sobre el historial (ver páginas visitadas, borrar elementos, añadirlos, etc). No olvides que todos los permisos existentes están descritos en la documentación oficial.

Ahora pasaremos a nuestro primer ejemplo en el que añadiremos al historial la página web “http://estoyaprendiendoaprogramar.com” cada vez que se abra el navegador o se cargue la extensión.

Añadir una página Web del Historial mediante extensiones

¡Es simple! La función encargada de añadir una página Web del historial es chrome.history.addUrl(objeto detallesPagina). El objeto detallesPagina debe tener una propiedad llamada url que contenga la dirección de la página. Por tanto si quisieramos añadir la página “estoyaprendiendoaprogramar.com” de nuestro historial nos valdría con poner el siguiente código en nuestro background.html

<script>
chrome.history.addUrl({'url':'http://estoyaprendiendoaprogramar.com'});
</script>

Y al ejecutar nuestro navegador de nuevo o recargar nuestra extensión aparecerá la Web en nuestro historial.

Esta es una pequeña introducción a las funciones relacionadas con el historial, tenemos muchas mas funciones en el apartado “history” de la documentación oficial.

Editar el código de una página Web

Bien, en este ejemplo hay que prestar mucha atención, ya que es probablemente una de las partes que mas usa cualquier extensión Web, por ejemplo un bloqueador de anuncios, una extensión que edite palabras malsonantes, que añada opciones a una Web, etc. Nuestro ejemplo añadirá el texto “Página Web Modificada por Chrome” al comienzo de cada página.

En este caso deberemos tener el manifest ligeramente modificado, de esta forma

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

Como véis, hemos pedido permiso para acceder a las tablas, esto es por que necesitaremos realizar la acción cuando se visite una página Web y no solo al ejecutar el navegador así que pondremos nuestra extensión a la espera como aprendimos en el segundo tomo. Además hemos pedido permiso a las páginas Web tanto http como https, esto es necesario para poder acceder a su contenido y editarlo u obtener información.

A continuación vemos el código de nuestro background.html

<script>
chrome.tabs.onUpdated.addListener(function(tab, estado) { //Colocamos la extension a la escucha de que una pagina Web sea visitada o actualizada.
	//Aquí irá el código que se encargará de modificar la Web
});
</script>

Fijaros que en este caso que hemos pasado un objeto ‘estado’, este objeto tiene información sobre la tabla, entre ella el estado (loading o complete) y no será de utilidad para que nuestro código se ejecute solo una vez, de otra forma se ejecutaría al empezar a cargar la tabla y al terminar. Lo dicho, la extensión se queda a la escucha esperando que una nueva página sea cargada.

Ahora vamos a ver el código que realmente modificará la Web.

La función chrome.tabs.executeScript()

Esta función nos permitirá inyectar código dentro de una pestaña, de tal forma que sea este código el encargado de modificar la propia Web con las funciones JavaScript de toda la vida, su sintaxis es muy sencilla:

chrome.tabs.executeScript(integer tabId, object details)

Donde tabId será el ID de la tabla a modificar, y object details es un objeto con los siguientes parametros

  • code (Opcional string): El código a inyectar dentro de la pestaña.
  • file (Opcional string): Archivo javascript a ejecutar en la pestaña.
  • allFrames (Opcional booleana): Definirá si el código inyectado lo hará dentro de todos los marcos de la página.

En cuanto a la forma de insertar el código, generalmente recomendaré file frente a code por una cuestión de comodidad ya que es mas facil tener un .js con todo el código javascript a inyectar que establecerlo en una variable que luego sea pasada a la función.

Por tanto el código fuente de nuestro background.html debe quedar así

<script>
chrome.tabs.onUpdated.addListener(function(tab, estado) { //Colocamos la extension a la escucha de que una pagina Web sea visitada o actualizada.
	if(estado.status == 'complete'){ //Si la pagina se ha terminado de cargar
            chrome.tabs.executeScript(tab.id, {'file':'inyeccion.js'}); //Inyecta el código del fichero inyeccion.js
         }
});
</script>

Siendo inyeccion.js el archivo JavaScript el archivo a añadir. Aunque no debería haber ninguna sobre el contenido del .js ya que se da por echo que los lectores de este curso saben JavaScript os pongo el código que he usado.

inyeccion.js

document.body.innerHTML = 'Página Web Modificada por Chrome'+document.body.innerHTML;

Y listo, ¡a recargar nuestra extensión!

Tenemos muchas mas opciones, como por ejemplo, si solo quisiéramos modificar google nos bastaria con añadir una condición que comprobara estado.url y que solo ejecutara el script en ese caso.

¡Os espero en la próxima entrega!

Links de interés:

  • Facebook
  • Meneame
  • BarraPunto
  • PDF

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: , , , , , , , .

Un comentario en Crear una extensión para Google Chrome (III)

  1. 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 necesarios están marcados *

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Blog de Miguel Díaz
Diseño Web por Miguel Díaz.