Key.Card/skript.js

// ==UserScript==
// @name     Key card
// @description Innovative and easy password generation
// @version  1.0
// @grant    none
// ==/UserScript==

// Configure me!
let spacebar = "test";
let keys = "ijklmnopqrstuvwxyz0123456789abcdefgh".split("");

// Whoa, below this line is the code, change at your own peril
const basic = "abcdefghijklmnopqrstuvwxyz0123456789".split("");
let card = basic.reduce((c, e, i) => {
    c[[e]] = keys[i];
    return c;
}, {".": ""});

addCSS = (css) => {
  var head, obj;
  head = document.getElementsByTagName('head')[0];
  if (!head) {
    return;
  }
  obj = document.createElement('style');
  obj.type = 'text/css';
  obj.innerHTML = css;
  head.appendChild(obj);
}
addJS = (js) => {
  var head, obj;
  head = document.getElementsByTagName('head')[0];
  if (!head) {
    return;
  }
  obj = document.createElement('script');
  obj.type = 'text/javascript';
  obj.innerHTML = js;
  head.appendChild(obj);
}

let domain = document.domain;
//console.log("Hello " + domain + ", I'm Key card.");

const convert_card = () => {
  let out = "[";
  for (let k in card) {
    let v = card[k];
    if (out != "[") {
      out += ",";
    }
    out += "[\"" + k + "\",\"" + v + "\"]";
  }
  out += "]";
  return out;
}

addCSS(`
.keycardmenu{
  position:absolute;
  top:55px;
  left:-450px;
  padding: 0.5em 1em;
  margin: 2em 0;
  width: 400px;
  background: #444444AA;
  border: solid 5px #00A182FF;
  border-radius: 14px;
  margin: 10px;
  padding: 10px;
  line-height: 1.3;
  overflow: auto;
  text-align: left;
  width: 450px;
  height: 130px;
  transition-duration: 0.5s;
}
.keycardmenu:hover{
	position:absolute;
  left:-20px;
}
`);
addJS(`
const card = new Map(${convert_card()});
const spacebar = "${spacebar}";
const copy2Clipboard = (data) => {
 navigator.clipboard.writeText(data);
 alert("Copied!");
};
const domain_name = "${domain}";
`);
addJS(`
const generate_pass = () => {
  let pass = "" + spacebar;
  for (let idx in domain_name) {
    let c = domain_name.at(idx);
    let v = card.get(c.toLowerCase());
    if (v) {
      pass += v;
    }
  }
  return pass;
};
`);
const my_bod = `
<div class="keycardmenu" oncopy="return false;" onselectstart="return false;" oncontextmenu="return false;">
  <h1>Key Card</h1><br>
  <p>Domain: ${domain}</p>
  <button onclick="copy2Clipboard(generate_pass())">Copy Password</button>
</div>
`;

document.body.innerHTML = my_bod + document.body.innerHTML;