title: chrome.storage.sync.get not returning complete JS object
body: <p>I am trying to write a Chrome extension that allows users to easily login to an internal webpage. The extension would show a menu containing pre-defined credentials from which the user can pick one and immediately be logged into the corresponding web page.(think Bookmarks++). </p>
  
  <p>As a first step, I wanted to write the functionality that accepts 'name', 'url', 'username' and 'password' information in the Extension Options page and persist that using <strong>chrome.storage.sync.set</strong>. The user can have multiple sets of such information persisted using chrome.storage (e.g different usernames for the same website). I am able to do this successfully and the options page is also able to list all the saved information. For the time being, please ignore the security issues associated with client-side password encryption.</p>
  
  <p>This is my manifest.json</p>
  
  <pre><code>{
      "name": "My Chrome Extension",
      "version": "1.0",
      "manifest_version": 2,
      "description": "Easy login to My Webapp",
  
      "browser_action": {
          "default_icon": "images/Cloud16.png",
          "default_popup": "html/popup.html"
      },
      "options_page": "html/options.html",
      "permissions": ["&lt;all_urls&gt;", "storage", "unlimitedStorage"]    
  }
  </code></pre>
  
  <p>This is save handler in the options page (in options.js):</p>
  
  <pre><code>function saveHandler() {
      var name = $("#name").val(),
          url = $("#url").val(),
          password = $("#password").val(),
          key = Date.now() + "",   //key based on currentTimeInMillis
          obj = {
              "id": key,
              "name": name,
              "url": url,
              "password": password
          };
      chrome.storage.sync.get('LOGIN_COLLECTION', function(items) {
              //Create a new collection if not exists
          if(items &amp;&amp; !items['LOGIN_COLLECTION']) {
              items['LOGIN_COLLECTION'] = {};         
          }
          items['LOGIN_COLLECTION'][obj.id] = obj;
          chrome.storage.sync.set(items, function() {
              // Notify that we saved.
              console.log('Settings saved');
              chrome.storage.sync.get('LOGIN_COLLECTION', function(data) {            
                  console.dir(data);
              });
          });
          $("#addUrlDialog").slideUp();
          loadExistingInfo(); //Read persisted data, and show. This works fine!!
      });
  }
  </code></pre>
  
  <p>When the user clicks on the extension icon in the toolbar, I show a popup html which has a script to fetch the data (using chrome.storage.get) that was persisted in the options page. The code to fetch data in the popup looks like this:</p>
  
  <pre><code>chrome.storage.sync.get('LOGIN_COLLECTION', function(items) {
      var container = $("#listContainer"),
      data = items['LOGIN_COLLECTION'];
      for(item in data) {          
          console.dir(item); //**Outputs empty object**
          $("&lt;div&gt;&lt;/div&gt;").text(item.name).appendTo(container);
      }
  });
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/PMGmv.png" alt="Screenshot of the js console for popup page"></p>
  
  <p>As you can see, the fetch is able to get only the top-level object information, but none of its attributes. Should I be using content scripts or background pages to read data set by chrome.storage.sync.set? Any help on this would be greatly appreciated.</p>