☰

Gemini - Quick Navigation for AI Conversations

Add navigation buttons to the Gemini conversation page: switch up and down between AI answers, and jump to the top/bottom with one click

// ==UserScript==
// @name         Gemini - Quick Navigation for AI Conversations
// @name:zh-CN   Gemini - AI对话快速导航
// @namespace    http://tampermonkey.net/
// @version      5.1
// @description  Add navigation buttons to the Gemini conversation page: switch up and down between AI answers, and jump to the top/bottom with one click
// @description:zh-CN  在Gemini对话页面添加导航按钮：上下切换AI回答，一键到顶部/底部
// @author       Epodak
// @match        https://gemini.google.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=gemini.google.com
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // 创建样式
    const style = document.createElement('style');
    style.textContent = `
        .nav-buttons-container {
            position: fixed;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10000;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .nav-button {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 2px solid #4285f4;
            background: white;
            color: #4285f4;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .extreme-button {
            width: 40px;
            height: 40px;
            font-size: 16px;
            border-color: #ea4335;
        }

        .extreme-button:hover {
            background: #ea4335;
            color: white;
        }

        .nav-button:hover {
            background: #4285f4;
            color: white;
            transform: scale(1.1);
        }

        .nav-button.disabled {
            opacity: 0.5;
            pointer-events: none;
        }
    `;
    document.head.appendChild(style);

    // 创建按钮
    const navContainer = document.createElement('div');
    navContainer.className = 'nav-buttons-container';

    const topButton = document.createElement('div');
    topButton.className = 'nav-button extreme-button';
    topButton.innerHTML = '⤴';
    topButton.title = '跳转到顶部';

    const upButton = document.createElement('div');
    upButton.className = 'nav-button';
    upButton.innerHTML = '↑';
    upButton.title = '上一个AI回答';

    const downButton = document.createElement('div');
    downButton.className = 'nav-button';
    downButton.innerHTML = '↓';
    downButton.title = '下一个AI回答';

    const bottomButton = document.createElement('div');
    bottomButton.className = 'nav-button extreme-button';
    bottomButton.innerHTML = '⤵';
    bottomButton.title = '跳转到底部';

    navContainer.append(topButton, upButton, downButton, bottomButton);
    document.body.appendChild(navContainer);

    // 获取所有AI回答
    function getAllResponses() {
        return Array.from(document.querySelectorAll('model-response'));
    }

    // 获取当前中心的AI回答
    function getCurrentResponse() {
        const responses = getAllResponses();
        if (!responses.length) return null;

        const center = window.innerHeight / 2;
        let closest = responses[0];
        let minDistance = Infinity;

        for (const response of responses) {
            const rect = response.getBoundingClientRect();
            const distance = Math.abs(rect.top + rect.height / 2 - center);
            if (distance < minDistance) {
                minDistance = distance;
                closest = response;
            }
        }
        return closest;
    }

    // 跳转到指定回答
    function scrollTo(response) {
        if (response) {
            response.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    }

    // 上一个回答
    function goPrevious() {
        const responses = getAllResponses();
        if (!responses.length) return;

        const current = getCurrentResponse();
        const index = responses.indexOf(current);

        if (index > 0) {
            scrollTo(responses[index - 1]);
        } else {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
    }

    // 下一个回答
    function goNext() {
        const responses = getAllResponses();
        if (!responses.length) return;

        const current = getCurrentResponse();
        const index = responses.indexOf(current);

        if (index < responses.length - 1) {
            scrollTo(responses[index + 1]);
        }
    }

    // 查找实际的滚动容器
    function findScrollContainer() {
        // 从model-response元素向上查找有滚动的父容器
        const firstResponse = document.querySelector('model-response');
        if (firstResponse) {
            let element = firstResponse.parentElement;
            while (element && element !== document.body) {
                const hasScroll = element.scrollHeight > element.clientHeight;
                const overflowY = window.getComputedStyle(element).overflowY;

                if (hasScroll && (overflowY === 'auto' || overflowY === 'scroll')) {
                    return element;
                }
                element = element.parentElement;
            }
        }
        return null;
    }

    // 跳转到顶部
    function goTop() {
        const scrollContainer = findScrollContainer();
        if (scrollContainer) {
            scrollContainer.scrollTop = 0;
        } else {
            window.scrollTo({ top: 0, behavior: 'auto' });
        }
    }

    // 跳转到底部（优化版：先快速到底部，再定位到最后AI回答）
    function goBottom() {
        // 1. 先快速跳转到页面最底部（模拟End键）
        const scrollContainer = findScrollContainer();
        if (scrollContainer) {
            scrollContainer.scrollTop = scrollContainer.scrollHeight;
        } else {
            window.scrollTo({ top: document.body.scrollHeight, behavior: 'auto' });
        }

        // 2. 等待一下让内容加载，然后定位到最后一个AI回答
        setTimeout(() => {
            const responses = getAllResponses();
            if (responses.length > 0) {
                scrollTo(responses[responses.length - 1]);
            }
        }, 200);
    }

    // 更新按钮状态
    function updateButtons() {
        const responses = getAllResponses();
        const current = getCurrentResponse();

        if (!responses.length || !current) {
            upButton.classList.add('disabled');
            downButton.classList.add('disabled');
            return;
        }

        const index = responses.indexOf(current);

        // 只有在页面顶部且是第一个回答时禁用上一个按钮
        upButton.classList.toggle('disabled',
            window.scrollY <= 10 && index === 0);

        // 下一个按钮基本不禁用
        downButton.classList.remove('disabled');

        // TOP和BOTTOM按钮始终可用
        topButton.classList.remove('disabled');
        bottomButton.classList.remove('disabled');
    }

    // 事件监听
    topButton.onclick = goTop;
    upButton.onclick = goPrevious;
    downButton.onclick = goNext;
    bottomButton.onclick = goBottom;

    // 滚动监听
    let timer;
    window.addEventListener('scroll', () => {
        clearTimeout(timer);
        timer = setTimeout(updateButtons, 100);
    });

    // DOM变化监听
    new MutationObserver(() => {
        setTimeout(updateButtons, 200);
    }).observe(document.body, { childList: true, subtree: true });

    // 键盘快捷键
    document.addEventListener('keydown', (e) => {
        if (e.target.matches('input, textarea, [contenteditable="true"]')) return;

        if ((e.ctrlKey || e.metaKey) && e.key === 'ArrowUp') {
            e.preventDefault();
            goPrevious();
        }
        if ((e.ctrlKey || e.metaKey) && e.key === 'ArrowDown') {
            e.preventDefault();
            goNext();
        }
        // 移除Ctrl+Home快捷键，因为它在Gemini中不工作
        // 保留Ctrl+End是为了与goBottom功能一致
        if ((e.ctrlKey || e.metaKey) && e.key === 'End') {
            e.preventDefault();
            goBottom();
        }
    });

    // 初始化
    setTimeout(updateButtons, 1000);

})();