Key.Card/skript.js

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

// Configure me!
let card = {".": "", "a": "b", "b": "a", "c": "d", "d": "c", "e": "f", "f": "e", "g": "h", "h": "g", "i": "j", "j": "i", "l": "m", "m": "l", "n": "o", "o": "n", "p": "q", "q": "p", "r": "s", "s": "r", "t": "u", "u": "t", "v": "y", "y": "v", "x": "z", "z": "x", "0": "1", "1": "0", "2": "3", "3": "2", "4": "5", "5": "4", "6": "7", "7": "6", "8": "9", "9": "8"};
let spacebar = "test";

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;