小窗预览 长按 中键 拖拽

链接预览 小窗预览 方便的预览方式

// ==UserScript==
// @name         小窗预览 长按 中键 拖拽
// @version      3.9.2
// @description  链接预览 小窗预览 方便的预览方式
// @match        *://*/*
// @grant        GM_registerMenuCommand
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_info
// @namespace    https://greasyfork.org/users/217852
// ==/UserScript==

(function() {
    'use strict';

    // State to track dragging, popup status, overlay visibility, and long press
    const state = {
        isDragging: false,
        isLongPressing: false,
        linkToPreload: null,
        popupWindow: null,
        acrylicOverlay: null,
        overlayVisible: false,
        preloadElement: null,
        longPressTimeout: null,
        startPosition: { x: 0, y: 0 },
    };

    // Configuration settings with defaults
    const config = {
        windowWidth: GM_getValue('windowWidth', 870),
        windowHeight: GM_getValue('windowHeight', 530),
        blurIntensity: GM_getValue('blurIntensity', 20),
        blurEnabled: GM_getValue('blurEnabled', true),
        closeOnMouseClick: GM_getValue('closeOnMouseClick', true),
        closeOnScroll: GM_getValue('closeOnScroll', true),
        longPressEnabled: GM_getValue('longPressEnabled', true),
        dragToOpenEnabled: GM_getValue('dragToOpenEnabled', true),
        middleClickEnabled: GM_getValue('middleClickEnabled', true), // New option for middle click
        longPressDuration: GM_getValue('longPressDuration', 300), // 300ms default
        transitionDuration: 220, // 220ms fade-in/fade-out
    };

    // Website-specific configurations
    const specificSites = {
        "bilibili.com": { windowWidth: 1000, windowHeight: 565, enableLeftClickPopup: true },
        "douyin.com": { windowWidth: 1000, windowHeight: 500, enableLeftClickPopup: true },
        "x.com": { windowWidth: 1000, windowHeight: 700, enableLeftClickPopup: true },
        "youtube.com": { windowWidth: 1040, windowHeight: 700, enableLeftClickPopup: false },
        "www.ghxi.com": { windowWidth: 1900, windowHeight: 700, enableLeftClickPopup: false }
    };

    // Utility to delay operations (e.g., to allow preload to complete)
    function delay(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    // Preload a link using a <link rel="prefetch"> element
    async function preloadLink(link) {
        try {
            removePreloadedLink();

            const preloadElement = document.createElement('link');
            preloadElement.rel = 'prefetch';
            preloadElement.href = link;
            preloadElement.as = 'document';
            preloadElement.onload = () => console.log(`Prefetch successful: ${link}`);
            preloadElement.onerror = () => console.log(`Prefetch failed: ${link}`);
            document.head.appendChild(preloadElement);
            state.preloadElement = preloadElement;

            await delay(1); // Ensure the prefetch operation starts
        } catch (error) {
            console.error('Error in prefetch operation:', error);
        }
    }

    // Remove the preloaded link element from the DOM
    function removePreloadedLink() {
        if (state.preloadElement) {
            state.preloadElement.remove();
            state.preloadElement = null;
        }
    }

    // Create an acrylic overlay with blur effect and fade-in transition
    function createAcrylicOverlay() {
        const acrylicOverlay = document.createElement('div');
        Object.assign(acrylicOverlay.style, {
            position: 'fixed',
            top: '0',
            left: '0',
            width: '100%',
            height: '100%',
            zIndex: '9999',
            backdropFilter: config.blurEnabled ? `blur(${config.blurIntensity}px)` : 'none',
            opacity: '0',
            transition: `opacity ${config.transitionDuration}ms ease-in-out`,
        });

        if (config.closeOnMouseClick) {
            acrylicOverlay.addEventListener('click', handleAcrylicOverlayClick);
        }

        document.body.appendChild(acrylicOverlay);

        // Trigger fade-in effect
        requestAnimationFrame(() => {
            acrylicOverlay.style.opacity = '1';
            state.overlayVisible = true;
        });

        return acrylicOverlay;
    }

    // Handle click on the acrylic overlay (close popup)
    function handleAcrylicOverlayClick(event) {
        if (event.target === state.acrylicOverlay) {
            closePopupWindow();
        }
    }

    // Remove the acrylic overlay with fade-out transition
    function removeAcrylicOverlay() {
        if (state.acrylicOverlay && state.overlayVisible) {
            state.acrylicOverlay.style.opacity = '0';

            setTimeout(() => {
                if (state.acrylicOverlay) {
                    state.acrylicOverlay.remove();
                    state.acrylicOverlay = null;
                    state.overlayVisible = false;
                }
            }, config.transitionDuration);
        }
    }

    // Open a popup window centered on the screen
    function openPopupWindow(link, width = config.windowWidth, height = config.windowHeight) {
        // Retrieve the site-specific configuration, if any
        const siteConfig = getSiteConfig();
        if (siteConfig) {
            // Apply site-specific window size if available
            width = siteConfig.windowWidth || width;
            height = siteConfig.windowHeight || height;
        }

        const screenLeft = (window.screen.width - width) / 2;
        const screenTop = (window.screen.height - height) / 3;

        if (!state.popupWindow || state.popupWindow.closed) {
            state.acrylicOverlay = createAcrylicOverlay();
            state.popupWindow = window.open(link, '_blank', `width=${width},height=${height},left=${screenLeft},top=${screenTop}`);
            state.popupWindowChecker = setInterval(checkPopupWindowStatus, 200);
        }
    }

    // Close the popup window and cleanup
    function closePopupWindow() {
        if (state.popupWindow && !state.popupWindow.closed) {
            state.popupWindow.close();
            state.popupWindow = null;
            removeAcrylicOverlay();
            removePreloadedLink();
            window.removeEventListener('scroll', closePopupOnScroll);
        }
    }

    // Check if the popup window is still open; remove overlay if closed
    function checkPopupWindowStatus() {
        if (state.popupWindow && state.popupWindow.closed) {
            removeAcrylicOverlay();
            clearInterval(state.popupWindowChecker);
        }
    }

    // Close the popup window when the page is scrolled
    function closePopupOnScroll() {
        closePopupWindow();
    }

    // Check if the current site matches a specific configuration
    function getSiteConfig() {
        const hostname = window.location.hostname;
        return specificSites[Object.keys(specificSites).find(domain => hostname.includes(domain))];
    }

    // Register menu commands for the script
    function registerMenuCommand(label, action) {
        return GM_registerMenuCommand(label, () => {
            action();
            updateMenuCommands();
        });
    }

    // Toggle blur effect on/off
    function toggleBlurEffect() {
        config.blurEnabled = !config.blurEnabled;
        GM_setValue('blurEnabled', config.blurEnabled);
    }

    // Prompt user to set blur intensity
    function setBlurIntensity() {
        const intensity = prompt('输入模糊强度(0-100):', config.blurIntensity);
        if (intensity !== null) {
            config.blurIntensity = parseInt(intensity, 10);
            GM_setValue('blurIntensity', config.blurIntensity);
        }
    }

    // Toggle the option to close the popup on mouse click
    function toggleCloseOnMouseClick() {
        config.closeOnMouseClick = !config.closeOnMouseClick;
        GM_setValue('closeOnMouseClick', config.closeOnMouseClick);
    }

    // Toggle the option to close the popup on scroll
    function toggleCloseOnScroll() {
        config.closeOnScroll = !config.closeOnScroll;
        handleScrollCommand();
        GM_setValue('closeOnScroll', config.closeOnScroll);
    }

    // Toggle the option to enable or disable drag-to-open feature
    function toggleDragToOpen() {
        config.dragToOpenEnabled = !config.dragToOpenEnabled;
        GM_setValue('dragToOpenEnabled', config.dragToOpenEnabled);
    }

    // Toggle the option to enable or disable long-press-to-open feature
    function toggleLongPressOpen() {
        config.longPressEnabled = !config.longPressEnabled;
        GM_setValue('longPressEnabled', config.longPressEnabled);
    }

    // Toggle the option to enable or disable middle-click-to-open feature
    function toggleMiddleClickOpen() {
        config.middleClickEnabled = !config.middleClickEnabled;
        GM_setValue('middleClickEnabled', config.middleClickEnabled);
    }

    // Prompt user to set the long-press duration
    function setLongPressDuration() {
        const duration = prompt('输入长按时间(毫秒):', config.longPressDuration);
        if (duration !== null) {
            config.longPressDuration = parseInt(duration, 10);
            GM_setValue('longPressDuration', config.longPressDuration);
        }
    }

    // Prompt user to set window size
    function setWindowSize() {
        const size = prompt(`输入小窗口宽度x高度(例如: 870x530):`, `${config.windowWidth}x${config.windowHeight}`);
        if (size !== null) {
            const [width, height] = size.split('x').map(val => parseInt(val.trim(), 10));
            if (!isNaN(width) && !isNaN(height)) {
                config.windowWidth = width;
                config.windowHeight = height;
                GM_setValue('windowWidth', config.windowWidth);
                GM_setValue('windowHeight', config.windowHeight);
                if (state.popupWindow && !state.popupWindow.closed) {
                    state.popupWindow.resizeTo(config.windowWidth, config.windowHeight);
                }
            }
        }
    }

    // Update the menu commands when configuration changes
    function updateMenuCommands() {
        menuCommands.forEach((command) => {
            registerMenuCommand(command.label, command.action);
        });
    }

    // Menu commands for configuring the script
    const menuCommands = [
        { label: `模糊旧时刻 (${config.blurEnabled ? '开' : '关'})`, action: toggleBlurEffect },
        { label: `模糊的强弱 (${config.blurIntensity})`, action: setBlurIntensity },
        { label: `轻点关闭否 (${config.closeOnMouseClick ? '开' : '关'})`, action: toggleCloseOnMouseClick },
        { label: `滚动关闭否 (${config.closeOnScroll ? '开' : '关'})`, action: toggleCloseOnScroll },
        { label: `拖动打开否 (${config.dragToOpenEnabled ? '开' : '关'})`, action: toggleDragToOpen },
        { label: `长按打开否 (${config.longPressEnabled ? '开' : '关'})`, action: toggleLongPressOpen },
        { label: `中键打开小窗 (${config.middleClickEnabled ? '开' : '关'})`, action: toggleMiddleClickOpen }, // New menu command
        { label: `长按时间 (${config.longPressDuration}ms)`, action: setLongPressDuration },
        { label: `不变的大小 (${config.windowWidth}x${config.windowHeight})`, action: setWindowSize },
    ];

    // Initialize menu commands
    updateMenuCommands();

    // Event listeners for drag-and-drop, long-press, middle-click, and other interactions
    document.body.addEventListener('mousedown', (event) => {
        if (event.button !== 0) return;

        const linkElement = event.target.tagName === 'A' ? event.target : event.target.closest('a');
        if (!linkElement) return;

        // Track the start position for displacement detection
        state.startPosition = { x: event.clientX, y: event.clientY };

        if (config.longPressEnabled) {
            state.isLongPressing = true;
            state.longPressTimeout = setTimeout(async () => {
                if (state.isLongPressing) {
                    state.isLongPressing = false;
                    await preloadLink(linkElement.href);
                    openPopupWindow(linkElement.href);
                }
            }, config.longPressDuration);
        }
    });

    document.body.addEventListener('mouseup', (event) => {
        state.isLongPressing = false;
        clearTimeout(state.longPressTimeout);
    });

    document.body.addEventListener('mousemove', (event) => {
        if (state.isLongPressing) {
            const displacement = Math.sqrt(
                Math.pow(event.clientX - state.startPosition.x, 2) +
                Math.pow(event.clientY - state.startPosition.y, 2)
            );
            if (displacement > 5) {  // Cancel long-press if significant movement is detected
                state.isLongPressing = false;
                clearTimeout(state.longPressTimeout);
            }
        }
    });

    document.body.addEventListener('dragstart', async (event) => {
        if (!config.dragToOpenEnabled) return;

        const linkElement = event.target.tagName === 'A' ? event.target : event.target.closest('a');
        if (linkElement) {
            state.isDragging = true;
            state.linkToPreload = linkElement.href;

            await preloadLink(state.linkToPreload);

            if (config.closeOnScroll) {
                window.addEventListener('scroll', closePopupOnScroll, { once: true });
            }
        }
    });

    document.body.addEventListener('dragend', () => {
        if (state.isDragging && state.linkToPreload) {
            state.isDragging = false;
            openPopupWindow(state.linkToPreload);
            state.linkToPreload = null;
        }
    });

    document.body.addEventListener('wheel', () => {
        if (config.closeOnScroll) {
            closePopupWindow();
        }
    });

    document.body.addEventListener('click', (event) => {
        if (event.target === state.acrylicOverlay) {
            removeAcrylicOverlay();
        }
    });

    document.body.addEventListener('auxclick', async (event) => {
        if (event.button !== 1 || !config.middleClickEnabled) return; // Check for middle click and if the feature is enabled

        const linkElement = event.target.tagName === 'A' ? event.target : event.target.closest('a');
        if (!linkElement) return;

        event.preventDefault(); // Prevent the default middle click behavior

        await preloadLink(linkElement.href);
        openPopupWindow(linkElement.href);
    });

})();