title: Save chrome extension options to chrome.storage?
body: <p>I'm making a chrome extension that has an <em>options.html</em> page.</p>
  
  <p>On the options page I have 3 checkboxes. When one of the checkboxes is checked/unchecked the value of that checkbox is saved to- or removed from chrome.storage using <em>chrome.storage.sync.set()</em>. But I can't seem to retrieve the data once it is saved using <em>chrome.storage.sync.get()</em>.</p>
  
  <p>Here's the code I have:</p>
  
  <p><strong>options.html:</strong></p>
  
  <pre><code>&lt;div class="checkboxes"&gt;
      &lt;input id="test1" name="test1" type="checkbox"&gt;       
      &lt;input id="test2" name="test2" type="checkbox"&gt;
      &lt;input id="test3" name="test3" type="checkbox"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>options.js:</strong></p>
  
  <pre><code>$(document).ready(function() {
  
    var storage = chrome.storage.sync;
  
    //Retrieve existing settings
    $(':checkbox').each(function() {
      $(this).prop('checked', function() {
        var name = this.name;
        storage.get(name, function(test){
          console.log(test[name]);
        });
      });
    });
  
    $(".checkboxes").on("change", ":checkbox", saveSettings);
  
    //Save or delete settings
    function saveSettings() {
      var name = this.name;   
  
      if($(this).is(':checked')) {
        storage.set({name:'checked'},function(){
          console.log("saved");
        });
      }
      else {
        storage.remove(name, function(){
          console.log("removed");
        });
      }
    }
  
  });
  </code></pre>
  
  <p><strong>Above outputs:</strong></p>
  
  <pre><code>console.log(test[name]); &gt; undefined
  console.log("saved");    &gt; saved
  console.log("removed");  &gt; removed
  </code></pre>
  
  <p>Why do I get "undefined"?</p>
  
  <p>I tired the same thing using <em>localStorage</em> which worked fine on only <em>option.js</em>. But when I tried to retrieve the stored data on <em>background.js</em> it didn't work. I figured their <em>localStorage</em> details are not accessible to each other.</p>
  
  <p>I should also mention I'm not the best at javascript/jquery and I'm still learning, so please excuse my mistakes.</p>