Copy URL and Title (Draggable) のソースコード

Copy URL and Title (Draggable)

Adds a draggable floating button to copy the current page's title and URL
2024/09/14のページです。最新版はこちら
右端で折り返す
// ==UserScript==
// @name         Copy URL and Title (Draggable)
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Adds a draggable floating button to copy the current page's title and URL
// @match        *://*/*
// @grant        GM_setClipboard
// @license      GPL-3.0
// ==/UserScript==

(function() {
    'use strict';

    // Create floating button
    const button = document.createElement('div');
    button.innerHTML = '📋';
    button.style.cssText = `
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        background-color: #4CAF50;
        color: white;
        border-radius: 50%;
        text-align: center;
        line-height: 50px;
        font-size: 24px;
        cursor: move;
        z-index: 9999;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        transition: background-color 0.3s;
    `;

    // Create popup
    const popup = document.createElement('div');
    popup.style.cssText = `
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        z-index: 10000;
        display: none;
    `;

    // Add button and popup to the page
    document.body.appendChild(button);
    document.body.appendChild(popup);

    // Dragging functionality
    let isDragging = false;
    let startX, startY, startLeft, startTop;

    button.addEventListener('mousedown', function(e) {
        isDragging = true;
        startX = e.clientX;
        startY = e.clientY;
        startLeft = parseInt(window.getComputedStyle(button).left);
        startTop = parseInt(window.getComputedStyle(button).top);
        e.preventDefault();
    });

    document.addEventListener('mousemove', function(e) {
        if (!isDragging) return;
        let newLeft = startLeft + e.clientX - startX;
        let newTop = startTop + e.clientY - startY;
        
        // Keep button within viewport
        newLeft = Math.max(0, Math.min(newLeft, window.innerWidth - button.offsetWidth));
        newTop = Math.max(0, Math.min(newTop, window.innerHeight - button.offsetHeight));
        
        button.style.left = newLeft + 'px';
        button.style.top = newTop + 'px';
        button.style.bottom = 'auto';
        button.style.right = 'auto';
    });

    document.addEventListener('mouseup', function() {
        isDragging = false;
    });

    // Button click event
    button.addEventListener('click', function(e) {
        if (isDragging) return; // Prevent copying when dragging ends

        const pageTitle = document.title;
        const pageUrl = window.location.href;
        const copyText = `${pageTitle}\n${pageUrl}`;

        // Copy to clipboard
        GM_setClipboard(copyText, 'text');

        // Show checkmark
        const originalContent = button.innerHTML;
        button.innerHTML = '✅';
        button.style.backgroundColor = '#45a049';

        // Reset button after 2 seconds
        setTimeout(() => {
            button.innerHTML = originalContent;
            button.style.backgroundColor = '#4CAF50';
        }, 2000);

        // Show popup
        popup.innerHTML = `
            <h3>Copied to clipboard:</h3>
            <p><strong>Title:</strong> ${pageTitle}</p>
            <p><strong>URL:</strong> ${pageUrl}</p>
            <button id="closePopup" style="margin-top: 10px;">Close</button>
        `;
        popup.style.display = 'block';

        // Close popup button
        document.getElementById('closePopup').addEventListener('click', function() {
            popup.style.display = 'none';
        });
    });
})();