Question

我正在制作Chrome扩展程序，我有多个按钮可以打开不同的标签。不幸的是，由于某些原因，当我单击Seqta按钮时，它会打开选项卡3次，而在数学书籍中，它会打开选项卡两次。我不确定发生了什么问题，但是我将html和javascript放在了下面。

HTML

<!DOCTYPE html>
<html>
<head>


<style>


body{
  background-color: #263238;
  width: 300px;
  height: 500px;
}

</style>
</head>
<body>
  <div id="buttons">
    <div id="buttonDivSEQTA">
      <button type="button" class="button" id="seqta" >Seqta</button>
      <script src="popup.js"></script>
    </div>
    <div id="buttonDivMATH">
      <button type="button" class="button" id="maths">Maths Textbook</button>
      <script src="popup.js"></script>
    </div>
    <div id="buttonDivHASS">
      <button type="button" class="button" id="hass">HASS Textbook</button>
      <script src="popup.js"></script>
    </div>
  </div>
</body>
</html>

JavaScript

var button = document.getElementById("seqta");
button.addEventListener("click", function(){
    chrome.tabs.create({url:"https://learn.bcgs.wa.edu.au"});
});
var button = document.getElementById("maths");
button.addEventListener("click", function(){
    chrome.tabs.create({url:"https://jacplus.com.au"});
});
var button = document.getElementById("hass");
button.addEventListener("click", function(){
    chrome.tabs.create({url:"http://www.pearsonplaces.com.au/User_Login.aspx"});
});

如果有人能帮助我，那就太好了

Answer 1

您输入了多个脚本调用，将<script src="popup.js"></script>从正文中删除，并将其放在前面。

Answer 2

正如其他人所说，您的脚本被调用了三次。

您需要删除它们中的两个并将呼叫移至<head>部分，无论那里有什么。这是最常见的情况，因此您也可以确切知道脚本的位置，而不必在整个页面上搜索该脚本。

例如：

<head>
   <script src="popup.js"></script>
</head>

供参考：

<head>或<body>中的JavaScript

您可以在HTML文档中放置任意数量的脚本。可以将脚本放在HTML页面的<body>或<head>部分中，或同时放置在这两个页面中。

W3Schools

对于那些感兴趣的人，关于将jQuery / JavaScript脚本放在何处的讨论很旧-read it here

Javascript在Chrome扩展程序中打开多个标签页

2 个答案: