Chrome扩展程序：存储正确的信息时，无法在弹出窗口中显示按钮

Question

对于我的Chrome扩展程序，我要存储标签信息，例如标签名称，标签URL等，然后将其全部存储。在弹出窗口中，我显示能够创建这些选项卡的按钮，并具有一个按钮计数器来跟踪按钮的数量。

当我删除按钮时，存储会正确更新，但是无法显示正确数量的按钮。例如，如果有4个按钮，而我删除了第一个按钮，则弹出窗口中只会显示2个按钮。

• groupCount：按钮数（不包括“垃圾箱”按钮）
• tabNames，tabUrls，tabCount（例如：tabNames1）之后的数字表示该按钮属于哪个按钮，按钮编号从0开始。

按下全部4个按钮后，

console.log：

// after displaying all the buttons, storage: groupCount,groupName0,groupName1,groupName2,groupName3,
   //tabCount0,tabCount1,tabCount2,tabCount3,tabNames0,tabNames1,tabNames2,tabNames3,tabUrls0,tabUrls1,
   //tabUrls2,tabUrls3
// popup.js:34 after displaying all the buttons, groupCount: 4

删除第一个按钮后

console.log

// after displaying all the buttons, storage: groupCount,groupName1,groupName2,groupName3,
   //tabCount1,tabCount2,tabCount3,tabNames1,tabNames2,tabNames3,tabUrls1,tabUrls2,tabUrls3
// popup.js:34 after displaying all the buttons, groupCount: 3

popup.js

// calls function to populate buttons for popup
insertButtons();

/* Inserts buttons into popup */
function insertButtons()
{
    var groupCount;

    chrome.storage.local.get("groupCount", function(group)
    {
        groupCount = group.groupCount;

        /* checks if there are no buttons */
        if (groupCount == 0)
        {
            document.getElementById("groupButtons").innerHTML = "Empty!";
            document.getElementById("groupButtons").style.color = "blue";
            document.getElementById("groupButtons").style.fontWeight = "900";
        }
        /* creates the buttons */
        else
        {
            for (var i = 0; i < groupCount; i++)
            {
                getStorage(i);
            }

            /* debugging */
            chrome.storage.local.get(null, function(items) 
            {
                var allKeys = Object.keys(items);
                console.log("after displaying all the buttons, storage: " + allKeys);
            });
            chrome.storage.local.get("groupCount", function(groups)
            {
                console.log("after displaying all the buttons, groupCount: " + groups.groupCount);
            })
        }
    })
}

function getStorage(i)   // i == groupCount
{
    chrome.storage.local.get(["groupName" + i, "tabCount" + i, "tabUrls" + i], function(group)
    {
        /* checks  if storage is empty or if a group was deleted */
        if (group["groupName" + i] == null)
        {
            console.log("empty");
            return;
        }

        /* tab button */
        var groupButton = document.createElement("button");
        /* set css of button */
        groupButton.type = "button";
        groupButton.innerHTML = group["groupName" + i];   // displays name of the button
        // puts button in popup
        document.getElementById("groupButtons").appendChild(groupButton);

        /* opens tabs if button is clicked */
        groupButton.onclick = function()
        {
            /* opens the tabs */
            for (var j = 0; j < group["tabCount" + i]; j++)
            {
                chrome.tabs.create({"url": group["tabUrls" + i][j], "active": false});   // opens url of tab in the group
            }
        }

        /* trash button */
        var trashButton = document.createElement("button");
        //trashButton.type = "trashButton";
        trashButton.innerHTML = "Trash";
        // appends button to corresponding tab button
        document.getElementById("groupButtons").appendChild(trashButton);

        /* deletes group if trash icon is clicked  */
        trashButton.onclick = function()
        {
            var confirmDelete = confirm("Are you sure you want to delete the selected categories?\n\n");
            if (confirmDelete)
            {
                // removes the group name, tab names, tab urls, and number of tabs from storage
                chrome.storage.local.remove(["groupName" + i, "tabNames" + i, "tabUrls" + i, "tabCount" + i]);

                chrome.storage.local.get("groupCount", function(group)
                {
                    var resetGroupCount = group.groupCount - 1;
                    // subtract one from groupCount for removal of a group
                    chrome.storage.local.set({"groupCount": resetGroupCount});
                })
                window.location.reload();
            }
        }
    })
}

Answer 1

尝试将window.location.reload();移至回调中以更新groupCount：

            chrome.storage.local.get("groupCount", function(group)
            {
                var resetGroupCount = group.groupCount - 1;
                // subtract one from groupCount for removal of a group
                chrome.storage.local.set({"groupCount": resetGroupCount}, function(s){
                    window.location.reload();
                });
            })