JavaScript Web Executor

Execute JavaScript with ease!
Από την 09/09/2024. Δείτε την τελευταία έκδοση.
Κάντε μια ερώτηση, δημοσιεύστε μια ανασκόπηση, ή αναφέρετε τον κώδικα.
Αναδίπλωση γραμμών
// ==UserScript==
// @name         JavaScript Web Executor
// @name:fr      Exécuteur Web JavaScript
// @name:es      Ejecutor Web de JavaScript
// @name:de      JavaScript-Web-Executor
// @name:zh-CN   JavaScript网络执行器
// @name:ru      JavaScript Веб-Исполнитель
// @description  Execute JavaScript with ease!
// @description:fr Exécutez JavaScript facilement!
// @description:es Ejecuta JavaScript con facilidad!
// @description:de Führen Sie JavaScript mühelos aus!
// @description:zh-CN 轻松执行JavaScript！
// @description:ru Выполняйте JavaScript с легкостью!
// @author       Luox
// @version      1.5
// @match        *://*/*
// @grant        none
// @license MIT
// @namespace https://greasyfork.org/users/1365002
// ==/UserScript==

(function () {
    'use strict';

    const css = `
        #customJsModal {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 400px;
            background-color: rgba(0, 0, 0, 0.85);
            color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            font-family: Arial, sans-serif;
            z-index: 9999;
            opacity: 0;
            transform: translateY(100px);
            transition: all 0.4s ease;
            pointer-events: none;
        }
        #customJsModal.show {
            opacity: 1;
            transform: translateY(0);
            pointer-events: all;
        }
        #customJsModal textarea {
            width: 100%;
            height: 150px;
            background-color: #333;
            color: #fff;
            border: none;
            padding: 10px;
            border-radius: 5px;
            font-family: monospace;
            resize: none;
            margin-bottom: 10px;
        }
        #customJsModal button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        #customJsModal button:hover {
            background-color: #45a049;
        }
        #customJsModal button.close-btn {
            background-color: #f44336;
            margin-left: 10px;
        }
        #customJsModal button.close-btn:hover {
            background-color: #d32f2f;
        }
        #jsExecutorToggle {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 70px;
            height: 70px;
            background-color: #f7df1e;
            border-radius: 50%;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9998;
            transition: background-color 0.3s ease;
        }
        #jsExecutorToggle img {
            width: 40px;
            height: 40px;
            pointer-events: none;
        }
        #jsExecutorToggle:hover {
            background-color: #ffeb3b;
        }
    `;

    const style = document.createElement('style');
    style.textContent = css;
    document.head.appendChild(style);

    const modal = document.createElement('div');
    modal.id = 'customJsModal';
    modal.innerHTML = `
        <textarea id="jsCodeArea" placeholder="Enter your JavaScript code here..."></textarea>
        <button id="executeJsBtn">Run</button>
        <button class="close-btn">Close</button>
    `;
    document.body.appendChild(modal);

    const toggleButton = document.createElement('button');
    toggleButton.id = 'jsExecutorToggle';
    toggleButton.innerHTML = `<img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" alt="JS Logo">`;
    document.body.appendChild(toggleButton);

    toggleButton.addEventListener('click', () => {
        modal.classList.toggle('show');
    });

    document.getElementById('executeJsBtn').addEventListener('click', () => {
        const code = document.getElementById('jsCodeArea').value;
        try {
            new Function(code)();
        } catch (e) {
            console.error('Error: ' + e.message);
        }
    });

    document.querySelector('#customJsModal .close-btn').addEventListener('click', () => {
        modal.classList.remove('show');
    });

    let isDragging = false;
    let offsetX, offsetY;

    toggleButton.addEventListener('mousedown', (e) => {
        isDragging = true;
        offsetX = e.clientX - toggleButton.getBoundingClientRect().left;
        offsetY = e.clientY - toggleButton.getBoundingClientRect().top;
        toggleButton.style.transition = 'none';
    });

    document.addEventListener('mousemove', (e) => {
        if (isDragging) {
            toggleButton.style.left = `${e.clientX - offsetX}px`;
            toggleButton.style.top = `${e.clientY - offsetY}px`;
        }
    });

    document.addEventListener('mouseup', () => {
        isDragging = false;
        toggleButton.style.transition = 'all 0.4s ease';
    });

})();