2014-06-27 93 views
0

我正在尝试编写一个允许用户轻松登录到内部网页的Chrome扩展。该扩展将显示一个包含预定义凭据的菜单,用户可以从该菜单中选择一个并立即将其登录到相应的网页中(想想书签++)。chrome.storage.sync.get不返回完整的JS对象

作为第一步,我想写一个接受'名称','网址','用户名'和'密码'信息的功能,并且使用chrome.storage.sync.set。用户可以使用chrome.storage保存多组此类信息(例如,针对同一网站的不同用户名)。我能够成功地完成此操作,并且选项页面也能够列出所有保存的信息。目前,请忽略与客户端密码加密相关的安全问题。

这是我的manifest.json

{ 
    "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": ["<all_urls>", "storage", "unlimitedStorage"]  
} 

这是保存处理程序选项页(在options.js):

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 && !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!! 
    }); 
} 

当工具栏上的图标分机用户点击,我显示一个弹出的html,它有一个脚本来获取在选项页面中保存的数据(使用chrome.storage.get)。在弹出来获取数据的代码如下所示:

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** 
     $("<div></div>").text(item.name).appendTo(container); 
    } 
}); 

Screenshot of the js console for popup page

正如你所看到的,抓取是就能得到的只有顶层对象的信息,但没有它的属性。我应该使用内容脚本还是后台页面来读取由chrome.storage.sync.set设置的数据?任何帮助,将不胜感激。

回答

1

您没有正确使用for ... in循环。他们的关键在于迭代,而不是价值。

for(key in data) { 
    var item = data[key]; 
    console.dir(item); 
    $("<div></div>").text(item.name).appendTo(container); 
} 
+0

非常感谢。我会测试这个以确保它能正常工作。 – sathishpaul

+0

确实是问题的关键。修复它使扩展工作。谢谢 :) – sathishpaul