javascript:(function() {
 /* Global variables. */
 var noteBoxDomTakePageNotes = /* use this to check that element does not exist - no duplicates  */
  document.getElementById("noteBoxDomTakePageNotes");
 
 var noteContainerDomTakePageNotes = /* container holding notebox and button */
  document.getElementById("noteContainerDomTakePageNotes");
 
 var styleTagDomTakePageNotes = /* use this to check that element does not exist - no duplicates */
  document.getElementById("styleTagDomTakePageNotes");
 
 var toggleBtnDomTakePageNotes = /* toggle button to show/hide notebox */
  document.getElementById("toggleBtnDomTakePageNotes");
 
 var styleDomTakePageNotes = /* style applied to bookmarklet */
 `
  #noteContainerDomTakePageNotes {
   z-index: 10000;
   display: inline-block;
   position: fixed;
   top: 100px;
   left: 100px;
   width: auto !important;
   height: auto !important;
   background: #ffffff;
   border: 2px solid #d3d3d3;
   border-radius: 10px;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
   padding: 5px;
   cursor: move;
  }
  #noteContainerDomTakePageNotes[data-collapsed="true"] {
   width: auto;
   padding: 0px;
  }
  #toggleBtnDomTakePageNotes {
   display: block;
   position: relative;
   width: 25px;
   height: 25px;
   border: none;
   border-radius: 5px;
   background: #04AA6D;
   color: white;
   cursor: pointer;
   text-align: center;
   font-size: 16px;
   font-weight: bold;
   margin: 0;
   padding: 0;
  }
  #toggleBtnDomTakePageNotes:hover {
   background: #038859;
   border: 2px solid #060606;
  }
  #noteBoxDomTakePageNotes {
   display: block;
   width: 350px;
   height: 200px;
   border: 1px solid #d3d3d3;
   border-radius: 5px;
   padding: 10px;
   margin-top: 5px;
   resize: both;
   overflow: auto;
   font-family: Arial, sans-serif;
   font-size: 14px;
   box-sizing: border-box;
  }
  #noteContainerDomTakePageNotes[data-collapsed="true"] #noteBoxDomTakePageNotes {
   display: none !important;
  }
 `;
 
 /* Variables for dragging functionality */
 var isDraggingDomTakePageNotes = false;
 var offsetXDomTakePageNotes = 0;
 var offsetYDomTakePageNotes = 0;
 
 /************************************* SUPPORT FUNCTIONS *************************************/
 /* Create the notebox textarea element. */
 const createNoteBoxDomTakePageNotes = () => {
  let noteBox = document.createElement("textarea");
  noteBox.setAttribute("id", "noteBoxDomTakePageNotes");
  noteBox.setAttribute("placeholder", "Take your notes here...");
  return noteBox;
 };
 
 /* Create the toggle button element. */
 const createToggleBtnDomTakePageNotes = () => {
  let btn = document.createElement("button");
  btn.setAttribute("id", "toggleBtnDomTakePageNotes");
  btn.innerHTML = "x";
  return btn;
 };
 
 /* Create the container holding all elements. */
 const createContainerDomTakePageNotes = () => {
  let container = document.createElement("div");
  container.setAttribute("id", "noteContainerDomTakePageNotes");
  container.setAttribute("data-collapsed", "false");
  return container;
 };
 
 /* Add the notebox and toggle button to the page. */
 const addNoteBoxDomTakePageNotes = () => {
  if (!noteContainerDomTakePageNotes) {
   let container = createContainerDomTakePageNotes();
   let toggleBtn = createToggleBtnDomTakePageNotes();
   let noteBox = createNoteBoxDomTakePageNotes();
   
   container.insertAdjacentElement("afterbegin", toggleBtn);
   container.insertAdjacentElement("beforeend", noteBox);
   document.body.insertAdjacentElement("afterbegin", container);
   
   noteContainerDomTakePageNotes = document.getElementById("noteContainerDomTakePageNotes");
   toggleBtnDomTakePageNotes = document.getElementById("toggleBtnDomTakePageNotes");
   noteBoxDomTakePageNotes = document.getElementById("noteBoxDomTakePageNotes");
  }
 };
 
 /* Add the style tag for the bookmarklet. */
 const addStyleTagDomTakePageNotes = () => {
  if (!styleTagDomTakePageNotes) {
   let doc = document.getElementsByTagName("body");
   let styleTag = document.createElement("style");
   styleTag.setAttribute("id", "styleTagDomTakePageNotes");
   styleTag.innerHTML = styleDomTakePageNotes;
   doc[0].insertAdjacentElement("afterbegin", styleTag);
  }
 };
 
 /* Toggle notebox visibility on button click. */
 const addToggleFunctionalityDomTakePageNotes = () => {
  toggleBtnDomTakePageNotes.addEventListener("click", () => {
   let isCollapsed = noteContainerDomTakePageNotes.getAttribute("data-collapsed");
   
   if (isCollapsed == "false") {
    noteContainerDomTakePageNotes.setAttribute("data-collapsed", "true");
    toggleBtnDomTakePageNotes.innerHTML = "o";
   } else {
    noteContainerDomTakePageNotes.setAttribute("data-collapsed", "false");
    toggleBtnDomTakePageNotes.innerHTML = "x";
   }
  });
 };
 
 /* Add drag functionality to move notebox anywhere on page. */
 const addDragFunctionalityDomTakePageNotes = () => {
  noteContainerDomTakePageNotes.addEventListener("mousedown", (e) => {
   if (e.target === toggleBtnDomTakePageNotes || e.target === noteContainerDomTakePageNotes) {
    isDraggingDomTakePageNotes = true;
    offsetXDomTakePageNotes = e.clientX - noteContainerDomTakePageNotes.offsetLeft;
    offsetYDomTakePageNotes = e.clientY - noteContainerDomTakePageNotes.offsetTop;
    noteContainerDomTakePageNotes.style.cursor = "grabbing";
   }
  });
  
  document.addEventListener("mousemove", (e) => {
   if (isDraggingDomTakePageNotes) {
    noteContainerDomTakePageNotes.style.left = (e.clientX - offsetXDomTakePageNotes) + "px";
    noteContainerDomTakePageNotes.style.top = (e.clientY - offsetYDomTakePageNotes) + "px";
   }
  });
  
  document.addEventListener("mouseup", () => {
   if (isDraggingDomTakePageNotes) {
    isDraggingDomTakePageNotes = false;
    noteContainerDomTakePageNotes.style.cursor = "move";
   }
  });
 };
 
 /*********************************************************************************************
                                          MAIN FUNCTION
 *********************************************************************************************/
 function runDomTakePageNotes() { 
  /* Add the styling for bookmarklet. */
  addStyleTagDomTakePageNotes();
  
  /* Add notebox and toggle button to page. */ 
  addNoteBoxDomTakePageNotes();
  
  /* Add toggle functionality to button. */
  addToggleFunctionalityDomTakePageNotes();
  
  /* Add drag functionality to move notebox. */
  addDragFunctionalityDomTakePageNotes();
 }

 /* Call main function. */
 runDomTakePageNotes();
})();