☰

EazyHTMLTextEdit

Adds a button to edit text content of any HTML element (Toggle with Ctrl+Shift+E)

  1. // ==UserScript==
  2. // @name         EazyHTMLTextEdit
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Adds a button to edit text content of any HTML element (Toggle with Ctrl+Shift+E)
  6. // @author       404
  7. // @match        *://*/*
  8. // @grant        none
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Create and style the toggle button
  16.     const toggleButton = document.createElement('button');
  17.     toggleButton.textContent = '✏️ Edit Mode';
  18.     toggleButton.style.cssText = `
  19.         position: fixed;
  20.         top: 10px;
  21.         right: 10px;
  22.         z-index: 10000;
  23.         padding: 8px 16px;
  24.         background-color: #4CAF50;
  25.         color: white;
  26.         border: none;
  27.         border-radius: 4px;
  28.         cursor: pointer;
  29.         font-family: Arial, sans-serif;
  30.         transition: opacity 0.3s ease;
  31.     `;
  32.  
  33.     // Add button to page
  34.     document.body.appendChild(toggleButton);
  35.  
  36.     let isEditMode = false;
  37.     let selectedElement = null;
  38.     let originalBackground = '';
  39.     let isButtonVisible = false;
  40.  
  41.     // Set initial button state
  42.     toggleButton.style.opacity = '0';
  43.     toggleButton.style.pointerEvents = 'none';
  44.  
  45.     // Toggle button visibility with keyboard shortcut (Ctrl+Shift+E)
  46.     document.addEventListener('keydown', (e) => {
  47.         if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'e') {
  48.             e.preventDefault();
  49.             isButtonVisible = !isButtonVisible;
  50.             toggleButton.style.opacity = isButtonVisible ? '1' : '0';
  51.             toggleButton.style.pointerEvents = isButtonVisible ? 'auto' : 'none';
  52.         }
  53.     });
  54.  
  55.     // Toggle edit mode
  56.     toggleButton.addEventListener('click', () => {
  57.         isEditMode = !isEditMode;
  58.         toggleButton.style.backgroundColor = isEditMode ? '#f44336' : '#4CAF50';
  59.         toggleButton.textContent = isEditMode ? '✏️ Exit Edit Mode' : '✏️ Edit Mode';
  60.  
  61.         if (!isEditMode && selectedElement) {
  62.             selectedElement.style.backgroundColor = originalBackground;
  63.             selectedElement = null;
  64.         }
  65.     });
  66.  
  67.     // Handle mouseover highlighting
  68.     document.addEventListener('mouseover', (e) => {
  69.         if (!isEditMode) return;
  70.  
  71.         if (e.target !== toggleButton && e.target !== selectedElement) {
  72.             e.target.style.outline = '2px solid #4CAF50';
  73.             e.stopPropagation();
  74.         }
  75.     });
  76.  
  77.     // Remove highlight on mouseout
  78.     document.addEventListener('mouseout', (e) => {
  79.         if (!isEditMode) return;
  80.  
  81.         if (e.target !== toggleButton && e.target !== selectedElement) {
  82.             e.target.style.outline = '';
  83.             e.stopPropagation();
  84.         }
  85.     });
  86.  
  87.     // Handle element selection and text editing
  88.     document.addEventListener('click', (e) => {
  89.         if (!isEditMode || e.target === toggleButton) return;
  90.  
  91.         e.preventDefault();
  92.         e.stopPropagation();
  93.  
  94.         // Reset previous selection if exists
  95.         if (selectedElement) {
  96.             selectedElement.style.backgroundColor = originalBackground;
  97.         }
  98.  
  99.         selectedElement = e.target;
  100.         originalBackground = getComputedStyle(selectedElement).backgroundColor;
  101.         selectedElement.style.backgroundColor = '#fff8e1';
  102.  
  103.         // Create input for editing
  104.         const originalText = selectedElement.textContent;
  105.         const input = document.createElement('input');
  106.         input.type = 'text';
  107.         input.value = originalText;
  108.         input.style.cssText = `
  109.             width: ${Math.max(selectedElement.offsetWidth, 100)}px;
  110.             padding: 8px;
  111.             border: 2px solid #4CAF50;
  112.             border-radius: 4px;
  113.             background-color: #ffffff;
  114.             color: #000000;
  115.             font-size: 16px;
  116.             box-shadow: 0 0 10px rgba(0,0,0,0.1);
  117.             font-family: Arial, sans-serif;
  118.             margin: 2px;
  119.             z-index: 10001;
  120.             position: relative;
  121.         `;
  122.  
  123.         // Replace element content with input
  124.         selectedElement.textContent = '';
  125.         selectedElement.appendChild(input);
  126.         input.focus();
  127.  
  128.         // Handle input completion
  129.         const finishEditing = () => {
  130.             const newText = input.value;
  131.             selectedElement.removeChild(input);
  132.             selectedElement.textContent = newText;
  133.             selectedElement.style.backgroundColor = originalBackground;
  134.             selectedElement = null;
  135.         };
  136.  
  137.         input.addEventListener('blur', finishEditing);
  138.         input.addEventListener('keypress', (e) => {
  139.             if (e.key === 'Enter') {
  140.                 finishEditing();
  141.             }
  142.         });
  143.     });
  144. })();