☰

Console-in-Pages

Creates a floating console in browser

// ==UserScript==
// @name         Console-in-Pages
// @namespace    http://tampermonkey.net/
// @version      1.0.0
// @description  Creates a floating console in browser
// @author       You
// @match        *://*/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Create the shell container
    const shellContainer = document.createElement('div');
    shellContainer.style.position = 'fixed';
    shellContainer.style.bottom = '100px';
    shellContainer.style.left = '20px';
    shellContainer.style.width = '500px';
    shellContainer.style.height = '300px';
    shellContainer.style.backgroundColor = '#000';
    shellContainer.style.color = '#0f0';
    shellContainer.style.fontFamily = 'monospace';
    shellContainer.style.zIndex = '99999';
    shellContainer.style.overflowY = 'auto';
    shellContainer.style.padding = '10px';
    shellContainer.style.display = 'none';  // Initially hidden
    document.body.appendChild(shellContainer);

    // Create the header (for dragging)
    const header = document.createElement('div');
    header.style.backgroundColor = '#333';
    header.style.padding = '5px';
    header.style.cursor = 'move';
    header.innerText = 'Tampermonkey generated Console';
    shellContainer.appendChild(header);

    // Create input field for commands
    const inputField = document.createElement('input');
    inputField.style.width = '100%';
    inputField.style.backgroundColor = '#000';
    inputField.style.color = '#0f0';
    inputField.style.border = 'none';
    inputField.style.outline = 'none';
    inputField.style.fontSize = '16px';
    inputField.placeholder = 'Type your command here...';
    shellContainer.appendChild(inputField);

    // Function to handle user input
    inputField.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
            const command = inputField.value.trim();
            if (command) {
                executeCommand(command);
            }
            inputField.value = ''; // Clear input after execution
        }
    });

    // Function to execute commands
    function executeCommand(command) {
        const output = document.createElement('div');
        output.textContent = `$ ${command}`;
        shellContainer.appendChild(output);

        // Handle predefined commands
        if (command === 'hello') {
            showOutput('Hello world!');
        } else if (command === 'date') {
            showOutput(new Date().toLocaleString());
        } else if (command === 'clear') {
            clearShell();
        } else {
            showOutput('Command not recognized');
        }

        // Scroll to bottom
        shellContainer.scrollTop = shellContainer.scrollHeight;
    }

    // Function to display command output
    function showOutput(outputText) {
        const output = document.createElement('div');
        output.textContent = outputText;
        shellContainer.appendChild(output);
    }

    // Function to clear the shell
    function clearShell() {
        shellContainer.innerHTML = '';
        shellContainer.appendChild(header); // Keep the header
        shellContainer.appendChild(inputField); // Keep the input field
    }

    // Create the resize handle
    const resizeHandle = document.createElement('div');
    resizeHandle.style.position = 'absolute';
    resizeHandle.style.bottom = '0';
    resizeHandle.style.right = '0';
    resizeHandle.style.width = '20px';
    resizeHandle.style.height = '20px';
    resizeHandle.style.backgroundColor = '#0f0';
    resizeHandle.style.cursor = 'se-resize';
    shellContainer.appendChild(resizeHandle);

    // Drag functionality for the terminal window
    let isDragging = false;
    let offsetX, offsetY;

    header.addEventListener('mousedown', function(e) {
        isDragging = true;
        offsetX = e.clientX - shellContainer.getBoundingClientRect().left;
        offsetY = e.clientY - shellContainer.getBoundingClientRect().top;
        document.addEventListener('mousemove', dragShell);
        document.addEventListener('mouseup', stopDrag);
    });

    function dragShell(e) {
        if (isDragging) {
            shellContainer.style.left = `${e.clientX - offsetX}px`;
            shellContainer.style.top = `${e.clientY - offsetY}px`;
        }
    }

    function stopDrag() {
        isDragging = false;
        document.removeEventListener('mousemove', dragShell);
        document.removeEventListener('mouseup', stopDrag);
    }

    // Resize functionality for the terminal window
    let isResizing = false;
    let initialWidth, initialHeight, initialMouseX, initialMouseY;

    resizeHandle.addEventListener('mousedown', function(e) {
        isResizing = true;
        initialWidth = shellContainer.offsetWidth;
        initialHeight = shellContainer.offsetHeight;
        initialMouseX = e.clientX;
        initialMouseY = e.clientY;
        document.addEventListener('mousemove', resizeShell);
        document.addEventListener('mouseup', stopResize);
    });

    function resizeShell(e) {
        if (isResizing) {
            const width = initialWidth + (e.clientX - initialMouseX);
            const height = initialHeight + (e.clientY - initialMouseY);
            shellContainer.style.width = `${width}px`;
            shellContainer.style.height = `${height}px`;
        }
    }

    function stopResize() {
        isResizing = false;
        document.removeEventListener('mousemove', resizeShell);
        document.removeEventListener('mouseup', stopResize);
    }

    // Create the toggle icon
    const toggleIcon = document.createElement('div');
    toggleIcon.style.position = 'fixed';
    toggleIcon.style.bottom = '60px';
    toggleIcon.style.left = '10px';
    toggleIcon.style.width = '40px';
    toggleIcon.style.height = '40px';
    toggleIcon.style.backgroundColor = '#0f0';
    toggleIcon.style.color = '#000';
    toggleIcon.style.fontSize = '24px';
    toggleIcon.style.borderRadius = '50%';
    toggleIcon.style.textAlign = 'center';
    toggleIcon.style.lineHeight = '40px';
    toggleIcon.style.cursor = 'pointer';
    toggleIcon.style.zIndex = '100000';
    toggleIcon.innerHTML = '⌨'; // Unicode for a refresh icon (can be replaced with other symbols)
    document.body.appendChild(toggleIcon);

    // Add dragging functionality to the toggle icon
    let iconIsDragging = false;
    let iconOffsetX, iconOffsetY;
    let iconDragStartTime;

    toggleIcon.addEventListener('mousedown', function(e) {
        iconIsDragging = false;
        iconDragStartTime = Date.now(); // Record when the drag starts
        iconOffsetX = e.clientX - toggleIcon.getBoundingClientRect().left;
        iconOffsetY = e.clientY - toggleIcon.getBoundingClientRect().top;
        document.addEventListener('mousemove', dragIcon);
        document.addEventListener('mouseup', stopIconDrag);
    });

    function dragIcon(e) {
        iconIsDragging = true;
        toggleIcon.style.left = `${e.clientX - iconOffsetX}px`;
        toggleIcon.style.top = `${e.clientY - iconOffsetY}px`;
    }

    function stopIconDrag(e) {
        document.removeEventListener('mousemove', dragIcon);
        document.removeEventListener('mouseup', stopIconDrag);

        // If the mouse was held down for less than 300ms and moved less than 5px, consider it a click
        if (iconIsDragging && (Date.now() - iconDragStartTime > 300 || Math.abs(e.clientX - toggleIcon.offsetLeft) > 5 || Math.abs(e.clientY - toggleIcon.offsetTop) > 5)) {
            iconIsDragging = false;  // It was a drag, not a click
        } else {
            // Toggle the terminal visibility only on click
            if (shellContainer.style.display === 'none') {
                shellContainer.style.display = 'block';
            } else {
                shellContainer.style.display = 'none';
            }
        }
    }

})();