Блог

Я пытаюсь написать расширение Chrome, которое позволяет пользователям легко входить на внутреннюю веб-страницу. Расширение покажет меню, содержащее предопределенные учетные данные, из которых пользователь может выбрать один и немедленно войти на соответствующую веб-страницу.(подумайте о закладках ).

В качестве первого шага я хотел написать функциональность, которая принимает информацию «имя», «url», «имя пользователя» и «пароль» на странице параметров расширения и сохраняет ее с помощью 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 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!!
    });
}
 

Когда пользователь нажимает на значок расширения на панели инструментов, я показываю всплывающий 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? Любая помощь по этому вопросу была бы весьма признательна.

Вы не используете for…in правильно выполняйте цикл. Повторяется ключ, а не значения.

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