1<h1>Options</h1> 2 3<p>To allow users to customize the behavior of your extension, you may wish to provide an options page. If you do, a link to it will be provided from the extensions management page at chrome://extensions. Clicking the Options link opens a new tab pointing at your options page.</p> 4 5<p>Use the $(ref:storage) API to persist these preferences. These values will then become accessible in any script within your extension.</p> 6 7<h2 id="step_1">Step 1: Declare your options page in the manifest</h2> 8 9<pre data-filename="manifest.json"> 10{ 11 "name": "My extension", 12 ... 13 <b>"options_page": "options.html"</b>, 14 ... 15} 16</pre> 17 18<h2 id="step_2">Step 2: Write your options page</h2> 19 20Here is an example options page: 21 22<pre data-filename="options.html"> 23<!DOCTYPE html> 24<html> 25<head><title>My Test Extension Options</title></head> 26<body> 27 28Favorite color: 29<select id="color"> 30 <option value="red">red</option> 31 <option value="green">green</option> 32 <option value="blue">blue</option> 33 <option value="yellow">yellow</option> 34</select> 35 36<label> 37 <input type="checkbox" id="like"> 38 I like colors. 39</label> 40 41<div id="status"></div> 42<button id="save">Save</button> 43 44<script src="options.js"></script> 45</body> 46</html> 47</pre> 48 49<pre data-filename="options.js"> 50// Saves options to chrome.storage 51function save_options() { 52 var color = document.getElementById('color').value; 53 var likesColor = document.getElementById('like').checked; 54 chrome.storage.sync.set({ 55 favoriteColor: color, 56 likesColor: likesColor 57 }, function() { 58 // Update status to let user know options were saved. 59 var status = document.getElementById('status'); 60 status.textContent = 'Options saved.'; 61 setTimeout(function() { 62 status.textContent = ''; 63 }, 750); 64 }); 65} 66 67// Restores select box and checkbox state using the preferences 68// stored in chrome.storage. 69function restore_options() { 70 // Use default value color = 'red' and likesColor = true. 71 chrome.storage.sync.get({ 72 favoriteColor: 'red', 73 likesColor: true 74 }, function(items) { 75 document.getElementById('color').value = items.favoriteColor; 76 document.getElementById('like').checked = items.likesColor; 77 }); 78} 79document.addEventListener('DOMContentLoaded', restore_options); 80document.getElementById('save').addEventListener('click', 81 save_options); 82</pre> 83 84<h2 id="important_notes">Important notes</h2> 85<ul> 86<li>We plan on providing some default css styles to encourage a consistent look across different extensions' options pages. You can star <a href="http://crbug.com/25317">crbug.com/25317</a> to be notified of updates.</li> 87</ul> 88