Question

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

作为第一步，我想在Extension Options页面中编写接受'name'，'url'，'username'和'password'信息的功能，并使用 chrome.storage.sync保留该信息。设置即可。用户可以使用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

如您所见，fetch只能获取顶级对象信息，但不能获取其属性。我应该使用内容脚本或背景页来读取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);
}

chrome.storage.sync.get没有返回完整的JS对象

1 个答案: