chrome/common/extensions/docs/templates/articles/options.html

   1 <h1>Options</h1>
   2
   3 <p class="note">
   4 There is a new way to write your options pages, starting from Chrome 40.
   5 <a href="optionsV2">Learn more</a>, and try it out!
   6 </p>
   7
   8 <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>
   9
  10 <p>Use the $(ref:storage.sync) API to persist these preferences. These values will then become accessible in any script within your extension, on all your user's devices.</p>
  11
  12 <h2 id="step_1">Step 1: Declare your options page in the manifest</h2>
  13
  14 <pre data-filename="manifest.json">
  15 {
  16   "name": "My extension",
  17   ...
  18   <b>"options_page": "options.html"</b>,
  19   ...
  20 }
  21 </pre>
  22
  23 <h2 id="step_2">Step 2: Write your options page</h2>
  24
  25 Here is an example options page:
  26
  27 <pre data-filename="options.html">
  28 &lt;!DOCTYPE html>
  29 &lt;html>
  30 &lt;head>&lt;title>My Test Extension Options&lt;/title>&lt;/head>
  31 &lt;body>
  32
  33 Favorite color:
  34 &lt;select id="color">
  35  &lt;option value="red">red&lt;/option>
  36  &lt;option value="green">green&lt;/option>
  37  &lt;option value="blue">blue&lt;/option>
  38  &lt;option value="yellow">yellow&lt;/option>
  39 &lt;/select>
  40
  41 &lt;label>
  42   &lt;input type="checkbox" id="like">
  43   I like colors.
  44 &lt;/label>
  45
  46 &lt;div id="status">&lt;/div>
  47 &lt;button id="save">Save&lt;/button>
  48
  49 &lt;script src="options.js">&lt;/script>
  50 &lt;/body>
  51 &lt;/html>
  52 </pre>
  53
  54 <pre data-filename="options.js">
  55 // Saves options to chrome.storage
  56 function save_options() {
  57   var color = document.getElementById('color').value;
  58   var likesColor = document.getElementById('like').checked;
  59   chrome.storage.sync.set({
  60     favoriteColor: color,
  61     likesColor: likesColor
  62   }, function() {
  63     // Update status to let user know options were saved.
  64     var status = document.getElementById('status');
  65     status.textContent = 'Options saved.';
  66     setTimeout(function() {
  67       status.textContent = '';
  68     }, 750);
  69   });
  70 }
  71
  72 // Restores select box and checkbox state using the preferences
  73 // stored in chrome.storage.
  74 function restore_options() {
  75   // Use default value color = 'red' and likesColor = true.
  76   chrome.storage.sync.get({
  77     favoriteColor: 'red',
  78     likesColor: true
  79   }, function(items) {
  80     document.getElementById('color').value = items.favoriteColor;
  81     document.getElementById('like').checked = items.likesColor;
  82   });
  83 }
  84 document.addEventListener('DOMContentLoaded', restore_options);
  85 document.getElementById('save').addEventListener('click',
  86     save_options);
  87 </pre>