Tampermonkey script for secret server launch list

Secret_Server_Launch_List.js

// ==UserScript==
// @name         Secret Server Launch List
// @namespace    http://tampermonkey.net/
// @version      1.0.1
// @description  Add a list of hosts your can choose from the secret server launcher UI
// @author       nickadam
// @match        https://*.secretservercloud.com/app/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=secretservercloud.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';


const getServerList = () => {
  let serverList = localStorage.getItem('serverList')
  if(!serverList){
    serverList = `server1.example.com
server2.example.com`
  }
  return serverList
}

const selectFunc = () => {
  const serverList = document.getElementById('serverList')
  const enterComputer = document.getElementById('thyinput-EnterComputer') || document.getElementById('thyinput-EnterHost')
  const value = serverList.options[serverList.selectedIndex].value
  enterComputer.value = value
  if(!value){ return }
  enterComputer.dispatchEvent(new Event("input"))
}

const setServerListSelectOptions = serverListSelect => {
  // remove all non-blank elements
  while(serverListSelect.childNodes.length > 1){
    serverListSelect.childNodes[1].remove()
  }

  // add first blank element
  if(!serverListSelect.options.length){
    const blankOpt = document.createElement('option')
    serverListSelect.appendChild(blankOpt)
    blankOpt.value = ''
    blankOpt.innerHTML = ''
  }

  // add the servers
  getServerList().split(/\s+/).filter(x => !!x).forEach(x => {
    const option = document.createElement('option')
    option.value = x
    option.innerHTML = x
    serverListSelect.appendChild(option)
  })
}

const cancelEditFunc = () => {
  const listEditor = document.getElementById('listEditor')
  listEditor.value = getServerList()
  document.getElementById('serverList').hidden = false
  document.getElementById('editLabel').hidden = false
  document.getElementById('listEditor').hidden = true
  document.getElementById('saveLabel').hidden = true
  document.getElementById('cancelLabel').hidden = true
}

const saveFunc = () => {
  const listEditor = document.getElementById('listEditor')
  localStorage.setItem('serverList', listEditor.value)
  document.getElementById('serverList').hidden = false
  document.getElementById('editLabel').hidden = false
  document.getElementById('listEditor').hidden = true
  document.getElementById('saveLabel').hidden = true
  document.getElementById('cancelLabel').hidden = true
  const serverListSelect = document.getElementById('serverList')
  setServerListSelectOptions(serverListSelect)
}

const inputLabel = document.createElement('span')
inputLabel.style = 'position: absolute;'
inputLabel.innerHTML = 'Choose from list:'

const saveLabel = document.createElement('span')
saveLabel.setAttribute('id', 'saveLabel')
saveLabel.style = 'position: absolute; margin-top: 1.2em; cursor: pointer;'
saveLabel.innerHTML = 'Save'
saveLabel.onclick = saveFunc
saveLabel.hidden = true

const cancelLabel = document.createElement('span')
cancelLabel.setAttribute('id', 'cancelLabel')
cancelLabel.style = 'position: absolute; margin-top: 1.2em; margin-left: 3em; cursor: pointer;'
cancelLabel.innerHTML = 'Cancel'
cancelLabel.onclick = cancelEditFunc
cancelLabel.hidden = true

const editLabel = document.createElement('span')
editLabel.setAttribute('id', 'editLabel')
editLabel.style = 'position: absolute; margin-top: 1.2em; cursor: pointer;'
editLabel.innerHTML = 'Edit list'
editLabel.onclick = () => {
  document.getElementById('serverList').hidden = true
  document.getElementById('editLabel').hidden = true
  document.getElementById('listEditor').hidden = false
  document.getElementById('saveLabel').hidden = false
  document.getElementById('cancelLabel').hidden = false
}

const listEditor = document.createElement('textarea')
listEditor.style = 'height: 10em; width: 71%; margin-left: 29%;'
listEditor.setAttribute('id', 'listEditor')
listEditor.classList.add('mat-tooltip-trigger')
listEditor.classList.add('thy-input')
listEditor.classList.add('ng-pristine')
listEditor.classList.add('ng-valid')
listEditor.classList.add('ng-star-inserted')
listEditor.classList.add('ng-touched')
listEditor.value = getServerList()
listEditor.hidden = true

const serverListSelect = document.createElement('select')
serverListSelect.style = 'width: 71%; margin-left: 29%;'
serverListSelect.setAttribute('id', 'serverList')
serverListSelect.setAttribute('name', 'serverList')
serverListSelect.classList.add('mat-tooltip-trigger')
serverListSelect.classList.add('thy-input')
serverListSelect.classList.add('ng-pristine')
serverListSelect.classList.add('ng-valid')
serverListSelect.classList.add('ng-star-inserted')
serverListSelect.classList.add('ng-touched')
serverListSelect.onchange = selectFunc
setServerListSelectOptions(serverListSelect)

// put it all together
const serverListDiv = document.createElement('div')
serverListDiv.appendChild(inputLabel)
serverListDiv.appendChild(editLabel)
serverListDiv.appendChild(saveLabel)
serverListDiv.appendChild(cancelLabel)
serverListDiv.appendChild(listEditor)
serverListDiv.appendChild(serverListSelect)

function addInput() {
  setTimeout(() => {
    const enterComputer = document.getElementById('thyinput-EnterComputer') || document.getElementById('thyinput-EnterHost')
    enterComputer
      .parentElement
      .parentElement
      .parentElement
      .parentElement
      .parentElement
      .parentElement
      .parentElement
      .parentElement
      .parentElement
      .after(serverListDiv)
    selectFunc()
  }, 300)
}

function handleMutation(mutations) {
  try {
    for (let mutation of mutations) {
      for (let elem of mutation.addedNodes) {
        const launcherPrompt = document.querySelector('#launch-now-button')
        if(!launcherPrompt){ return }

        if(launcherPrompt.inputAdded){ return }

        addInput()
        launcherPrompt.inputAdded = true
      }
    }
  } catch(e) {}
}


const observer = new MutationObserver(handleMutation)
observer.observe(document, { attributes: true, childList: true, subtree: true })

})();

The list is stored in the browser's local storage.