Question

我正在尝试制作一个简单的Chrome扩展程序，弹出一个按钮菜单，这些按钮都会导致在新标签页中打开的链接，但没有运气。

这是我到目前为止的代码。

提前感谢您的帮助！

popup.html

<!doctype html>
<html>
<head>
    <title>NGN HUB</title>
    <script src="popup.js"></script>
</head>
<body>

    <div id="header">
    <h1>NGN HUB</h1>
    </div>

    <div id="buttonA">
        <p><button type="button" id="twitch" onClick="location.href='http://twitch.tv/newbgamingnetworks/'">NGN Twitch Channel</button></p>
    </div>
    <div id="buttonB">
        <p><button type="button" id="website" onClick="location.href='http://newbgamingnetworks.wix.com/newb-gaming-networks'">NGN Website Link</button></p>
        </div>
    <div id="buttonC">
        <p><button type="button" id="donate" onClick="location.href='http://newbgamingnetworks.wix.com/newb-gaming-networks#!donate/c1er4'">NGN Donation Page</button></p>
    </div>
    <div id="buttonD">
        <p><button type="button" id="twitter" onClick="location.href='http://www.twitter.com/NewbgamingN/'">NGN Twitter Account</button></p>
    </div>
        <div id="footer">
            Copyright © NGN 2016

</body>
<style>
    body {
        background-image: url("https://s-media-cache-ak0.pinimg.com/736x/51/3e/4f/513e4f5274ec48f29b894b0b8409658f.jpg");
    }
    #header {
        background-color:rgb(96, 222, 72);
        text-align:center;
        padding:1px;
    }
    #footer {
        background-color:rgb(96, 222, 72);
        clear:both;
        text-align:center;
        padding:1px;
    }
    #buttonA {
        text-align:center;
    }
    #buttonB {
        text-align:center;
    }
    #buttonC {
        text-align:center;
    }
    #buttonD {
        text-align:center;
    }
    #twitch {
        color: #FFF;
        background-color:blueviolet;
        border-width:3px;
        border-color: #FFF;
    }
    #twitch:hover {
        color: blueviolet;
        background-color: #FFF;
        border-width:3px;
        border-color:blueviolet;
    }
    #website {
        color:black;
        background-color:rgb(96, 222, 72);
        border-width:3px;
        border-color:black;
    }
    #website:hover {
        color:rgb(96, 222, 72);
        background-color:black;
        border-width:3px;
        border-color:rgb(96, 222, 72);
    }
    #donate {
        color:black;
        background-color:rgb(0, 193, 204);;
        border-width:3px;
        border-color:black;
    }
    #donate:hover {
        color:rgb(0, 193, 204);
        background-color:black;
        border-width:3px;
        border-color:rgb(0, 193, 204);
    }
    #twitter {
        color:white;
        background-color:rgb(0, 152, 255);
        border-width:3px;
        border-color:white;
    }
    #twitter:hover {
        color:rgb(0, 152, 255);
        background-color:white;
        border-width:3px
        border-color:rgb(0, 152, 255);
    }
</style>
</html>

Answer 1

请查看chrome.tabs documentation，其中包含您的问题示例的完整概述。

为了让事情更清楚一点，您应该在清单中添加“tabs”权限，然后chrome.tabs api将可供您使用，一旦发生这种情况，您将能够查询，打开并关闭镀铬标签。

例如：

chrome.tabs.create({url: "your site url"});

如何订阅点击事件

首先我必须说有很多方法可以做到这一点，我在这里建议的方式绝对不是最好的做法，而只是用vanilla js做的简单方法。（让你入门）

<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>

我希望有所帮助，但你应该看看jQuery \ Angular ..或任何其他可能对你有帮助的框架。

如何制作一个chrome扩展程序，打开一个带有多个按钮的弹出菜单，在新标签页中打开链接？

1 个答案: