Copy Page URL Window with Keybind Option and Alert Timeout

Adds a floating window to copy the current page's URL to the clipboard and change keybinds with an alert timeout
As of 2024-04-29. See the latest version.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Copy Page URL Window with Keybind Option and Alert Timeout
// @namespace    http://your.namespace.com
// @license      CC
// @version      2.0
// @description  Adds a floating window to copy the current page's URL to the clipboard and change keybinds with an alert timeout
// @author       Speed_Racer
// @match        *://*/*
// @grant        GM_addStyle
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==

(function() {
    'use strict';

    // Default keybind
    var keybind = 'Shift + Alt';

    // Create a floating window
    var floatingWindow = document.createElement("div");
    floatingWindow.id = "floating-window";
    floatingWindow.style.display = "none"; // Initially hidden
    document.body.appendChild(floatingWindow);

    // Apply styles
    GM_addStyle(`
        #floating-window {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 79px;
            height: 50px;
            background-color: lightgray;
            border: 1px solid black;
            padding: 5px;
            z-index: 9999;
            transition: opacity 0.5s;
            opacity: 0;
        }

        #floating-window:hover {
            opacity: 1;
        }

        #floating-window button, #floating-window input {
            margin-top: 5px;
            width: 72px;
            color: black;
            background-color: white;
        }
    `);

    var timer; // Timer variable

    // Function to show the floating window
    function showFloatingWindow() {
        clearTimeout(timer); // Clear the hide timer
        floatingWindow.style.display = "block"; // Show the window
    }

    // Function to hide the floating window
    function hideFloatingWindow() {
        floatingWindow.style.display = "none"; // Hide the window
    }

    // Add event listener to show the floating window when mouse enters
    floatingWindow.addEventListener("mouseenter", showFloatingWindow);

    // Add event listener to hide the floating window when mouse leaves
    floatingWindow.addEventListener("mouseleave", function() {
        // Set a timer to hide the window after 10 seconds of inactivity
        timer = setTimeout(function() {
            hideFloatingWindow();
        }, 10000);
    });

    // Function to handle the button click
    function handleCopyButtonClick() {
        copyURLToClipboard();
    }

    // Function to handle the key press event
    function handleKeyPress(event) {
        // Check if the event key matches the current keybind
        if (event.shiftKey && event.key === keybind.split(' + ')[1]) {
            copyURLToClipboard();
        }
    }

    // Function to copy the current page's URL to the clipboard
    function copyURLToClipboard() {
        var currentURL = window.location.href;

        // Copy the URL to the clipboard
        navigator.clipboard.writeText(currentURL)
            .then(function() {
                console.log('URL copied to clipboard: ' + currentURL);
                var alertMessage = 'URL copied to clipboard!';
                showAlert(alertMessage);
            })
            .catch(function(error) {
                console.error('Failed to copy URL to clipboard: ', error);
                var errorMessage = 'Failed to copy URL to clipboard.';
                showAlert(errorMessage);
            });
    }

    // Function to show an alert with a timeout
    function showAlert(message) {
        var alertBox = document.createElement('div');
        alertBox.className = 'alert';
        alertBox.textContent = message;
        alertBox.style.position = 'fixed';
        alertBox.style.top = '0';
        alertBox.style.left = '50%';
        alertBox.style.transform = 'translateX(-50%)';
        alertBox.style.color = 'black'; // Text color
        alertBox.style.backgroundColor = 'white'; // Background color
        alertBox.style.padding = '10px';
        alertBox.style.border = '1px solid black';
        alertBox.style.zIndex = '10000';

        document.body.appendChild(alertBox);

        // Hide the alert after 5 seconds
        setTimeout(function() {
            alertBox.style.display = 'none';
        }, 5000);
    }

    // Add the copy button to the floating window
    var copyButton = document.createElement("button");
    copyButton.textContent = "Copy URL";
    copyButton.addEventListener("click", handleCopyButtonClick);
    floatingWindow.appendChild(copyButton);

    // Add an input field to change the keybind
    var keybindInput = document.createElement("input");
    keybindInput.type = "text";
    keybindInput.value = keybind;
    keybindInput.addEventListener("change", function(event) {
        keybind = event.target.value;
        var keybindChangeMessage = "Keybind changed to: " + keybind;
        showAlert(keybindChangeMessage);
    });
    floatingWindow.appendChild(keybindInput);

    // Add event listener to listen for keydown events
    document.addEventListener('keydown', handleKeyPress);
})();