【油猴脚本】基于谷歌搜索引擎的站内搜索

// ==UserScript==
// @name         Google 本站搜索
// @match        *://*/*
// @grant        GM_setValue
// @grant        GM_getValue
// @version      1.0
// ==/UserScript==

(function () {
    \'use strict\';
    let side = GM_getValue(\'gs_side\', \'right\'),
        topPos = GM_getValue(\'gs_top\', window.innerHeight * 0.4);

    const box = document.createElement(\'div\'), WIDTH = 240;
    box.id = \'gs-widget\';
    box.innerHTML = `🔍`;
    document.body.appendChild(box);

    const style = document.createElement(\'style\');
    style.textContent = `
        #gs-widget {
            position: fixed; top: ${topPos}px; height: 40px; width: 44px;
            z-index: 2147483647; transition: opacity 0.3s; opacity: 0.8;
            overflow: visible;
        }
        #gs-widget:hover { opacity: 1; }

        .gs-wrapper {
            display: flex; align-items: center; height: 100%; width: ${WIDTH}px;
            /* 修改为白色毛玻璃背景 */
            background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(15px);
            border: 0.5px solid rgba(0, 0, 0, 0.1);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            position: absolute; top: 0;
        }

        /* 侧边无缝连接逻辑 */
        #gs-widget.right { right: 0; }
        #gs-widget.right .gs-wrapper {
            right: 0; border-radius: 20px 0 0 20px; border-right: none;
            transform: translateX(calc(${WIDTH}px - 44px));
        }
        #gs-widget.right:hover .gs-wrapper { transform: translateX(0); }

        #gs-widget.left { left: 0; }
        #gs-widget.left .gs-wrapper {
            left: 0; flex-direction: row-reverse; border-radius: 0 20px 20px 0; border-left: none;
            transform: translateX(calc(-${WIDTH}px + 44px));
        }
        #gs-widget.left:hover .gs-wrapper { transform: translateX(0); }

        .gs-h {
            width: 44px; height: 100%; display: flex; align-items: center; justify-content: center;
            cursor: pointer; font-size: 18px; flex-shrink: 0;
            color: #333; /* 图标颜色改为深色 */
            user-select: none; transition: transform 0.2s ease;
        }
        .gs-h:hover { transform: scale(1.15); }

        /* 内部搜索框：白色背景下的胶囊造型 */
        #gs-input-field {
            flex: 1 !important; height: 28px !important; border: none !important;
            background: rgba(0, 0, 0, 0.05) !important;
            color: #333 !important; /* 文字颜色改为深灰 */
            padding: 0 15px !important; outline: none !important; font-size: 13px !important;
            border-radius: 14px !important;
            margin: 0 12px 0 6px !important;
            transition: background 0.2s;
        }
        #gs-widget.left #gs-input-field {
            margin: 0 6px 0 12px !important;
        }
        #gs-input-field::placeholder { color: #999; }
        #gs-input-field:focus { background: rgba(0, 0, 0, 0.08) !important; }
    `;
    document.head.appendChild(style);
    box.className = side;

    const h = box.querySelector(\'.gs-h\'), input = box.querySelector(\'#gs-input-field\');

    let moved = false;
    h.onmousedown = e => {
        moved = false;
        box.style.transition = \'none\';
        let startY = e.clientY, startTop = box.offsetTop;
        const move = e => {
            if (Math.abs(e.clientY - startY) > 5) {
                moved = true;
                box.style.top = (startTop + e.clientY - startY) + \'px\';
            }
        };
        const up = e => {
            box.style.transition = \'opacity 0.3s\';
            side = (e.clientX < window.innerWidth / 2) ? \'left\' : \'right\';
            box.className = side; GM_setValue(\'gs_side\', side); GM_setValue(\'gs_top\', box.offsetTop);
            document.removeEventListener(\'mousemove\', move); document.removeEventListener(\'mouseup\', up);
        };
        document.addEventListener(\'mousemove\', move); document.addEventListener(\'mouseup\', up);
    };

    input.onkeydown = e => {
        if (e.key === \'Enter\' && input.value.trim()) {
            location.href = `https://www.google.com/search?q=site:${location.hostname} ${encodeURIComponent(input.value.trim())}`;
            input.value = \'\';
        }
    };
})();