Question

我是第一次开发chrome扩展程序。这是相对简单的，我要做的就是单击按钮后在新选项卡中打开网页。但是我不确定在没有JavaScript的情况下如何执行此操作，因为我知道chrome会阻止内联<script>元素（或类似的东西）。以下是我的popup.html。

<!DOCTYPE html>
<html>
<head>


<style>

.button {
    position: relative;
    background-color: #4F5B62;
    border: none;
    font-size: 28px;
    font-family: "Roboto Mono";
    font-weight: lighter;
    color: #FFFFFF;
    opacity: 0.6;
    padding: 20px;
    width: 200px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    border-radius: 12px;
}

.button:hover{
  opacity: 1;
}

.button:after {
    content: "";
    background: #f1f1f1;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px !important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}

.button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}

body{
  background-color: #263238;
}

head{
  background-color: #263238;
}
</style>
</head>
<body>


<button type="button" class="button">Access chatter</button>

</body>
</html>

任何帮助将不胜感激。

Answer 1

manifest.json

首先，您需要在chrome.tabs中添加使用manifest.json API的权限。

{
   ...
   "permissions": ["tabs"],
   ...
}

popup.html

然后，您可以在按钮上添加一个ID，并在popup.js标签底部添加<body>脚本。

<body>
   <button type="button" class="button" id="btn1">Access chatter</button>
   <script src="popup.js"></script>
</body>

popup.js

最后在脚本中添加按钮动作。

使用原始JavaScript

var button = document.getElementById("btn1");
button.addEventListener("click", function(){
    chrome.tabs.create({url:"http://www.google.com/"});
});

使用jQuery

如果使用jQuery，请确保在popup.js上方添加相应的脚本。

$('#btn1').click(function() {
   chrome.tabs.create({url:"http://www.google.com/"});
});

Answer 2

在这里您可以了解有关chrome扩展https://developer.chrome.com/extensions/getstarted的入门知识

在这里您可以看到有关创建新标签https://developer.chrome.com/extensions/tabs#method-create

的参考

Chrome Web Extension，使用按钮在新标签页中打开网页

2 个答案:

manifest.json

popup.html

popup.js

使用原始JavaScript

使用jQuery