Javascript opening multiple tabs in chrome extension

Question

I am making a chrome extension and I have multiple buttons which open different tabs. Unfortunately for some reason when I click the Seqta button it opens the tab 3 times and with the maths book it opens the tab twice. I'm not sure what is wrong but I have put the html and javascript below.

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"});
});

It would be great if someone could help me out

You run your entire script 3 times so it registers the listeners multiple times. Remove the first two `` and move the last one right before `
`. — wOxxOm, Sep 18 '18 at 06:27

Bino · Answer 1 · 2018-09-18T09:09:09.867

1

You entered mutliple script calling, remove <script src="popup.js"></script> from the body and place it in right before .

edited Sep 18 '18 at 09:09

answered Sep 18 '18 at 06:33

Bino

744
15
22

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

As others say you have the script called three times.

You need to delete the two of them and move the call into the <head>-section with whatever is located there. It is the most common and also then you know exactly where your scripts are located and you doesn't have to search your entire page for the script.

For example:

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

For reference:

JavaScript in <head> or <body>

You can place any number of scripts in an HTML document. Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.

W3Schools

For those who are interested there is an old discussion on where to put the jQuery/JavaScript scripts - read it here

Javascript opening multiple tabs in chrome extension

2 Answers2