ServiceNow - Better Background Scripts

Improve usability of Background Scripts (strongly inspired by SwissNOW)
目前為 2020-09-21 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name         ServiceNow - Better Background Scripts
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Improve usability of Background Scripts (strongly inspired by SwissNOW)
// @author       Ricardo Constantino <[email protected]>
// @match        https://*.service-now.com/sys.scripts.do
// @grant        none
// ==/UserScript==

(function () {
    'use strict';
    var forms = document.forms;
    if (forms.length < 1) return;

    let style = document.createElement('style');
    style.textContent = `
#better_bg_output {
  width: 80%;
  float: right;
  margin-left: 8px;
  border: thin solid black;
  margin-bottom: 16px;
  z-index: 10;
}

input[name="runscript"] {
  background-color: #337ab7;
  color: white;
  font-weight: bold;
  font-size: large;
  padding: 8px;
}

#better_bg_output iframe {
  width: 100%;
  height: 480px;
  border: none;
}

#better_bg_output.loading iframe {
  display: none;
}

#better_bg_output h4 {
  margin: 0px;
  font-family: sans-serif;
  font-weight: bold;
  display: block;
  text-align: center;
  padding: 3px;
  background: #e4f1fe;
  border-bottom: solid medium #0066a1;
  color: black;
  font-size: large;
}

form textarea {
  width: 80ch !important;
  display: block;
  height: 85vh;
  -moz-tab-size: 4;
  tab-size: 4;
}

#better_bg_output {
  top: 0.5em;
  position: absolute;
  right: 1em;
  width: calc(100vw - 80ch - 1em);
  height: calc(100vh - 4.5em);
  margin-left: 0;
  display: flex;
  flex-direction: column;
  min-height: 240px;
}

#better_bg_output iframe,
#better_bg_iframe {
  height: calc(100vh - 6.4em);
  width: 100%;
}

body > a {
  display: none;
}
hr {
  display: none;
}

#better_bg_loader {
  display: none;
}
.loading #better_bg_loader {
  margin: auto;
  display: block;
  width: 120px;
  height: 120px;
}
#better_bg_loader #loader {
  position: relative;
  width: 170px;
  height: 170px;
  border: 8px solid white;
  border-top: 8px solid #00a84f;
  border-bottom: 8px solid #87cc9c;
  top: -160px;
  left: -35px;
  border-radius: 50%;
  animation: spin 3s linear infinite;

}
#better_bg_loader svg {
  width: 120px;
  height: 133px;
  margin: auto;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

body > pre {
  display: none;
}
body {
  overflow: hidden;
}
body form {
  height: calc(100vh - 3em);
  margin: 0;
  padding: 0;
}

body form textarea {
  height: calc(100vh - 7em);
}
iframe {
  display: unset;
}
.loading iframe {
  display: none;
}
`;
    document.head.append(style);

    var divNode = document.createElement("div");
    divNode.id = 'better_bg_output';
    divNode.classList.add('loading');
    divNode.innerHTML = `
<h4>Script output</h4>
<div id='better_bg_loader'>
<svg version="1.1" viewBox="-10 0 100 100" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(-67.8 -97.5)">
  <g>
   <path d="m146 98.4c-24.7-4.07-46.5 6.95-57.7 18.8-18.1 19.1-25.5 45.1-17.7 78.4 14-9.78 23.6-39.1 27.1-55.3 3.41-15.8 16.8-42.8 48.3-41.9z" fill="#00a84f"/>
   <path d="m105 141c9.48-34.7 26.4-39.3 43.4-40.8 5.76 29.8-13.7 90.3-74 97.1 24.4-18.6 25.6-46.9 30.5-51.6 5.53-4.93 11.2-5.42 15-6.24 4.05-0.887 17.4-2.3 17.5-4.26 0.0639-2.26-28-0.0393-32.4 5.7z" fill="#87cc9c"/>
  </g>
 </g>
</svg>
<div id='loader'></div>
</div>
<iframe name='better_bg_iframe' id='better_bg_iframe'></iframe>
`;
    if (!document.getElementById('better_bg_output')) {
        document.body.appendChild(divNode);
    }

    let form = document.querySelector('form');
    form.target = "better_bg_iframe";
    form.addEventListener('submit', () => {
        document.querySelector('#better_bg_output').classList.add('loading');
    });

    document.querySelector('textarea').addEventListener('keypress', key => {
        if ((key.ctrlKey || key.metaKey) && key.code == "Enter")
            document.getElementsByName('runscript')[0].click();
    });
    document.querySelector('#better_bg_iframe').addEventListener('load', () => {
        document.querySelector('#better_bg_output').classList.remove('loading');
    });
})();