'How do I insert html into the body of a page for a bookmarlet

I'm trying to make a bookmarklet for a game mod it includes a UI and I'm not sure how I can make it into a working bookmarklet where your UI would overlay on the screen. I need all the scripts and everything to work correctly as a bookmark I think I could append it but im not sure how.

Here is the html:

<style>
#UIframe{
  font-family:Helvetica,Sans-serif;
  background-color:#191919;
  width: 500px;
  height: 283px;
  color: white;
  position: fixed;
  display: inline-block;
  padding: 4px;
  border: 1px solid black;
  border-radius: 10px;
  top: 180px;
  left: 450px;
  text-align: center;
  overflow: auto;
}
#header{
  background: #545454;
  height: 30px;
  border-radius: 10px;
}
a {
  text-decoration:none;
  color:#FFF;
}
button{
  background: #191919;
  border: 1px solid white;
  color: white;
  padding: 7px;
  margin: 2px;
  cursor: pointer;
  border-radius:5px;
  text-transform:uppercase;
  font-weight:bold;
}
#title{
font-family:arial black;
font-size: 20px;
margin: 5px;
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent; 
 animation: move 35s linear infinite;
}
@keyframes move {
    to {
        background-position: 2000vh;
    }
}
button:after{
  content:attr(alt);
  background-color:#191919;
}
button:hover{
 animation:slidebg 2s linear infinite;
}
@keyframes slidebg {
  to {
    background-position:20vw;
  }
}

.code{
  display: none;
}


button:hover .code{
  display: block;
}

#script, #script-1, #script-2, #script-3 {
  text-transform: none;
  background-color: white;
  color: black;
  border-radius: 2px;
  padding: 0.5px;
}
</style>

  
  
  
  <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>


</head>

<body translate="no" >
  <div id="UIframe">
  <div id="header">
    <t id="title">Cookie Clicker Hack</t>
  </div>
 <a> 
  <button onclick="copyEvent('script')">Add Cookies
   <div class="code">
     <t id="script">Game.cookies= Game.cookies + cookie amount;</t>
   </div>
   </button>
  <button onclick="copyEvent('script-1')">Ascend
   <div class="code">
     <t id="script-1">Game.Ascend(1);</t>
    </div>
    </button>
  <button onclick="copyEvent('script-2')">Build Ascend Tree
    <div class="code">
      <t id="script-2">Game.BuildAscendTree();</t>
   </div>
    </button>
  <button onclick="copyEvent('script-3')">Calculate Gains
    <div class="code">
      <t id="script-3">Game.CalculateGains();</t>
   </div>
    </button>
  <button onclick="copyEvent('script-4')">Change Ascend Timer
    <div class="code">
      <t id="script-4">Game.AscendTimer=time;</t>
   </div>
    </button>
  <button id="ChangeMilk">Change Milk
    <div class="code">
      <input type="text" value="Game.Milk = <amount>;" id="text-input">
   </div>
    </button>
  <button id="MilkProg">Change Milk Progress
    <div class="code">
      <input type="text" value="Game.milkProgress = <milk amount>;" id="text-input">
   </div>
    </button>
  <button id="CookiePerClick">Change Cookies per Click
    <div class="code">
      <input type="text" value="Game.computedMouseCps=<mouse cookies per second amount>;" id="text-input">
   </div>
    </button>
  <button id="Shimmers">Remove Shimmers
    <div class="code">
      <input type="text" value="Game.killShimmers();" id="text-input">
   </div>
    </button>
  <button id="Dragon">Set Dragon Level
    <div class="code">
      <input type="text" value="Game.dragonLevel=<level>;" id="text-input">
   </div>
    </button>
  <button id="Santa">Set Santa Level
    <div class="code">
      <input type="text" value="Game.santaLevel=<level>;" id="text-input">
   </div>
    </button>
  <button id="SetCookie">Set Cookie Count
    <div class="code">
      <input type="text" value="Game.Earn(<cookie amount>);" id="text-input">
   </div>
    </button>
  <button id="CookiePerSec">Cookies Per Second<data-copytarget="text-input1">
    <div class="code">
      <input type="text" value="Game.cookiesPs=<cookies per second amount>;" input id="#text-input1">
   </div>
    </button>
  <button id="UnlockAllAch">Unlock All Achievements
    <div class="code">
      <input type="text" value="Game.SetAllAchievs(1);" id="text-input">
   </div>
    </button>
  <button id="UnlockAnAch">Unlock an Achievement
    <div class="code">
      <input type="text" value="Game.Win(‘<achievement name>’);" id="text-input">
   </div>
    </button>
  <button id="UnlockAll">Unlock All
    <div class="code">
      <input type="text" value="Game.RuinTheFun(1);" id="text-input">
   </div>
    </button>
   </a>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
      <script id="rendered-js" >
dragElement(document.getElementById("UIframe"));

function dragElement(elmnt) {
  var pos1 = 0,pos2 = 0,pos3 = 0,pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    // if present, the header is where you move the DIV from:
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    // otherwise, move the DIV from anywhere inside the DIV:
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = elmnt.offsetTop - pos2 + "px";
    elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
  }

  function closeDragElement() {
    // stop moving when mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

// copy code

function copyEvent(id)
{
  var str = document.getElementById(id);
  window.getSelection().selectAllChildren(str);
  document.execCommand("Copy");
}
//# sourceURL=pen.js
    </script>

  

  <script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-4793b73c6332f7f14a9b6bba5d5e62748e9d1bd0b5c52d7af6376f3d1c625d7e.js"></script>
</body>

</html>
javascripthtmlbookmarklet


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions