simple_toast.js

function GM_addStyle(css) {
  const style =
    document.getElementById("GM_addStyleBy8626") ||
    (function () {
      const style = document.createElement("style");
      style.type = "text/css";
      style.id = "GM_addStyleBy8626";
      document.head.appendChild(style);
      return style;
    })();
  const sheet = style.sheet;
  sheet.insertRule(css, (sheet.rules || sheet.cssRules || []).length);
}

function simpleToast(text) {
  // Get the SIMPLE-TOAST DIV
  const x =
    document.getElementById("simpleToast") ||
    (function () {
      GM_addStyle(`
        /* The SIMPLE-TOAST - position it at the bottom and in the middle of the screen */
        #simpleToast {
          visibility: hidden; /* Hidden by default. Visible on click */
          min-width: 250px; /* Set a default minimum width */
          margin-left: -125px; /* Divide value of min-width by 2 */
          background-color: MediumVioletRed; /* Background color */
          color: #fff; /* White text color */
          text-align: center; /* Centered text */
          border-radius: 2px; /* Rounded borders */
          padding: 16px; /* Padding */
          position: fixed; /* Sit on top of the screen */
          z-index: 1; /* Add a z-index if needed */
          left: 50%; /* Center the snackbar */
          bottom: 30px; /* 30px from the bottom */
          font-family: monospace;
          display: inline-flex;
          line-hight: 12px
        }`);
      GM_addStyle(`#simpleToast span {
        margin-left: 12px;
        margin-top: 2px;
      }`);

      /* Show the SIMPLE-TOAST when clicking on a button (class added with JavaScript) */
      GM_addStyle(`#simpleToast.show {
      visibility: visible; /* Show the SIMPLE-TOAST */
      /* Add animation: Take 0.5 seconds to fade in and out the SIMPLE-TOAST.
      However, delay the fade out process for 2.5 seconds */
      -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
      animation: fadein 0.5s, fadeout 0.5s 2.5s;
      }

      /* Animations to fade the SIMPLE-TOAST in and out */
      `);
      GM_addStyle(`@-webkit-keyframes fadein {
        from {bottom: 0; opacity: 0;}
        to {bottom: 30px; opacity: 1;}
      }`);
      GM_addStyle(`@keyframes fadein {
        from {bottom: 0; opacity: 0;}
        to {bottom: 30px; opacity: 1;}
      }`);
      GM_addStyle(`@-webkit-keyframes fadeout {
        from {bottom: 30px; opacity: 1;}
        to {bottom: 0; opacity: 0;}
      }`);
      GM_addStyle(`@keyframes fadeout {
        from {bottom: 30px; opacity: 1;}
        to {bottom: 0; opacity: 0;}
      }`);
      const snakebar = document.createElement("div");
      snakebar.id = "simpleToast";
      const span = document.createElement("span");
      snakebar.appendChild(span);
      document.body.appendChild(snakebar);
      return snakebar;
    })();
  // Add the "show" class to DIV
  x.className = "show";
  x.children[0].innerText = text;
  // After 3 seconds, remove the show class from DIV
  setTimeout(function () {
    x.className = x.className.replace("show", "");
  }, 3000);
}