Jueves 14 de abril del 2011

Tenía ganas de llegar a esta parte, por que con lo aprendido hasta ahora y lo que aprenderemos en esta nueva entrega  ya seremos capaces de crear nuestras propias extensiones de chrome de forma bastante completa. Hoy damos paso a la creación de los archivos de opciones, almacenar información de forma local, en la próxima entrega aprenderemos a usar el sistema de notificaciones de Chrome y para finalizar, en la última entrega crearemos una extensión que use la mayor parte de las cosas aprendidas en el curso y la comentaremos paso a paso.

En los artículos anteriores aprendimos las partes en las que se compone una extension, a crear un popup, a capturar eventos de chrome, realizar acciones (cerrar pestañas) y a editar el contenido de las páginas Web.

Si no has leído las entregas anteriores te recomendamos hacerlo ahora:

  1. Crear una extensión para Chrome (I)
  2. Crear una extensión para Chrome (II)
  3. Crear una extensión para Chrome (III)

Para empezar, y como viene siendo habitual, definamos y expliquemos nuestro manifest.json

{
"name": "Mi cuarta extension",
"version": "1.0",
"options_page": "opciones.html",
"background_page": "pagina.html",
"description": "Aprendiendo a usar archivos de configuracion",
"browser_action": {
     "default_icon": "icono.png"
    }
}

Como veis en esta ocasión hemos definido la linea options_page, la cual define el HTML encargado de mostrar el formulario y configuración de nuestra extensión, tal y como aprendimos en la primera entrega. Ahora pasamos a ver que debe contener este archivo y como guardar la configuración.

El archivo de opciones de las extensiones

El archivo options_page no es mas que un html, como el resto que puede acceder a esas “funciones especiales” que permite al resto de los archivos que componen la extensión.

Este archivo es ejecutado cuando vamos a la configuración de la extensión, por ejemplo haciendo clic con el boton derecho en su icono y llendo a “opciones”.

La finalidad del mismo no es otra que la de mostrar un formulario al usuario cuando quiere ver las opciones de la extensión y de guardar las opciones del usuario.
Pongamos el ejemplo de un archivo de configuración que simplemente nos muestra un Textbox en el que pone “URL” y un botón de guardar:

opciones.html

Configuracion de la extension
<form id="form1" method="post">
	<label for="textfield">URL</label>
	<input id="textfield" name="textfield" type="text" />
	<input id="button" name="button" type="submit" value="Guardar" />
</form>

Como veis es muy simple, nada del otro mundo pero ¿Cómo guardamos la configuración del usuario? Pues muy fácil, con unas de las novedades que incorpora JavaScript en HTML5 y que mas juego va a dar, la capacidad de guardar valores de forma local en el navegador. Hasta ahora cuando una página Web quería guardar alguna información en el equipo lo hacía mediante cookies, pues ahora podrá hacerse mediante este tipo de variables. Para guardar un dato debería hacerse algo así

    localStorage['nombreVariable'] = 'valorVariable';

Siendo localStorage["nombreVariable"] la variable local en la que guardaremos los datos.

Por tanto añadiendo en el botón el código javascript al boton

    <input id="button" onclick="javascript:localStorage['urlExtension'] = document.forms.form1.textfield.value;return false" name="button" type="submit" value="Guardar" />

Guardará el valor que posea el textbox en la variable local urlExtension, siendo accesible desde cualquier parte de la extensión.

Ahora vamos a complicar un poco el ejemplo que pusimos en la segunda entrega el cual mostraba una advertencia cada vez que se visitaba google.es haciendo que muestre la advertencia cada vez que se muestre la página que defina el usuario en el archivo de configuración.

manifest.json

{
"name": "Mi cuarta extension",
"version": "1.0",
"background_page": "background.html",
"options_page": "opciones.html",
"description": "Aprendiendo a usar archivos de configuracion",
"browser_action": {
"default_icon": "icono.png"
},
"permissions": [
"tabs"
]
}

Como veis el único cambio en el archivo con respecto al de la segunda entrega es que en este hemos definido una página de configuración.

Ahora pasamos al background.html, que como recordamos era el archivo encargado de comprobar cada pagina que visitamos y en caso de visitar google.es mostraba una advertencia

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

y cambiaremos el condicional por el siguiente:

if(tab.url.indexOf(localStorage["urlExtension"]) != -1)

Para que la comprobación en lugar de ser “Si la pagina web contiene google.es” sea “Si la pagina web contiene localStorage["urlExtension"].

Así pues quedaría de esta forma:

 

background.html

<script>
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) { //Colocamos la extension a la escucha de que una pagina Web sea visitada o actualizada.
    if(tab.url.indexOf(localStorage["urlExtension"]) != -1 && localStorage["urlExtension"] != ""){ //Si la URL actual contiene la introducida en localStorage["urlExtension"]
        alert("Estas visitando la pagina");
    }
});
</script>

Y no queda mas, ahora carguemos nuestra extensión, vayamos a la configuración, definamos una página, por ejemplo twitter.com.

Cada vez que visitemos *twitter.com* nos saldrá la advertencia.

Si lo necesitas, puedes descargar la extensión

  • 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, Programación. Etiquetas: , , , , , , .

4 comentarios en Crear una extensión para Google Chrome (IV) – Guardado de opciones y configuración personalizada

  1. Me gusta este material, gracias por compartirlo probare un par de cosas que me llamaron la atención cualquier duda que tenga podre contar con tu asesoría?

  2.  Joel dice:

    Hola! estoy creando una pequeña aplicacion para chrome siguiendo tus pasos, y todo perfecto!

    La unica duda que me queda es; si tubieramos que hacer una version 2.0 de nuestro plugin, como deveriamos hacerlo para que se le actualizara a la gente que ya tiene dicho plugin, sin tener que volver a instalar-lo ?

    un saludo y gracias!

    •  Miguel Díaz dice:

      Hola Joel, de esto hablaré en la parte final del curso, pero si quieres puedes darle un vistazo a la fución “Autoupdate” de la API de Chrome:
      http://code.google.com/chrome/extensions/autoupdate.html

      Espero que sea de ayuda

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.