Crear una extensión para Google Chrome (III) – Añadir Webs al historial e inyectar javascript en una pestaña | DiazSecurity.com – Blog de Miguel Díaz
7 abril, 2011 a las 22:43


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:

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

12 comentarios en Crear una extensión para Google Chrome (III) – Añadir Webs al historial e inyectar javascript en una pestaña

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

  2.  TS dice:

    No me funciona el código que pones :/

  3.  dnis villeda dice:

    ola ma ayudas quiero aser una extencion que me aga un boton mas cuado entrea google+ asi como esta http://crossrider.com/install/519-google-facebook porfa ayudame que tengo que hacer

  4.  Alberto dice:

    Buenas, tengo un problema, al cargar el archivo .js, solo ejecuta las primeras instrucciones y las demás no. Sabes por que puede ser? hay una longitud maxima o algo asi?

    •  Miguel Díaz dice:

      Alberto, no hay longitud maxima, prueba a abrir directamente el archivo a través de un HTML en el navegador y mira donde falla, puedes ayudarte de un debugger, pero lo mas probable es que sea un error en el código.

  5.  Rubén dice:

    Hola Miguel, creo has escrito una serie de artículos muy buenos para introducirse en el mundo de las extensiones de Chrome, felicidades.

    Quería hacerte una pregunta de algo que no se si se puede hacer ya que llevo unos días mirando y aun ni he visto ni se me ocurre como hacerlo.

    Estoy intentado modificar una página Web de manera que pueda poner un botón que ejecute una función de Javascript que yo mismo haya hecho. Si llamo a la función desde dentro del fichero (por ejemplo) “inyeccion.js” si funciona pero si se llama desde el botón, una vez cargada la página ya no funciona.
    Habría alguna manera de inyectar un js custom a modo de libreria?

    No se si me explico.

    Por otro lado, veo que si la página web tiene ficheros Javascript propios nosotros no podemos llamar a las funciones que tienen ya que nos da un error diciendo que la función no esta definida. Una vez cargada la pagina si que funciona, lo he probado desde la consola de Java. Supongo que esto será debido a que cuando se ejecuta nuestro fichero js custom aun no se han cargado los js de la propia página.

    Saludos

  6.  Damian dice:

    Hola buenas.

    Ante todo felicitarte por la web estoy (estamos) aprendiendo mucho ya que nunca es demasiado.

    Mi pregunta es la siguiente:

    ¿Podría sustituir las imágenes de una web de esta forma? es decir, lo que quiero seria poder modificar las direcciones de las imágenes de una web para que en vez de cargarse desde el servidor se cargaran desde el pc. Guardarlas como imagenes de la extension o aparte para que la web la carge.

  7.  Francisco Artigas dice:

    Hola a mi me marca error al momento de cargar la extension en la parte de background_page, sabes como puedo solucionar este problema

    me dice lo siguiente:

    Se han recibido advertencias al intentar instalar esta extensión:
    ‘background_page’ requires manifest version of 1 or lower.

    gracias por tu apoyo

Deja un comentario

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