Question

我无法在google-chrome扩展名的弹出窗口中显示按钮。当用户创建一个按钮时，我可以显示一个按钮，但是不能显示多个按钮。

我试图使用document.querySelectorAll和document.getElementById().appendChild()在button中选择所有名为popup.html的ID，然后将新按钮附加到现有按钮上。 / p>

popup.html

<html>
    <head>
        <script type = "text/javascript" src = "popup.js"></script>
        <link rel = "stylesheet" type = "text/css" href = "popup.css">
    </head>
    <body>
        <div id = "buttons"></div>
    </body>
</html>

popup.js

document.addEventListener("DOMContentLoaded", function ()
{
    /* checks and displays if storage is empty */
    chrome.storage.local.get("groupCount", function(groups)
    {
        var totalGroups = groups.groupCount;

        if (totalGroups == 0)
        {
            document.getElementById("buttons").innerHTML = "<b> Empty! </b>";
            document.getElementById("buttons").style.color = "grey";
        }
    })

    /* loops through divs that contain the button id to go through buttons */
    var buttons = document.querySelectorAll("#buttons");
    for (var i = 0; i < buttons.length; i++) 
    {
        buttonss[i].addEventListener("click", createButtons);
    }
})

/* creates the buttons */
function createButtons()
{
    chrome.storage.local.get("groupCount", function(groups)
    {
        var totalGroups = groups.groupCount;

        for (var i = 0; i < totalGroups; i++)
        {
            getGroup(i);
        }
    })
}

/* creates and adds the button to the list */
function getGroup(i)
{
    chrome.storage.local.get(["groupName" + i, "tabName" + i, "tabUrl" + i, "tabCount" + i, "groupCount" + i], function(group)
    {
        var groupButton = document.createElement("button");
        groupButton.id = "btn" + i;   // button id
        groupButton.type = "button";
        groupButton.innerHTML = group["groupName" + i];   // displays name of the button
        groupButton.name = "btn" + i;
        groupButton.title = group["groupName" + i];   // name of the button
        // put button in popup
        document.getElementById("buttons").appendChild(groupButton);
    })
}

popup.css

#buttons
{
    cursor: pointer;
    display: inline-block;
    border: 1px solid #dbdbdb;
    border-radius: 3px;
    border-color: lightblue;
    background-color: white;

    padding: 24px 32px 24px 60px;
    font-size: 12px;
    font-family: Verdana, sans-serif;
    text-align: center;
    text-decoration: none;
}

#buttons:hover 
{
    background: #aaaaaa;
}

Chrome扩展程序：无法在弹出窗口中填充多个按钮

0 个答案: