Javascript 如何制作一个chrome扩展，打开一个带有多个按钮的弹出菜单，在一个新选项卡中打开链接？

我正在尝试做一个简单的chrome扩展，弹出一个按钮菜单，所有这些按钮都指向在新选项卡中打开的链接，但是运气不好

这是我到目前为止的代码

提前谢谢你的帮助

popup.html

下一代网络中心
下一代网络中心
下一代网络抽搐信道

NGN网站链接

下一代网络捐赠页面

NGN推特帐户

版权所有©NGN 2016
身体{
背景图像：url（“https://s-media-cache-ak0.pinimg.com/736x/51/3e/4f/513e4f5274ec48f29b894b0b8409658f.jpg");
}
#标题{
背景色：rgb（9622272）；
文本对齐：居中；
填充：1px；
}
#页脚{
背景色：rgb（9622272）；
明确：两者皆有；
文本对齐：居中；
填充：1px；
}
#钮扣{
文本对齐：居中；
}
#钮扣{
文本对齐：居中；
}
#按钮{
文本对齐：居中；
}
#钮扣{
文本对齐：居中；
}
#抽搐{
颜色：#FFF；
背景色：蓝紫色；
边框宽度：3倍；
边框颜色：#FFF；
}
#抽搐：悬停{
颜色：蓝紫色；
背景色：#FFF；
边框宽度：3倍；
边框颜色：蓝紫色；
}
#网站{
颜色：黑色；
背景色：rgb（9622272）；
边框宽度：3倍；
边框颜色：黑色；
}
#网站：悬停{
颜色：rgb（9622272）；
背景色：黑色；
边框宽度：3倍；
边框颜色：rgb（9622272）；
}
#捐赠{
颜色：黑色；
背景色：rgb（0193204）；；
边框宽度：3倍；
边框颜色：黑色；
}
#捐赠：悬停{
颜色：rgb（0193204）；
背景色：黑色；
边框宽度：3倍；
边框颜色：rgb（0193204）；
}
#推特{
颜色：白色；
背景色：rgb（0，152，255）；
边框宽度：3倍；
边框颜色：白色；
}
#推特：悬停{
颜色：rgb（0、152、255）；
背景色：白色；
边框宽度：3倍
边框颜色：rgb（0、152、255）；
}

看一下，这里有一个完整的概述，并为您的问题提供了示例

为了让事情更清楚一点，您应该在清单中添加“tabs”权限，然后chrome.tabs api将对您可用，届时您将能够查询、打开和关闭chrome选项卡

例如：

chrome.tabs.create（{url:“您的站点url”}）

如何订阅点击事件

首先，我必须说有很多方法可以做到这一点，我在这里建议的方法肯定不是最佳实践，但只是用vanilla js简单地做到这一点。（让你开始）

NGN网站链接
var按钮=document.getElementById（“网站”）；
addEventListener（“单击”，函数（）{
//你的密码在这里。
创建（{url:“你的url”}）；
});

我希望这会有所帮助，但无论如何，您都应该看看jQuery\Angular。。或者任何其他可能帮助您的框架。
您到底遇到了什么问题？澄清将有助于我们，并有助于避免您的问题被否决。我有两个主要问题。A.当我加载扩展并单击链接按钮时，它们不会转到链接。B.我不确定如何在新选项卡中打开链接，我的原始答案是关于B的。明天我将尝试编辑我的原始答案。感谢对B的帮助。我现在需要的是找出如何将打开的选项卡代码放入按钮中。现在看一看，如果你发现答案有帮助，请将其标记为正确的答案。
<button type="button" id="website">NGN Website Link</button>

<script>
var button = document.getElementById("website");
button.addEventListener("click", function() {
    // Your code goes here.
    chrome.tabs.create({url: "your url"});
});
</script>