Chrome扩展程序：chrome存储无法识别obj [“name”+ i]

Question

我想找到一个我放入chrome storage的标签名称。不同标签的名称由tabNames之后的数字标识。例如，存储中的选项卡名称将显示为tabNames1, tabNames2等。

当我尝试遍历选项卡以查找选项卡名称时，我无法使用变量来表示数字，并且会导致未定义。

我试图用for loop遍历所有选项卡名称，但如果我不能使用i代替1,2,3等，我不知道该怎么做。

编辑：包含更多代码

background.js

chrome.runtime.onInstalled.addListener(onInstall);
function onInstall()
{
    chrome.storage.local.set({"groupCount": 0});
}

chrome.commands.onCommand.addListener(storeTabs);

function storeTabs(command)
{
    if ("toggle-feature" == command)
    {
        chrome.storage.local.get("groupCount", function(group)
        {
            // current count of groups
            var groupCount = group.groupCount;

            var promptUser = prompt("Group name: ");

            if (promptUser != "" && groupCount != 0)
            {
                /* iterates through the names */
                for (var i = 0; i < groupCount; i++)
                {
                    chrome.storage.local.get(["groupName" + i], function(anotherGroup)
                    {
                        var groupName = anotherGroup["groupName" + i];
                        console.log("group: " + anotherGroup["groupName" + i]);

                        chrome.storage.local.get(null, function(items)
                        {
                            var allKeys = Object.keys(items);
                            console.log("storage: " + allKeys);
                        })
                        console.log("groupName: " + groupName);
                    })
                }
            }

            /* stores the number, name, and urls of the tabs, as well as the group name into an object for storage */
            else
            {
                var groupObject = {};

                /* stores all of the tab's information into an object and then puts object into storage */
                chrome.tabs.query({currentWindow: true}, function(tabs)
                {
                    /* gets each tab's name and url from an array of tabs and stores them into arrays */
                    var tabNamesArr = [];
                    var tabUrlsArr = [];
                    var tabCount = 0;

                    for (; tabCount < tabs.length; tabCount++)
                    {
                        tabNamesArr[tabCount] = tabs[tabCount].title;
                        console.log("title of tab: " + tabs[tabCount].title);
                        tabUrlsArr[tabCount] = tabs[tabCount].url;
                    }

                    var groupName = "groupName" + groupCount;
                    groupObject[groupName] = promptUser;

                    var tabNames = "tabNames" + groupCount;
                    groupObject[tabNames] = tabNamesArr;

                    var tabUrls = "tabUrls" + groupCount;
                    groupObject[tabUrls] = tabUrlsArr;

                    var tabCount2 = "tabCount" + groupCount;
                    groupObject[tabCount2] = tabCount;

                    // puts object into storage
                    chrome.storage.local.set(groupObject);

                    // set-up for next group so last group isn't overwritten
                    chrome.storage.local.set({"groupCount": (groupCount + 1)});
                })
            }
        })
    }
}

background.js console after calling command 3 times

group: undefined
background.js:68 storage: buttonCount,groupCount,groupName0,groupName1,tabCount0,tabCount1,tabNames0,tabNames1,tabUrls0,tabUrls1
background.js:63 group: undefined
background.js:68 storage: buttonCount,groupCount,groupName0,groupName1,groupName2,tabCount0,tabCount1,tabCount2,tabNames0,tabNames1,tabNames2,tabUrls0,tabUrls1,tabUrls2

Answer 1

问题是在i中声明的变量for (var i = 0; i < groupCount; i++)在chrome.storage.local.get(["groupName" + i], function(anotherGroup)中提供的异步回调运行之前在循环中发生变化。

所以，当你想要var groupName = anotherGroup["groupName" + i];等同于：

var groupName = anotherGroup["groupName0"];

它实际上等同于

var groupName = anotherGroup["groupName1"];

在您的示例中使用最少的代码更改来解决此问题的一种方法是使用bind在调用i时为chrome.storage.local.get创建具有固定值的匿名函数。

尝试改变

chrome.storage.local.get(["groupName" + i], function(anotherGroup)
{
    var groupName = anotherGroup["groupName" + i];
    console.log("group: " + anotherGroup["groupName" + i]);

    chrome.storage.local.get(null, function(items)
    {
        var allKeys = Object.keys(items);
        console.log("storage: " + allKeys);
    })
    console.log("groupName: " + groupName);
})

至

chrome.storage.local.get(["groupName" + i], function(i, anotherGroup)
{
    var groupName = anotherGroup["groupName" + i];
    console.log("group: " + anotherGroup["groupName" + i]);

    chrome.storage.local.get(null, function(items)
    {
        var allKeys = Object.keys(items);
        console.log("storage: " + allKeys);
    })
    console.log("groupName: " + groupName);
}.bind(this, i))

（请注意，只更新代码中的第一行和最后一行实际上是从原始示例代码中修改的。）