Page Text Editor

Allows editing text on any webpage by clicking a button with improved styling and draggable functionality

Você precisará instalar uma extensão como Tampermonkey, Greasemonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Userscripts para instalar este script.

Você precisará instalar uma extensão como o Tampermonkey para instalar este script.

Você precisará instalar um gerenciador de scripts de usuário para instalar este script.

(Eu já tenho um gerenciador de scripts de usuário, me deixe instalá-lo!)

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

(Eu já possuo um gerenciador de estilos de usuário, me deixar fazer a instalação!)

// ==UserScript==
// @name         Page Text Editor
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Allows editing text on any webpage by clicking a button with improved styling and draggable functionality
// @author       Rylogix
// @match        https://*/*
// @match        http://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let isDragging = false;
    let offsetX, offsetY;

    function enableEditMode() {
        document.querySelectorAll('*').forEach(function(node) {
            node.setAttribute('contenteditable', 'true');
        });
    }

    function disableEditMode() {
        document.querySelectorAll('*').forEach(function(node) {
            node.removeAttribute('contenteditable');
        });
    }

    var editButton = document.createElement('button');
    editButton.innerHTML = 'Edit Text';
    editButton.style.position = 'fixed';
    editButton.style.top = '10px';
    editButton.style.right = '10px';
    editButton.style.padding = '8px 12px';
    editButton.style.border = 'none';
    editButton.style.borderRadius = '5px';
    editButton.style.background = '#3498db';
    editButton.style.color = '#fff';
    editButton.style.fontFamily = 'Arial, sans-serif';
    editButton.style.fontSize = '14px';
    editButton.style.cursor = 'pointer';
    editButton.style.userSelect = 'none'; // Prevent text selection
    editButton.style.zIndex = '9999'; // Ensure button overlays everything

    // Function to handle mouse down event on the button
    function handleMouseDown(event) {
        isDragging = true;
        offsetX = event.clientX - editButton.getBoundingClientRect().left;
        offsetY = event.clientY - editButton.getBoundingClientRect().top;
    }

    // Function to handle mouse move event on the document
    function handleMouseMove(event) {
        if (isDragging) {
            editButton.style.top = (event.clientY - offsetY) + 'px';
            editButton.style.left = (event.clientX - offsetX) + 'px';
        }
    }

    // Function to handle mouse up event on the document
    function handleMouseUp() {
        isDragging = false;
    }

    // Add event listeners for mouse events
    editButton.addEventListener('mousedown', handleMouseDown);
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);

    // Function to toggle edit mode and button text
    editButton.onclick = function() {
        if (editButton.innerHTML === 'Edit Text') {
            enableEditMode();
            editButton.innerHTML = 'Stop Editing';
        } else {
            disableEditMode();
            editButton.innerHTML = 'Edit Text';
        }
    };

    document.body.appendChild(editButton);
})();