How to build a Chrome extension, Part 2: Options and localStorage

An important aspect of almost all extensions is being able to save user settings. This can be achieved in Chrome easily by using the localStorage object and Chrome’s extension API options page.

Adding an options page

To add an options page to your extension, make an options.html file in your extension’s folder and add the “options_page” line to your manifest.json like so:

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

localStorage

localStorage is an HTML5 object used for storing web page data locally using JavaScript. Chrome gives extensions the option of using localStorage to save options and data.

Saving options

To save a string to localStorage, use the following code, replacing mysetting and myvalue with your own:

localStorage["mysetting"] = "myvalue";

Or, equivalently:

localStorage.mysetting = "myvalue";

Loading options

To load an option, just access the setting member in the localstorage object:

myvar = localStorage["mysetting"];

Or, equivalently:

myvar = localStorage.mysetting;

It’s always a good idea to make sure you’ve loaded a valid setting. For example, the following code loads a favorite color, but if the current color is not valid, it loads the default value:

var defaultColor = "blue";

function loadFavColor() {
	var favColor = localStorage["favColor"];

	// valid colors are red, blue, green and yellow
	if (favColor == undefined || (favColor != "red" && favColor != "blue" && favColor != "green" && favColor != "yellow")) {
		favColor = defaultColor;
	}

	return favColor;
}

Erasing options

You can erase an option by removing it from the localstorage object, like so:

localStorage.removeItem("mysetting");

Building an options page

Continuing with the favorite color example, lets now build a complete options page for our color-choosing extension. The options.html page would look like this:

<html>
<head>
	<title>Options for Color Chooser</title>
	<script type="text/javascript" src="options.js"></script>
</head>
<body onload="loadOptions()">
	<h1>Favorite Color</h1>
	<select id="color">
		<option value="blue">Blue</option>
		<option value="red">Red</option>
		<option value="green">Green</option>
		<option value="yellow">Yellow</option>
	</select>
	<br />
	<button onclick="saveOptions()">Save</button>
	<br />
	<button onclick="eraseOptions()">Restore default</button>
</body>
</html>

For the behavior of the page, options.js would look like this:

var defaultColor = "blue";

function loadOptions() {
	var favColor = localStorage["favColor"];

	// valid colors are red, blue, green and yellow
	if (favColor == undefined || (favColor != "red" && favColor != "blue" && favColor != "green" && favColor != "yellow")) {
		favColor = defaultColor;
	}

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

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

function eraseOptions() {
	localStorage.removeItem("favColor");
	location.reload();
}

And that’s about it! You can also save and load localStorage data elsewhere in your extension, as the data is shared between all your extension’s files.

Any question, remark, or addition? Please leave a comment!