14 abril, 2011 a las 20:01

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

Acerca de Miguel Díaz

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

16 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!

  3.  Luis Vasquez dice:

    Buenas tardes.-

    Amigo mio 3 peguntas relacionadas con la instrucciín LocalStorage:
    1.- los datos que aquí se guarden son persistentes, es decir si yo cierro el navegador y lo abro de nuevo ese valor guardado sigue existiendo?

    2.- como hago el proceso inverso es decir una vez que guarde algún valor con LocalStorage como puedo leerlo?

    3.- corrigeme si me equivoco pero esa instruccion es para guardar UNA VARIABLE, como haria si deseo guardar algo como un arreglo, por ejemplo un arreglo de varios Url?

    •  Miguel Díaz dice:

      Hola, efectivamente son persistentes, puedes usarlos como si de cookies se trataran y puedes leerlos tantas veces como quieras de la misma forma que lo harías con cualquier otra variable.

  4.  nentab dice:

    ¡Hola Miguel!

    Vengo con una nueva pregunta… ¿Cómo tendría que hacer para que lo que me guarde sea el estado de varias (tres concretamente) checkbox y de un textarea (donde habrá que escribir un número)? ¿Tendría que guardar toodo en el onclick del input de “Guardar”?

    ¡Gracias de antemano!

    •  Miguel Díaz dice:

      Efectivamente puedes hacerlo en el onclick, lo ideal sería crear una función por ejemplo

      function guardarDatos(){
      /* Aqui guardas los diferentes estados */
      
      }

      y luego en el onclick la llamas con

      onlclick="javascript:guardarDatos()"

      Dime si te queda claro y si no esta tarde te hago algún ejemplo

      •  nentab dice:

        Te envié un correo electrónico porque sino el comentario sería muy largo, espero que no te importe.

        Un saludo y gracias!

        •  Miguel Díaz dice:

          Debes hacer así:

          El head así

          <head>
            <title>Opciones de configuración</title>
            <script>
            
          	//Funcion encargada de guardar la configuración
          	function guardarDatos(){
          		
          	  if(document.getElementById("bloque1").checked == true){ //Si bloque1 está marcado guarda "true"
          		localStorage['bloque1'] = "true";
          	  }else{ //Si no lo está...
          		localStorage['bloque1'] = "false";		  
          	  }
          	  
          	  if(document.getElementById("bloque2").checked == true){ //Si bloque2 está marcado
          		localStorage['bloque2'] = "true";
          	  }else{ //Si no lo está
          		localStorage['bloque2'] = "false";		  
          	  }
          	  
          	  localStorage['altura-bloque3'] = document.getElementById("altura-bloque3").value; //Asigna el valor de altura-bloque3 a localStorage['altura-bloque']	
          	}
            </script>
          </head>

          Y el botón

          <button type="submit" onclick="javascript:guardarDatos(); return false;">Guardar</button>

          ¡Espero que te sea de ayuda!

  5.  Carlos dice:

    Hola!, gracias por compartir tus conocimientos, pero me gustaria hacer una aplicacion que se abra en una ventana nueva diferente a la de chrome, sabes como se hace?

  6.  Ruben dice:

    Buenas ,estoy haciendo una extension para un blog con tus consejos que muestra las ultimas 5 entradas. Me gustaria hacer que mostrase las que el usuario quiera y las configure en el menu de opciones.Coo lo hago??

    Un saludo

  7.  luis dice:

    Muy buenas tardes, veo que este post lleva años. estuve haciendo el curso este 2016 y veo que hay cosas que no funciona, pero que posteriomente logre resolver. Ahora me surge el siguiente tema.

    Como hago para poder guardar informacion en un archivo de texto, o que mi extensión de se conecte con una aplicacion externa enviando la información, en este caso la url.

    espero puedan ayudarme, un saludo.

  8.  sergio dice:

    Una cosa son dudas de extensión y otras de javascript… a ver señores, primero aprended js (y de paso jquery) y se os solucionarán el 90 % de las dudas

  9.  sergio dice:

    Para leer fichero (no probado):
    chrome.runtime.getPackageDirectoryEntry(function(root) {
    root.getFile(“myfile.html”, {}, function(fileEntry) {
    fileEntry.file(function(file) {
    var reader = new FileReader();
    reader.onloadend = function(e) {
    // contents are in this.result
    };
    reader.readAsText(file);
    }, errorHandler);
    }, errorHandler);
    });

    mas info (incluido set file): https://developer.chrome.com/apps/app_storage

Deja un comentario

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