Question

我正在为Chrome扩展程序中的用户设置编写界面。以下是我如何定义设置：

function Setting(label, type, defaultData) {
    this.label = label;
    this.type = 'checkbox';
    this.defaultData = defaultData;
}

var Settings = {};
Settings['setting-one'] = new Setting('Setting one', 'checkbox', 'true');
Settings['setting-two'] = new Setting('Setting two', 'checkbox', 'true');

以下是我为每个设置设置默认值的方法：

function setDefaultSetting(setting, defaultValue) {
    chrome.storage.sync.get(setting, function(results) {
        if (!results[setting]) {
            // If the setting has not yet been defined, define it now
            var dataToSave = {};
            dataToSave[setting] = defaultValue;
            chrome.storage.sync.set(dataToSave, function() {
                debugMsg('set `' + setting + '` to ' + defaultValue);
            });
        }
    });
}

for (var setting in Settings) {
    if (Settings.hasOwnProperty(setting)) {
        var s = Settings[setting];
        if (s.type == 'checkbox') {
            setDefaultSetting(setting, s.defaultData);
        }
    }
}

到目前为止，这么好。现在我想打印设置列表作为复选框。以下是我尝试过的内容：

function printSettingsModal() {
    var output += '<form>';
    for (var setting in Settings) {
        if (Settings.hasOwnProperty(setting)) {
            var s = Settings[setting];
            if (s.type == 'checkbox') {
                chrome.storage.sync.get(setting, function(results) {
                    output += '<p><input id="setting-' + setting + '" type="checkbox"';
                    if (results[setting] == 'true') { output += ' checked="checked"'; }
                    output += '><label for="setting-' + setting + '">' + s.name + '</label></p>';
                });
            }
        }
    }
    output += '</form>';
    return output;
}

这不起作用，因为chrome.storage.sync.get()是异步的。如何遍历我的设置数组并检索每个设置的相关chrome.storage数据？

Answer 1

您实际上不必按顺序执行此操作，甚至事先明确设置默认值。

chrome.storage.local.get第一个参数有3种形式：

"key"（字符串）：只检索一个键，正如您所做的那样
["key1", "key2"]（array）：检索数组中键的所有值
{ key1: default1, key2: default2 }（字典对象）：检索指定键的所有值，如果它不在存储中，则返回提供的默认值

您可以收集要检索的所有设置，并在一次操作中获取它们。

Answer 2

一种简单的方法是使用递归函数，在chrome.storage.sync.get()方法的回调中添加每个选项，并调用printSettingsModal()函数来增加索引。要做到这一点你需要一个数组结构来至少存储设置的名称，以便你可以迭代它，你可以编辑你的Settings对象并添加方法{{1这将为你做这件事。然后，您可以递归调用add()方法，并在完成后调用chrome.storage.sync.get()。

首先，这是您的新callback对象：

Settings

现在您将拥有以下内容：

function Setting(label, type, defaultData) {
    this.label = label;
    this.type = 'checkbox';
    this.defaultData = defaultData;
}

function Settings() {
    var _this = this;

    this.list = [];
    this.add = function(key, obj) {
        this.list.push(key);
        _this[key] = obj;
    }
}

var mySettings = new Settings();

mySettings.add('setting-one', new Setting('Setting one', 'checkbox', 'true'));
mySettings.add('setting-two', new Setting('Setting two', 'checkbox', 'true'));

以下是递归函数，您需要：

在开头将输出初始化为console.log(mySettings); Settings {list: Array[2], add: function, setting-one: Setting, setting-two: Setting}。
在中间步骤中添加所有设置。
最后确定最后添加"<form>"的输出。
使用输出调用回调，以便正确使用它。

以下是使用递归函数的示例：

"</form>"

现在您只需要定义一个回调并调用它：

function printSettingsModal(index, output, callback) {
    var s = mySettings[mySettings.list[index]];

    if (index === 0) {
        // first element is going to be created
        output = "<form>";
    } else if (index > mySettings.list.length-1) {
        // the last setting has been added
        // call the callback
        callback(options);
    }

    if (s.type == 'checkbox') {
        chrome.storage.sync.get(setting, function(results) {
            output += '<p><input id="setting-' + setting + '" type="checkbox"';
            if (results[setting] == 'true') { output += ' checked="checked"'; }
            output += '><label for="setting-' + setting + '">' + s.name + '</label></p>';
        if (index === mySettings.list.length-1) {
            // last element has been created
            output += '</form>';
            printSettingsModal(++index, output, callback);
        }
        });
    }
}

如果我写得正确，这对你有用。希望它有所帮助。

从chrome.storage顺序检索多个项目

2 个答案: