[Lee la parte 1]

Opción

Foto por lecates

Nota: Esto es una traducción de mi artículo, How to build a Chrome extension, Part 2: Options and localStorage

Un aspecto importante de casi toda extensión es poder guardar opciones del usuario. Esto se puede lograr en Chrome fácilmente usando el objeto localStorage y la página de opciones del API de Chrome.

Agregar una página de opciones

Para agregar una página de opciones a la extensión, crea un archivo opciones.html en la carpeta de tu extensión y agrega la línea “options_page” al manifest.json de esta manera:

{
  "name": "My Extension",
  ...
  "options_page": "opciones.html"
  ...
}

localStorage

localStorage es un objeto de HTML5 que se puede usar para almacenar datos localmente usando JavaScript. Chrome permite que extensiones utilicen el objeto localStorage para almacenar opciones y datos.

Guardando opciones

Para guardar un string en localStorage, usa el siguiente código, cambiando miopcion y mivalor por los tuyos:

localStorage["miopcion"] = "mivalor";

O, equivalentemente:

localStorage.miopcion = "mivalor";

Cargando opciones

Para cargar una opción, sólo accede al miembro del objeto localStorage:

mivariable = localStorage["miopcion"];

O, equivalentemente:

mivariable = localStorage.miopcion;

Siempre es una buena idea asegurarse que se está cargando una opción válida. Por ejemplo, el siguiente código carga el color favorito, pero si no es un color válido carga el valor predeterminado:

var colorPredeterminado = "azul";

function cargarColorFavorito() {
	var colorFav = localStorage["colorFav"];

	// colores validos son rojo, azul, verde y amarillo
	if (colorFav == undefined || (colorFav != "rojo" && colorFav != "azul" && colorFav != "verde" && colorFav != "amarillo")) {
		colorFav = colorPredeterminado;
	}

	return colorFav;
}

Borrar opciones

Puedes borrar una opción quitándola del objeto localStorage, de esta manera:

localStorage.removeItem("miopcion");

Construyendo una página de opciones

Continuando con nuestro ejemplo de colores, creemos ahora la página de opciones completa para nuestra extensión de colores. La página opciones.html se vería así:

<html>
<head>
	<title>Opciones para Colores</title>
	<script type="text/javascript" src="opciones.js"></script>
</head>
<body onload="cargarOpciones()">
	<h1>Color favorito</h1>
	<select id="color">
		<option value="azul">Azul</option>
		<option value="rojo">Rojo</option>
		<option value="verde">Verde</option>
		<option value="amarillo">Amarillo</option>
	</select>
	<br />
	<button onclick="guardarOpciones()">Guardad</button>
	<br />
	<button onclick="borrarOpciones()">Reestablecer predeterminados</button>
</body>
</html>

Para el comportamiento de la página, opciones.js se vería así:

var colorPredeterminado = "blue";

function cargarOpciones() {
	var colorFav = localStorage["colorFav"];

	// colores validos son rojo, azul, verde y amarillo
	if (colorFav == undefined || (colorFav != "rojo" && colorFav != "azul" && colorFav != "verde" && colorFav != "amarillo")) {
		colorFav = colorPredeterminado;
	}

	var select = document.getElementById("color");
	for (var i = 0; i < select.children.length; i++) {
		var child = select.children[i];
		if (child.value == colorFav) {
			child.selected = "true";
			break;
		}
	}
}

function guardarOpciones() {
	var select = document.getElementById("color");
	var color = select.children[select.selectedIndex].value;
	localStorage["colorFav"] = color;
}

function borrarOpciones() {
	localStorage.removeItem("colorFav");
	location.reload();
}

¡Y eso es prácticamente todo! También puedes guardar y cargar a y de localStorage en otras partes de la extensión, y los datos son compartidos entre todos los archivos de la extensión.

¿Alguna pregunta, aclaración, o algo que quieras compartir? ¡Deja un comentario!

[Sigue a la parte 3]