javascript - chrome.storage.sync.get 未返回完整的 JS 对象

Question

我正在尝试编写一个 Chrome 扩展程序，允许用户轻松登录内部网页。该扩展将显示一个包含预定义凭据的菜单，用户可以从中选择一个凭据并立即登录到相应的网页。(想想书签++)。

作为第一步，我想在“扩展选项”页面中编写接受“名称”、“网址”、“用户名”和“密码”信息的功能，并使用 chrome.storage.sync 保留该信息。设置。用户可以使用 chrome.storage 保存多组此类信息(例如同一网站的不同用户名)。我能够成功地做到这一点，并且选项页面还能够列出所有保存的信息。请暂时忽略与客户端密码加密相关的安全问题。

这是我的 list .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);
    }
});

正如您所看到的，提取只能获取顶级对象信息，但无法获取其任何属性。我应该使用内容脚本或后台页面来读取 chrome.storage.sync.set 设置的数据吗？对此的任何帮助将不胜感激。

Answer 1

您没有正确使用 for...in 循环。它们的键是迭代的，而不是值。

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