在我的Google Chrome扩展程序中，我试图在按下命令时在弹出窗口中创建按钮。在弹出窗口中，当没有按钮时，我可以显示一条消息，但是当我尝试添加按钮时，该按钮不会出现。
我正在使用document.createElement("button")和document.getElementById().appendChild()来创建按钮并将其附加到上一个按钮。
<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>
#button
{
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;
}
#button:hover
{
background: url('/images/btndark.png') no-repeat;
background-size:100% 100%;
border: none;
width:100%;
min-height:25px;
}
#buttons
{
font-family: Verdana,sans-serif;
}
document.addEventListener("DOMContentLoaded", function ()
{
/* checks and displays if storage is empty */
chrome.storage.local.get("groupCount", function(groups)
{
var totalGroups = groups.groupCount;
/* no buttons to be displayed */
if (totalGroups == 0)
{
document.getElementById("buttons").innerHTML = "<b> Empty! </b>";
document.getElementById("buttons").style.color = "grey";
}
/* creates the buttons */
else
{
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['' + i]; // displays name of the button
groupButton.name = "btn" + i;
groupButton.title = group["groupName" + i]; // name of the button
groupButton.onclick = openTabs(i, group);
// put button in popup
document.getElementById("buttons").appendChild(groupButton);
})
}
/* opens the group's tabs */
function openTabs(i, group)
{
var id = this.id;
id = id.replace("btn", '');
// opens first tab as an active tab
chrome.tabs.create({"url": group["tabUrl" + i][0], "active": true});
/* opens the rest of the tabs */
for (var j = 1; j < group["tabCount" + i]; j++)
{
chrome.tabs.create({"url": group["tabUrl" + i][j], "active": false}); // opens url of tab in the group
}
}