Website Text Editor

Lets you click any text on any website and edit it like Inspect Element.

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey, Greasemonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да инсталирате разширение, като например Tampermonkey .

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Userscripts.

За да инсталирате скрипта, трябва да инсталирате разширение като Tampermonkey.

За да инсталирате този скрипт, трябва да имате инсталиран скриптов мениджър.

(Вече имам скриптов мениджър, искам да го инсталирам!)

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

(Вече имам инсталиран мениджър на стиловете, искам да го инсталирам!)

// ==UserScript==
// @name         Website Text Editor
// @namespace    https://ember2819.dev
// @version      1.0
// @description  Lets you click any text on any website and edit it like Inspect Element.
// @author       Ember2819
// @match        *://*/*
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // --- Floating Menu ---
    const menu = document.createElement("div");
    menu.style.position = "fixed";
    menu.style.top = "20px";
    menu.style.right = "20px";
    menu.style.zIndex = "999999";
    menu.style.background = "rgba(20,20,20,0.9)";
    menu.style.color = "#fff";
    menu.style.padding = "12px 15px";
    menu.style.borderRadius = "10px";
    menu.style.fontFamily = "Arial";
    menu.style.boxShadow = "0 4px 10px rgba(0,0,0,0.3)";
    menu.style.cursor = "pointer";
    menu.textContent = "Editor: OFF";
    document.body.append(menu);

    let enabled = false;

    // --- Highlight box ---
    const highlight = document.createElement("div");
    highlight.style.position = "absolute";
    highlight.style.border = "2px dashed #00e1ff";
    highlight.style.pointerEvents = "none";
    highlight.style.zIndex = "999998";
    highlight.style.display = "none";
    document.body.append(highlight);

    let currentTarget = null;

    // --- Toggle mod mode ---
    menu.addEventListener("click", () => {
        enabled = !enabled;
        menu.textContent = enabled ? "Editor: ON" : "Editor: OFF";
        highlight.style.display = enabled ? "block" : "none";
    });

    // --- Mouse tracking for highlighting ---
    document.addEventListener("mousemove", (e) => {
        if (!enabled) return;

        const el = document.elementFromPoint(e.clientX, e.clientY);
        if (!el || el === menu) return;

        currentTarget = el;
        const rect = el.getBoundingClientRect();

        highlight.style.top = rect.top + "px";
        highlight.style.left = rect.left + "px";
        highlight.style.width = rect.width + "px";
        highlight.style.height = rect.height + "px";
    });

    // --- Click to edit text ---
    document.addEventListener("click", (e) => {
        if (!enabled) return;
        if (e.target === menu) return;
        e.preventDefault();
        e.stopPropagation();

        const newText = prompt("Enter new text:", e.target.innerText);
        if (newText !== null) {
            e.target.innerText = newText;
        }
    }, true);

})();