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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Chrome扩展程序:chrome存储无法识别obj [“name”+ i]相关的知识,希望对你有一定的参考价值。

我想找到一个我放入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
答案

问题是在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))

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

以上是关于Chrome扩展程序:chrome存储无法识别obj [“name”+ i]的主要内容,如果未能解决你的问题,请参考以下文章

Chrome扩展程序的chrome对象属性未定义

如何使用 WebStorm 进行 Chrome 扩展开发?

Chrome 在哪里存储扩展程序?

Chrome 扩展程序无法访问 chrome://extension-icon

Chrome 扩展程序是不是可以访问本地存储?

我应该只使用IndexedDB还是同时使用IndexedDB和chrome.storage?