Ctrl+RightClick Element Copier

按住 Ctrl + 右键点击即可复制网页元素的 HTML 代码
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Ctrl+RightClick Element Copier
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  按住 Ctrl + 右键点击即可复制网页元素的 HTML 代码
// @author       ELDERJiangneverdies
// @license      GPL-3.0
// @match        *://*/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';

    // Add CSS styles
    const style = document.createElement('style');
    style.textContent = `
        .ext-copy-highlight {
            outline: 2px dashed #ff0000 !important;
            outline-offset: -2px !important;
            cursor: copy !important;
            box-shadow: inset 0 0 0 2px rgba(255, 0, 0, 0.1);
            transition: all 0.1s ease;
        }

        .ext-copy-toast {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(33, 33, 33, 0.9);
            color: #fff;
            padding: 10px 20px;
            border-radius: 6px;
            font-family: system-ui, -apple-system, sans-serif;
            font-size: 14px;
            font-weight: 500;
            z-index: 2147483647;
            pointer-events: none;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            animation: extToastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        @keyframes extToastSlideIn {
            from { opacity: 0; transform: translate(-50%, -10px); }
            to { opacity: 1; transform: translate(-50%, 0); }
        }
    `;
    document.head.appendChild(style);

    // Add contextmenu event listener
    document.addEventListener('contextmenu', function(event) {
        if (!event.ctrlKey) return;

        event.preventDefault();
        event.stopPropagation();

        const target = event.target;
        const htmlContent = target.outerHTML;

        // Visual Highlight
        target.classList.add('ext-copy-highlight');
        setTimeout(function() {
            target.classList.remove('ext-copy-highlight');
        }, 500);

        // Copy to Clipboard with compatibility fallback
        copyToClipboard(htmlContent);
    }, true);

    function copyToClipboard(text) {
        try {
            // Try modern API first
            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard.writeText(text).then(function() {
                    showToast('元素已复制！');
                }).catch(function(err) {
                    console.error('Clipboard API failed:', err);
                    fallbackCopyTextToClipboard(text);
                });
            } else {
                // Fallback for older browsers
                fallbackCopyTextToClipboard(text);
            }
        } catch (err) {
            console.error('Copy failed:', err);
            showToast('复制失败，请重试', true);
        }
    }

    function fallbackCopyTextToClipboard(text) {
        const textArea = document.createElement('textarea');
        textArea.value = text;
        
        // Avoid scrolling to bottom
        textArea.style.top = '0';
        textArea.style.left = '0';
        textArea.style.position = 'fixed';
        textArea.style.opacity = '0';
        textArea.style.pointerEvents = 'none';
        
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        
        try {
            const successful = document.execCommand('copy');
            if (successful) {
                showToast('元素已复制！');
            } else {
                throw new Error('execCommand failed');
            }
        } catch (err) {
            console.error('Fallback copy failed:', err);
            showToast('复制失败，请重试', true);
        } finally {
            document.body.removeChild(textArea);
        }
    }

    function showToast(message, isError) {
        if (isError === undefined) {
            isError = false;
        }

        const existingToast = document.getElementById('ext-copy-toast');
        if (existingToast) {
            existingToast.remove();
        }

        const toast = document.createElement('div');
        toast.id = 'ext-copy-toast';
        toast.textContent = message;
        toast.className = 'ext-copy-toast';
        
        if (isError) {
            toast.style.backgroundColor = 'rgba(220, 38, 38, 0.9)';
        }

        document.body.appendChild(toast);

        setTimeout(function() {
            toast.style.opacity = '0';
            toast.style.transform = 'translate(-50%, -20px)';
            setTimeout(function() {
                if (toast.isConnected) {
                    toast.remove();
                }
            }, 300);
        }, 2000);
    }
})();