Universal Movable GUI のソースコード

Universal Movable GUI

Draggable GUI with O-key toggle on all websites
右端で折り返す
// ==UserScript==
// @name         Universal Movable GUI
// @namespace    https://greasyfork.org/
// @version      1.0
// @description  Draggable GUI with O-key toggle on all websites
// @author       You
// @match        *://*/*
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function () {
    'use strict';

    if (document.getElementById('universalGui')) return;

    const gui = document.createElement('div');
    gui.id = 'universalGui';

    Object.assign(gui.style, {
        position: 'fixed',
        top: '20px',
        left: '20px',
        width: '300px',
        background: '#1e1e1e',
        color: '#fff',
        padding: '15px',
        borderRadius: '12px',
        fontFamily: 'Arial, sans-serif',
        zIndex: '2147483647',
        boxShadow: '0 0 20px rgba(0,0,0,.5)',
        userSelect: 'none'
    });

    gui.innerHTML = `
        <div id="guiHeader" style="
            cursor:move;
            font-size:18px;
            font-weight:bold;
            margin-bottom:10px;
            border-bottom:1px solid #444;
            padding-bottom:8px;
        ">
            Universal GUI
        </div>

        <div>
            <p>Status: Ready</p>
            <p>Press <b>O</b> to show/hide</p>
            <p>Drag the title bar to move</p>
        </div>
    `;

    document.body.appendChild(gui);

    let visible = true;

    document.addEventListener('keydown', (e) => {
        if (
            e.target.tagName === 'INPUT' ||
            e.target.tagName === 'TEXTAREA' ||
            e.target.isContentEditable
        ) {
            return;
        }

        if (e.key.toLowerCase() === 'o') {
            visible = !visible;
            gui.style.display = visible ? 'block' : 'none';
        }
    });

    const header = document.getElementById('guiHeader');

    let dragging = false;
    let offsetX = 0;
    let offsetY = 0;

    header.addEventListener('mousedown', (e) => {
        dragging = true;
        offsetX = e.clientX - gui.offsetLeft;
        offsetY = e.clientY - gui.offsetTop;
    });

    document.addEventListener('mousemove', (e) => {
        if (!dragging) return;

        gui.style.left = (e.clientX - offsetX) + 'px';
        gui.style.top = (e.clientY - offsetY) + 'px';
    });

    document.addEventListener('mouseup', () => {
        dragging = false;
    });

})();