Listbox selected item button click open link from value

Question

I am trying to create an extension for Safari browser that will add a bar(.html) with a listbox of several links and a button. When I click on the button the selected item (e.g. link) from the listbox will open in a new tab.

If item Microsoft is selected and user click on button Open it will open www.microsoft.com in a new tab.

I have tried with the two functions selectedLink below, but neither seems to work. I might be doing it wrong though.

The other function openInTab is needed since I am working with a Safari extension, in case someone wonders why I am not using window.open.

<html>
<head>
  <title>Links</title>
  <select id="selectbox" name="" onchange="selectedLink(this);" ;>
    <option value="https://www.google.com" selected>Google</option>
    <option value="https://www.microsoft.com">Microsoft</option>
    <option value="https://www.apple.com">Apple</option>
  </select>
  <button onclick="openInTab(pSelect);">Open</button>
  <script type="text/javascript">
    function selectedLink(getLink) {
      var pSelect = getLink.value;
    }

    function selectedLink(getLink) {
      var selectIndex = getLink.selectedIndex;
      var selectValue = getLink.options[selectIndex].text;
      var pSelect = selectValue;
    }

    function openInTab(source) {
      var newTab = safari.self.browserWindow.openTab();
      newTab.url = source;
    }
  </script>
</head>
</html>

Returns:

ReferenceError: Can't find variable: pSelect

Answer 1

You do not need to pass that in the function. Simply use the id of the select element to get the selected value.

Try the following way:

function openInTab() {
  var pSelect = document.getElementById('selectbox').value;
  console.log(pSelect)
  //var newTab = safari.self.browserWindow.openTab();
  //newTab.url = pSelect;
}

<html>
<head>
  <title>Links</title>
  <select id="selectbox" name="";>
    <option value="https://www.google.com" selected>Google</option>
    <option value="https://www.microsoft.com">Microsoft</option>
    <option value="https://www.apple.com">Apple</option>
  </select>
  <button onclick="openInTab();">Open</button>
  <script type="text/javascript">
    
  </script>
</head>
</html>

Answer 2

Try this instead. If you want to use

var newTab = safari.self.browserWindow.openTab();
newTab.url = source;

then go ahead. What I did just to solve your pSelect error and get the variable needed.

function openInTab() {
      var source = document.getElementById('selectbox').value;
      console.log(source);
      var newTab = window.open(source, '_blank');
    }

<html>
<head>
  <title>Links</title>
  <select id="selectbox">
    <option value="https://www.google.com" selected>Google</option>
    <option value="https://www.microsoft.com">Microsoft</option>
    <option value="https://www.apple.com">Apple</option>
  </select>
  <button onclick="openInTab();">Open</button>
</head>
</html>