Javascript在chrome扩展中打开多个标签

问题描述 投票:0回答:2

我正在制作镀铬扩展程序,我有多个按钮可以打开不同的标签。不幸的是,由于某种原因,当我单击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"});
});

如果有人可以帮助我,那就太好了

javascript html google-chrome google-chrome-extension
2个回答
1
投票

正如其他人所说,你有三次调用脚本。

您需要删除其中的两个并将调用移动到<head>-section中,其中包含任何位置。它是最常见的,然后您确切地知道脚本的位置,并且您不必在整个页面中搜索脚本。

例如:

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

以供参考:

<head><body>中的JavaScript

您可以在HTML文档中放置任意数量的脚本。脚本可以放在<body>中,也可以放在HTML页面的<head>部分中,或者放在两者中。

W3Schools


对于那些感兴趣的人,有一个关于在哪里放置jQuery / JavaScript脚本的旧讨论 - read it here


1
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.