☰

Sticky Note

Adds a sticky note to the browser for taking quick notes

当前为 2023-09-13 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name Sticky Note
  3. // @namespace https://t.me/TheErfon
  4. // @version 1.8
  5. // @description Adds a sticky note to the browser for taking quick notes
  6. // @match https://*/*
  7. // @match http://*/*
  8. // @grant GM_addStyle
  9. // @grant GM_setValue
  10. // @grant GM_getValue
  11. // @grant GM_deleteValue
  12. // @license      CC BY-NC-ND 4.0
  13. // @licenseURL   https://github.com/Rainman69/Sticky-note-for-browser/blob/main/LICENSE
  14. // ==/UserScript==
  15.  
  16. (function () {
  17.   'use strict';
  18.  
  19.   // Create the sticky note element
  20.   var note = document.createElement('div');
  21.   note.id = 'sticky-note';
  22.   note.contentEditable = true;
  23.   note.spellcheck = false;
  24.   note.style.display = 'none';
  25.   note.style.position = 'fixed';
  26.   note.style.top = '10px';
  27.   note.style.right = '10px';
  28.   note.style.width = '7em';
  29.   note.style.height = '8em';
  30.   note.style.padding = '10px';
  31.   note.style.backgroundColor = 'rgba(255, 215, 0, 0.9)'; // Set opacity to 90%
  32.   note.style.color = '#000000';
  33.   note.style.fontFamily = 'Arial, sans-serif';
  34.   note.style.fontSize = '14px';
  35.   note.style.zIndex = '9999';
  36.   note.style.borderRadius = '10px'; // Rounded corners
  37.   note.style.boxShadow =
  38.     '0px -3px 10px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(255, 215, 0, 0.5)'; // Upper shadow and glow shadow
  39.   note.style.overflow = 'auto'; // Enable scrollbars when content exceeds the box height
  40.  
  41.   // Append the note to the document
  42.   document.body.appendChild(note);
  43.  
  44.   // Show or hide the note when Tab key is pressed
  45.   var isNoteVisible = false;
  46.  
  47.   document.addEventListener('keydown', function (event) {
  48.     if (event.key === 'Tab') {
  49.       isNoteVisible = !isNoteVisible;
  50.       note.style.display = isNoteVisible ? 'block' : 'none';
  51.       event.preventDefault(); // Prevents the default tab behavior
  52.     }
  53.   });
  54.  
  55.   // Save note content when it's changed
  56.   note.addEventListener('input', function () {
  57.     var content = note.innerText; // Use innerText to get plain text without HTML tags
  58.     GM_setValue('stickyNoteContent', content);
  59.     resizeNote();
  60.   });
  61.  
  62.   // Remove note when the page is unloaded
  63.   window.addEventListener('beforeunload', function () {
  64.     GM_deleteValue('stickyNoteContent'); // Delete the stored note content
  65.     document.body.removeChild(note);
  66.   });
  67.  
  68.   // Resize the note based on content length
  69.   function resizeNote() {
  70.     var content = note.innerText; // Use innerText to get plain text without HTML tags
  71.     note.style.height = ''; // Reset the height to recalculate the scrollable height
  72.  
  73.     // Determine text direction based on the note content
  74.     if (isRTLText(content)) {
  75.       note.style.direction = 'rtl';
  76.     } else {
  77.       note.style.direction = 'ltr';
  78.     }
  79.   }
  80.  
  81.   // Check if text contains right-to-left (RTL) characters
  82.   function isRTLText(text) {
  83.     var rtlRegex = /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]/;
  84.     return rtlRegex.test(text);
  85.   }
  86.  
  87.   // Retrieve note content if available
  88.   var storedContent = GM_getValue('stickyNoteContent');
  89.   if (storedContent) {
  90.     note.innerText = storedContent;
  91.   }
  92.  
  93.   // Resize the note when it becomes visible
  94.   note.addEventListener('transitionend', function () {
  95.     if (isNoteVisible) {
  96.       resizeNote();
  97.     }
  98.   });
  99. })();