☰

Simple Note taker

Simple Note taker allows you to easily take notes while browsing the web. Simply select any text on a webpage.

  1. // ==UserScript==
  2. // @name         Simple Note taker
  3. // @description  Simple Note taker allows you to easily take notes while browsing the web. Simply select any text on a webpage.
  4. // @author       momoehab
  5. // @match      *://*/*
  6. // @license MIT
  7. // @version 0.0.1.20240609220313
  8. // @namespace https://greasyfork.org/users/1315328
  9. // ==/UserScript==
  10.  
  11. function getSelectedText() {
  12.     var text = "";
  13.     if (typeof window.getSelection != "undefined") {
  14.         text = window.getSelection().toString().trim();
  15.     } else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
  16.         text = document.selection.createRange().text.trim();
  17.     }
  18.     return text.toUpperCase(); // Convert selected text to uppercase
  19. }
  20.  
  21. function handleSelection() {
  22.     var selectedText = getSelectedText();
  23.     if (selectedText) {
  24.         const storedText = localStorage.getItem(selectedText);
  25.         if (storedText) {
  26.             const shouldDelete = confirm("Info: " + storedText + "\nWant to delete?");
  27.             if (shouldDelete) {
  28.                 var searchTerm = storedText; // Get the text of the item to delete
  29.                 removeSpanAndUnderline(searchTerm);
  30.                 localStorage.removeItem(selectedText);
  31.  
  32.             }
  33.  
  34.         } else {
  35.             const newText = prompt("You selected: " + selectedText + "\nEnter details:");
  36.             if (newText !== null) {
  37.                 localStorage.setItem(selectedText, newText);
  38.             }
  39.         }
  40.     }
  41. }
  42.  
  43. document.addEventListener("mouseup", handleSelection);
  44. document.addEventListener("keyup", function (event) {
  45.     if (event.key === "Enter") {
  46.         handleSelection();
  47.     }
  48. });
  49.  
  50. // Underline previously selected words with dotted line and show data as alt text on mouseover
  51. document.addEventListener("DOMContentLoaded", function () {
  52.     var storedWords = Object.keys(localStorage);
  53.     storedWords.forEach(function (word) {
  54.         var bodyHTML = document.body.innerHTML;
  55.         var re = new RegExp("\\b(" + word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ")\\b", "gi");
  56.         var data = localStorage.getItem(word);
  57.         bodyHTML = bodyHTML.replace(re, function (match) {
  58.             return '<span style="text-decoration: underline dotted" data-text="' + data + '" onmouseover="this.title=this.getAttribute(\'data-text\')">' + match + '</span>';
  59.         });
  60.         document.body.innerHTML = bodyHTML;
  61.     });
  62. });
  63.  
  64. function removeSpanAndUnderline(word) {
  65.     // Get all spans in the document
  66.     var spans = document.getElementsByTagName('span');
  67.  
  68.     // Iterate through all spans
  69.     for (var i = 0; i < spans.length; i++) {
  70.         var span = spans[i];
  71.  
  72.         // Check if the span contains the specific word and is underlined
  73.         if (span.textContent.includes(word) && span.style.textDecoration === 'underline') {
  74.             // Remove the underline
  75.             span.style.textDecoration = 'none';
  76.  
  77.             // Replace the span with its content
  78.             var textNode = document.createTextNode(span.textContent);
  79.             span.parentNode.replaceChild(textNode, span);
  80.         }
  81.     }
  82. }