src/chrome/common/extensions/docs/examples/api/storage/stylizr/options.js

   1 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 // Store CSS data in the "local" storage area.
   6 //
   7 // Usually we try to store settings in the "sync" area since a lot of the time
   8 // it will be a better user experience for settings to automatically sync
   9 // between browsers.
  10 //
  11 // However, "sync" is expensive with a strict quota (both in storage space and
  12 // bandwidth) so data that may be as large and updated as frequently as the CSS
  13 // may not be suitable.
  14 var storage = chrome.storage.local;
  15
  16 // Get at the DOM controls used in the sample.
  17 var resetButton = document.querySelector('button.reset');
  18 var submitButton = document.querySelector('button.submit');
  19 var textarea = document.querySelector('textarea');
  20
  21 // Load any CSS that may have previously been saved.
  22 loadChanges();
  23
  24 submitButton.addEventListener('click', saveChanges);
  25 resetButton.addEventListener('click', reset);
  26
  27 function saveChanges() {
  28   // Get the current CSS snippet from the form.
  29   var cssCode = textarea.value;
  30   // Check that there's some code there.
  31   if (!cssCode) {
  32     message('Error: No CSS specified');
  33     return;
  34   }
  35   // Save it using the Chrome extension storage API.
  36   storage.set({'css': cssCode}, function() {
  37     // Notify that we saved.
  38     message('Settings saved');
  39   });
  40 }
  41
  42 function loadChanges() {
  43   storage.get('css', function(items) {
  44     // To avoid checking items.css we could specify storage.get({css: ''}) to
  45     // return a default value of '' if there is no css value yet.
  46     if (items.css) {
  47       textarea.value = items.css;
  48       message('Loaded saved CSS.');
  49     }
  50   });
  51 }
  52
  53 function reset() {
  54   // Remove the saved value from storage. storage.clear would achieve the same
  55   // thing.
  56   storage.remove('css', function(items) {
  57     message('Reset stored CSS');
  58   });
  59   // Refresh the text area.
  60   textarea.value = '';
  61 }
  62
  63 function message(msg) {
  64   var message = document.querySelector('.message');
  65   message.innerText = msg;
  66   setTimeout(function() {
  67     message.innerText = '';
  68   }, 3000);
  69 }