$(function() { //Starts the function
    var menu = $("#highlight_menu_div")[0].shadowRoot.querySelector("#highlight_menu"); //Creates a variable to hold the menu element
    $(document.body).on('mouseup', function() { //When the user releases the mouse click after selecting something

      if (document.getSelection().toString() !== '') { //If the user selected something
        var p = document.getSelection().getRangeAt(0).getBoundingClientRect(); //Create a new variable to get the positions later
        menu.css({ //Set the menu css
          left: (p.left + (p.width / 2)) - (menu.width() / 2), //Make the menu show on the correct left position
          top: (p.top - menu.height() - 10), //Make the menu show on the correct top position
          display: '' //Show the menu on the page
        }).animate({ //Creates the animation animation
          opacity: 1 //Set the animation opacity
        }, 0); //Add an animation to the menu

        menu.addClass('highlight_menu_animate'); //Add the class to animate the menu
        $('head').append('<style>.highlight_menu_animate .popuptext::after { content: ""; height: 35px; top: 100%; left: 50%; margin-left: -10px; border-width: 10px; position: absolute; border-style: solid; border-color: #292929 transparent transparent transparent; }</style>'); //Create a class to animate the menu
        return; //Keep displaying the menu box
      } //Finishes the if condition
      menu.animate({ //Creates the animation animation
        opacity: 0 //Set the animation opacity
      }); //Hide the menu If the user clicked on any of the options
    }); //Finishes the mouseup advent listener
  }); //Finishes the function


  var el = document.createElement('div');
  el.setAttribute("id", "highlight_menu_div");

el.attachShadow({ mode: 'open' }).innerHTML = '<div id="highlight_menu" style="width: 110px; display:none; color: #fff; position: fixed; background-color: #292929; font-size: 13.4px; font-family: monospace;box-sizing: unset; z-index: 999;"> <ul style="font-size: unset; margin-left: unset; margin-bottom: unset; margin-inline-end: unset; margin-inline-start: unset;  margin-block-end: 10px;  margin-block-start: unset; padding-left: 7px; padding-right: 7px; margin-top:10px;"><li class="popuptext" id="SearchBTN" style="cursor: pointer; display: inline; padding: unset; background-color: unset; font-size: unset; line-height: unset;">Search</li><li class="popuptext" id="CopyBTN" style="cursor: pointer; display: inline; padding: unset; background-color: unset; font-size: unset; line-height: unset;"> | Copy</li></ul></div>';


document.body.appendChild(el);