A unified interface for scrolling, navigation in ChatGPT, GROK, and DEEPSEEK AI chats with multiple themes. 为ChatGPT、GROK和DEEPSEEK AI聊天提供统一的滚动导航界面，支持多种主题风格和自定义设置。
// ==UserScript==
// @name ChatGPT, GROK, and DEEPSEEK AI WEB Chat Scroll Navigator Tool(AI网页聊天智能滚动导航工具)
// @namespace http://tampermonkey.net/
// @version 0.24
// @description A unified interface for scrolling, navigation in ChatGPT, GROK, and DEEPSEEK AI chats with multiple themes. 为ChatGPT、GROK和DEEPSEEK AI聊天提供统一的滚动导航界面，支持多种主题风格和自定义设置。
// @author Lepturus
// @match *://chatgpt.com/*
// @match *://chat.deepseek.com/*
// @match *://grok.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
// @grant GM_addStyle
// @grant GM_getValue
// @grant GM_setValue
// @license MIT
// ==/UserScript==
(function () {
'use strict';
// --- 1. CONFIGURATION & STATE --- //
const CONFIG = {
platforms: {
chatgpt: { container: '.flex.basis-auto.flex-col.grow.overflow-hidden div.relative.h-full div.overflow-y-auto' },
grok: { container: '.scrollbar-gutter-stable' },
deepseek: { container: '.scrollable' },
generic: { container: 'html, body' }
},
defaults: {
showAutoScrollBtn: true,
showSectionNavBtn: true,
language: 'en',
themeColor: '#007AFF',
themeStyle: 'minimal',
scrollSpeed: 5,
showProgressIndicator: true,
alwaysShowButtons: true,
iconSet: 'minimal',
buttonPosition: 'bottom-right'
},
iconSets: {
minimal: {
settings: '⚙️', // 齿轮
section: '📄', // 文档
autoscroll: '⏯️', // 播放/暂停
scrollTop: '⬆️', // 向上箭头
scrollBottom: '⬇️' // 向下箭头
},
colorful: {
settings: '🎨', // 调色板
section: '📖', // 书本
autoscroll: '🚀', // 火箭
scrollTop: '👆', // 向上手指
scrollBottom: '👇' // 向下手指
},
tech: {
settings: '🔧', // 扳手
section: '📊', // 图表
autoscroll: '⚡', // 闪电
scrollTop: '🔼', // 三角形上
scrollBottom: '🔽' // 三角形下
},
forest: {
settings: '🌿', // 叶子
section: '🌳', // 树
autoscroll: '🌊', // 波浪
scrollTop: '⛰️', // 山峰
scrollBottom: '🌱' // 幼苗
},
anime: {
settings: '✨', // 星星
section: '📑', // 书签
autoscroll: '🎵', // 音乐
scrollTop: '↑', // 简洁向上箭头
scrollBottom: '↓' // 简洁向下箭头
}
},
themes: {
minimal: {
name: { en: 'Minimal', zh: '简约风格' },
bgColor: '#2c2c2e',
hoverColor: '#444',
activeColor: 'var(--enh-nav-theme)',
textColor: 'white',
shadow: '0 4px 12px rgba(0,0,0,0.3)',
panelBg: '#1e1e1e',
panelBorder: '1px solid #e0e0e0',
selectColor: 'black',
},
colorful: {
name: { en: 'Colorful', zh: '多彩风格' },
bgColor: 'linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%)',
hoverColor: 'linear-gradient(135deg, #ff6a6e 0%, #f8c0b4 100%)',
activeColor: 'linear-gradient(135deg, #ff4b50 0%, #f6b0a0 100%)',
textColor: '#7c4dff',
shadow: '0 8px 16px rgba(124, 77, 255, 0.4)',
panelBg: 'linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)',
panelBorder: '1px solid rgba(124, 77, 255, 0.3)',
selectColor: 'rgba(255,255,255,0.2)',
},
tech: {
name: { en: 'Tech', zh: '科技风格' },
bgColor: 'rgba(0, 20, 40, 0.8)',
hoverColor: 'rgba(0, 100, 200, 0.8)',
activeColor: 'var(--enh-nav-theme)',
textColor: '#00e5ff',
shadow: '0 0 15px rgba(0, 229, 255, 0.7)',
panelBg: 'rgba(0, 30, 60, 0.95)',
panelBorder: '1px solid rgba(0, 229, 255, 0.5)',
selectColor: 'rgba(255,255,255,0.2)',
},
forest: {
name: { en: 'Forest', zh: '森林风格' },
bgColor: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
hoverColor: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
activeColor: 'linear-gradient(135deg, #2ed573 0%, #1ed6c8 100%)',
textColor: '#004d40',
shadow: '0 6px 14px rgba(0, 77, 64, 0.4)',
panelBg: 'linear-gradient(135deg, #7bc6cc 0%, #be93c5 100%)',
panelBorder: '1px solid rgba(0, 77, 64, 0.3)',
selectColor: 'rgba(255,255,255,0.2)',
},
anime: {
name: { en: 'Cute', zh: '可爱风格' },
bgColor: 'linear-gradient(135deg, #ffcbf2 0%, #e0c3fc 100%)',
hoverColor: 'linear-gradient(135deg, #ffafcc 0%, #cdb4db 100%)',
activeColor: 'linear-gradient(135deg, #ff85a1 0%, #b8a1d9 100%)',
textColor: '#ff006e',
shadow: '0 8px 20px rgba(255, 0, 110, 0.4)',
panelBg: 'linear-gradient(135deg, #f6d5f7 0%, #fbe9d7 100%)',
panelBorder: '1px solid rgba(255, 0, 110, 0.3)',
selectColor: 'rgba(255,255,255,0.2)',
}
},
i18n: {
zh: {
// Main Titles & Tooltips
mainTitle: '导航',
autoScroll: '自动滚动',
pauseAutoScroll: '暂停滚动',
sectionNav: '章节导航',
settings: '设置',
scrollToTop: '滚动到顶部',
scrollToBottom: '滚动到底部',
// Settings Panel
settingsTitle: '脚本设置',
showHideButtons: '显示/隐藏功能按钮',
showReadingButton: '阅读模式',
showAutoScrollButton: '自动滚动',
showSectionNavButton: '章节导航',
showProgressIndicator: '显示进度指示器',
alwaysShowButtons: '常驻显示按钮',
language: '语言',
themeColor: '主题颜色',
themeStyle: '主题风格',
scrollSpeed: '自动滚动速度',
speedValue: (val) => ({ 1: '很慢', 3: '慢', 5: '中等', 8: '快', 10: '很快' })[val] || '自定义',
// Section Nav Panel
navTitle: '页面导航',
noHeadings: '未找到章节标题。',
iconSet: '图标风格',
iconSetMinimal: '简约',
iconSetColorful: '多彩',
iconSetTech: '科技',
iconSetForest: '森林',
iconSetAnime: '可爱',
buttonPosition: '按钮位置',
positionBottomRight: '右下',
positionTopRight: '右上',
positionMiddleRight: '右中'
},
en: {
// Main Titles & Tooltips
mainTitle: 'Navigate',
autoScroll: 'Auto-Scroll',
pauseAutoScroll: 'Pause Auto-Scroll',
sectionNav: 'Section Nav',
settings: 'Settings',
scrollToTop: 'Scroll to Top',
scrollToBottom: 'Scroll to Bottom',
// Settings Panel
settingsTitle: 'Script Settings',
showHideButtons: 'Show/Hide Feature Buttons',
showReadingButton: 'Reading Mode',
showAutoScrollButton: 'Auto-Scroll',
showSectionNavButton: 'Section Nav',
showProgressIndicator: 'Show Progress Indicator',
alwaysShowButtons: 'Always Show Buttons',
language: 'Language',
themeColor: 'Theme Color',
themeStyle: 'Theme Style',
scrollSpeed: 'Auto-Scroll Speed',
speedValue: (val) => ({ 1: 'Very Slow', 3: 'Slow', 5: 'Medium', 8: 'Fast', 10: 'Very Fast' })[val] || 'Custom',
// Section Nav Panel
navTitle: 'Section Navigation',
noHeadings: 'No section headings found.',
iconSet: 'Icon Style',
iconSetMinimal: 'Minimal',
iconSetColorful: 'Colorful',
iconSetTech: 'Tech',
iconSetForest: 'Forest',
iconSetAnime: 'Cute',
buttonPosition: 'Button Position',
positionBottomRight: 'Bottom Right',
positionTopRight: 'Top Right',
positionMiddleRight: 'Middle Right'
}
}
};
let STATE = {
isInitialized: false,
isAutoScrolling: false,
autoScrollInterval: null,
scrollContainer: null,
settings: {},
currentPlatform: 'generic',
};
// --- 2. CORE LOGIC --- //
/** Gets a setting value, falling back to default */
function getSetting(key) {
return GM_getValue(key, CONFIG.defaults[key]);
}
/** Loads all settings into the STATE object */
function loadSettings() {
STATE.settings = {
showAutoScrollBtn: getSetting('showAutoScrollBtn'),
showSectionNavBtn: getSetting('showSectionNavBtn'),
language: getSetting('language'),
themeColor: getSetting('themeColor'),
iconSet: getSetting('iconSet'),
themeStyle: getSetting('themeStyle'),
scrollSpeed: getSetting('scrollSpeed'),
showProgressIndicator: getSetting('showProgressIndicator'),
alwaysShowButtons: getSetting('alwaysShowButtons'),
buttonPosition: getSetting('buttonPosition')
};
}
/** Finds the correct scrollable element on the page */
function findScrollContainer() {
const { host } = window.location;
let platform = 'generic';
if (host.includes('chatgpt.com')) platform = 'chatgpt';
else if (host.includes('grok.com')) platform = 'grok';
else if (host.includes('deepseek.com')) platform = 'deepseek';
STATE.currentPlatform = platform;
const selector = CONFIG.platforms[platform].container;
if (platform === 'deepseek') {
const containers = document.querySelectorAll(selector);
return containers.length > 1 ? containers[1] : containers[0];
}
return platform === 'generic' ? (document.scrollingElement || document.documentElement) : document.querySelector(selector);
}
/** Handles the main scroll button click */
function handleScrollClick() {
if (!STATE.scrollContainer) return;
const isNearTop = STATE.scrollContainer.scrollTop < 100;
STATE.scrollContainer.scrollTo({
top: isNearTop ? STATE.scrollContainer.scrollHeight : 0,
behavior: 'smooth'
});
}
function updateIcons() {
const iconSet = CONFIG.iconSets[STATE.settings.iconSet] || CONFIG.iconSets.minimal;
const settingsBtn = document.getElementById('enh-nav-settings-btn');
if (settingsBtn) settingsBtn.textContent = iconSet.settings;
const sectionBtn = document.getElementById('enh-nav-section-btn');
if (sectionBtn) sectionBtn.textContent = iconSet.section;
const autoscrollBtn = document.getElementById('enh-nav-autoscroll-btn');
if (autoscrollBtn) autoscrollBtn.textContent = iconSet.autoscroll;
updateScrollArrow();
}
function updateScrollArrow() {
if (!STATE.scrollContainer) return;
const arrowEl = document.getElementById('enh-nav-scroll-arrow');
const iconSet = CONFIG.iconSets[STATE.settings.iconSet] || CONFIG.iconSets.minimal;
const isNearTop = STATE.scrollContainer.scrollTop < 100;
if (arrowEl) arrowEl.textContent = isNearTop ? iconSet.scrollBottom : iconSet.scrollTop;
}
/** Toggles Auto-Scroll */
function toggleAutoScroll() {
STATE.isAutoScrolling = !STATE.isAutoScrolling;
const btn = document.getElementById('enh-nav-autoscroll-btn');
if (btn) btn.classList.toggle('active', STATE.isAutoScrolling);
if (STATE.isAutoScrolling) {
STATE.autoScrollInterval = setInterval(() => {
if (!STATE.scrollContainer) return;
const atBottom = STATE.scrollContainer.scrollTop + STATE.scrollContainer.clientHeight >= STATE.scrollContainer.scrollHeight - 2;
if (atBottom) {
toggleAutoScroll(); // Stop scrolling
} else {
const scrollAmount = Math.max(1, STATE.settings.scrollSpeed / 5);
STATE.scrollContainer.scrollBy(0, scrollAmount);
}
}, 20);
} else {
clearInterval(STATE.autoScrollInterval);
}
updateUIText(); // Update title
}
/** Applies the selected button position */
function applyButtonPosition(position) {
const container = document.getElementById('enh-nav-container');
const hoverArea = document.getElementById('enh-nav-hover-area');
if (!container || !hoverArea) return;
container.classList.remove(
'enh-nav-pos-bottom-right',
'enh-nav-pos-top-right',
'enh-nav-pos-middle-right'
);
hoverArea.classList.remove(
'enh-nav-pos-bottom-right',
'enh-nav-pos-top-right',
'enh-nav-pos-middle-right'
);
container.classList.add(`enh-nav-pos-${position}`);
hoverArea.classList.add(`enh-nav-pos-${position}`);
updatePanelPositions(position);
}
/** Updates panel positions based on button position */
function updatePanelPositions(position) {
const panels = document.querySelectorAll('.enh-nav-panel');
panels.forEach(panel => {
panel.classList.remove(
'enh-nav-pos-bottom-right',
'enh-nav-pos-top-right',
'enh-nav-pos-middle-right'
);
panel.classList.add(`enh-nav-pos-${position}`);
});
}
/** Updates the UI text based on the current language without reloading */
function updateUIText() {
const lang = STATE.settings.language;
const translations = CONFIG.i18n[lang];
document.querySelectorAll('[data-i18n-key]').forEach(el => {
const key = el.dataset.i18nKey;
const prop = el.dataset.i18nProp || 'textContent';
if (translations[key]) el[prop] = translations[key];
});
// fix theme style lang not change
const themeSelect = document.getElementById('enh-nav-theme-style');
if (themeSelect) {
Array.from(themeSelect.options).forEach(option => {
const themeId = option.value;
const theme = CONFIG.themes[themeId];
if (theme) {
option.textContent = theme.name[lang] || theme.name.en;
}
});
}
const autoScrollBtn = document.getElementById('enh-nav-autoscroll-btn');
if (autoScrollBtn) autoScrollBtn.title = STATE.isAutoScrolling ? translations.pauseAutoScroll : translations.autoScroll;
const mainBtn = document.getElementById('enh-nav-main-btn');
if (mainBtn && STATE.scrollContainer) {
const isNearTop = STATE.scrollContainer.scrollTop < 100;
mainBtn.title = isNearTop ? translations.scrollToBottom : translations.scrollToTop;
}
// Update speed value text
const speedValueEl = document.getElementById('enh-nav-speed-value');
if (speedValueEl) {
speedValueEl.textContent = translations.speedValue(STATE.settings.scrollSpeed);
}
}
// --- 3. UI CREATION & UPDATES --- //
/** Injects all CSS into the page */
function injectStyles() {
const theme = CONFIG.themes[STATE.settings.themeStyle] || CONFIG.themes.minimal;
GM_addStyle(`
:root {
--enh-nav-theme: ${STATE.settings.themeColor};
--enh-nav-bg: ${theme.bgColor};
--enh-nav-hover: ${theme.hoverColor};
--enh-nav-active: ${theme.activeColor};
--enh-nav-text: ${theme.textColor};
--enh-nav-shadow: ${theme.shadow};
--enh-nav-panel-bg: ${theme.panelBg};
--enh-nav-panel-border: ${theme.panelBorder};
--enh-nav-select: ${theme.selectColor};
}
#enh-nav-container {
position: fixed;
right: 15px;
bottom: 15px;
z-index: 99999;
display: flex !important;
flex-direction: column;
align-items: center;
transition: opacity 0.3s ease;
}
#enh-nav-container.hidden {
opacity: 0;
pointer-events: none;
}
#enh-nav-container:hover,
#enh-nav-container.always-visible {
opacity: 1;
pointer-events: auto;
}
#enh-nav-hover-area {
position: fixed;
right: 0;
bottom: 0;
width: 60px;
height: 60px;
z-index: 99998;
}
.enh-nav-btn {
background: var(--enh-nav-bg);
color: var(--enh-nav-text);
border-radius: 50%;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
border: none;
box-shadow: var(--enh-nav-shadow);
transition: all 0.3s ease;
user-select: none;
}
.enh-nav-btn:hover {
transform: scale(1.1);
background: var(--enh-nav-hover);
}
.enh-nav-btn.active {
background: var(--enh-nav-active);
}
#enh-nav-main-btn {
position: relative;
font-weight: bold;
}
#enh-nav-progress-circle {
position: absolute;
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
#enh-nav-progress-circle-bar {
stroke: var(--enh-nav-theme);
stroke-width: 4;
fill: transparent;
transition: stroke-dashoffset 0.1s linear;
}
#enh-nav-progress-text {
font-size: 12px;
font-weight: bold;
color: var(--enh-nav-text);
}
#enh-nav-menu {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 10px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: bottom center;
transform: scale(0.8) translateY(20px);
opacity: 0;
pointer-events: none;
}
#enh-nav-container:hover #enh-nav-menu {
transform: scale(1) translateY(0);
opacity: 1;
pointer-events: auto;
}
.enh-nav-menu-btn {
width: 40px;
height: 40px;
font-size: 16px;
margin-top: 10px;
}
.enh-nav-panel {
position: fixed;
right: 80px;
bottom: 15px;
width: 210px;
background: var(--enh-nav-panel-bg);
color: var(--enh-nav-text);
border-radius: 16px;
padding: 11px;
box-shadow: var(--enh-nav-shadow);
border: var(--enh-nav-panel-border);
opacity: 0;
transform: translateX(20px);
transition: all 0.3s ease;
pointer-events: none;
z-index: 99998;
backdrop-filter: blur(10px);
}
.enh-nav-panel.visible {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
.enh-nav-panel h3 {
margin: 0 0 11px;
font-size: 15px;
border-bottom: 1px solid rgba(255,255,255,0.2);
padding-bottom: 10px;
text-align: center;
}
.enh-nav-panel .close-btn {
position: absolute;
top: 15px;
right: 15px;
cursor: pointer;
font-size: 16px;
opacity: 0.7;
transition: all 0.2s;
}
.enh-nav-panel .close-btn:hover {
opacity: 1;
transform: scale(1.1);
}
.enh-nav-setting-row {
margin-bottom: 9px;
padding: 6px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.enh-nav-setting-row label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
width: 100%;
}
.enh-nav-panel input[type=checkbox] {
transform: scale(1.2);
accent-color: var(--enh-nav-theme);
}
.enh-nav-panel input[type=color] {
width: 40px;
height: 25px;
border: none;
background: none;
padding: 0;
cursor: pointer;
}
.enh-nav-panel input[type=range] {
width: 100%;
margin-top: 5px;
accent-color: var(--enh-nav-theme);
}
.enh-nav-panel select {
background: var(--enh-nav-select);
color: var(--enh-nav-text);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 8px;
padding: 5px 10px;
cursor: pointer;
}
#enh-nav-section-panel {
width: 350px;
height: 500px;
max-height: 70vh;
right: 90px;
transform: translateX(30px) scale(0.95);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#enh-nav-section-panel.visible {
transform: translateX(0) scale(1);
}
#enh-nav-section-panel ul {
list-style: none;
padding: 0;
margin: 0;
max-height: calc(100% - 60px);
overflow-x: hidden;
overflow-y: auto;
}
#enh-nav-section-panel ul::-webkit-scrollbar {
width: 8px;
}
#enh-nav-section-panel ul::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}
#enh-nav-section-panel ul::-webkit-scrollbar-thumb {
background: var(--enh-nav-theme);
border-radius: 4px;
}
#enh-nav-section-panel ul::-webkit-scrollbar-thumb:hover {
background: var(--enh-nav-active);
}
#enh-nav-section-panel li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 12px 15px;
cursor: pointer;
border-radius: 10px;
font-size: 14px;
margin-bottom: 8px;
transition: all 0.3s ease;
background: rgba(255,255,255,0.05);
opacity: 0;
transform: translateY(10px);
transition-delay: calc(var(--index, 0) * 0.05s);
}
#enh-nav-section-panel.visible li {
opacity: 1;
transform: translateY(0);
}
#enh-nav-section-panel li:hover {
background-color: var(--enh-nav-theme);
color: white;
transform: translateX(5px) translateY(0);
}
#enh-nav-section-panel li[data-i18n-key="noHeadings"] {
text-align: center;
padding: 30px;
font-size: 16px;
opacity: 0.7;
white-space: normal;
transform: none;
}
.theme-preview {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
}
.speed-container {
display: flex;
flex-direction: column;
margin-top: 5px;
}
/* 位置样式 */
#enh-nav-container.enh-nav-pos-bottom-right {
right: 15px;
bottom: 15px;
top: auto;
transform: none;
}
#enh-nav-container.enh-nav-pos-top-right {
right: 15px;
top: 15px;
bottom: auto;
transform: none;
}
#enh-nav-container.enh-nav-pos-middle-right {
right: 15px;
top: 50%;
bottom: auto;
transform: translateY(-50%);
}
/* 菜单方向 */
#enh-nav-container.enh-nav-pos-bottom-right #enh-nav-menu {
flex-direction: column;
margin-bottom: 10px;
margin-top: 0;
}
#enh-nav-container.enh-nav-pos-top-right #enh-nav-menu,
#enh-nav-container.enh-nav-pos-middle-right #enh-nav-menu {
flex-direction: column-reverse;
margin-bottom: 0;
margin-top: 10px;
}
#enh-nav-container.enh-nav-pos-top-right:hover #enh-nav-menu,
#enh-nav-container.enh-nav-pos-middle-right:hover #enh-nav-menu {
transform: scale(1) translateY(0);
}
/* 面板位置 */
#enh-nav-container.enh-nav-pos-bottom-right .enh-nav-panel {
bottom: 15px;
top: auto;
}
#enh-nav-container.enh-nav-pos-top-right .enh-nav-panel {
top: 15px;
bottom: auto;
}
#enh-nav-container.enh-nav-pos-middle-right .enh-nav-panel {
top: 50%;
bottom: auto;
transform: translateX(20px) translateY(-50%);
}
#enh-nav-container.enh-nav-pos-middle-right .enh-nav-panel.visible {
transform: translateX(0) translateY(-50%);
}
/* 悬停区域位置 */
#enh-nav-hover-area.enh-nav-pos-bottom-right {
right: 0;
bottom: 0;
top: auto;
}
#enh-nav-hover-area.enh-nav-pos-top-right {
right: 0;
top: 0;
bottom: auto;
}
#enh-nav-hover-area.enh-nav-pos-middle-right {
right: 0;
top: 50%;
bottom: auto;
transform: translateY(-50%);
}
/* 按钮位置样式*/
#enh-nav-container.enh-nav-pos-bottom-right {
right: 15px;
bottom: 15px;
top: auto;
transform: none;
}
#enh-nav-container.enh-nav-pos-top-right {
right: 15px;
top: 15px;
bottom: auto;
transform: none;
}
#enh-nav-container.enh-nav-pos-middle-right {
right: 15px;
top: 50%;
bottom: auto;
transform: translateY(-50%);
}
/* 调整菜单方向 */
#enh-nav-container.enh-nav-pos-bottom-right #enh-nav-menu {
flex-direction: column;
margin-bottom: 10px;
margin-top: 0;
}
#enh-nav-container.enh-nav-pos-top-right #enh-nav-menu {
flex-direction: column;
margin-bottom: 10px;
margin-top: 0;
}
#enh-nav-container.enh-nav-pos-middle-right #enh-nav-menu {
flex-direction: column;
margin-bottom: 10px;
margin-top: 0;
}
/* 调整面板位置 */
#enh-nav-container.enh-nav-pos-bottom-right .enh-nav-panel {
right: 80px;
bottom: 15px;
top: auto;
}
#enh-nav-container.enh-nav-pos-top-right .enh-nav-panel {
right: 80px;
top: 80px; /* 在按钮下方 */
bottom: auto;
}
#enh-nav-container.enh-nav-pos-middle-right .enh-nav-panel {
right: 80px;
top: calc(50% + 40px); /* 在按钮下方 */
bottom: auto;
transform: translateX(20px) translateY(-50%);
}
#enh-nav-container.enh-nav-pos-middle-right .enh-nav-panel.visible {
transform: translateX(0) translateY(-50%);
}
/* 确保面板在正确位置 */
.enh-nav-panel {
transform: translateX(20px);
}
.enh-nav-panel.visible {
transform: translateX(0);
}
/* 调整悬停区域位置 */
#enh-nav-hover-area.enh-nav-pos-bottom-right {
right: 0;
bottom: 0;
top: auto;
width: 80px;
height: 80px;
}
#enh-nav-hover-area.enh-nav-pos-top-right {
right: 0;
top: 0;
bottom: auto;
width: 80px;
height: 80px;
}
#enh-nav-hover-area.enh-nav-pos-middle-right {
right: 0;
top: 50%;
bottom: auto;
transform: translateY(-50%);
width: 80px;
height: 80px;
}
`);
}
/** Creates the main UI elements */
function createUI() {
const container = document.createElement('div');
container.id = 'enh-nav-container';
if (!STATE.settings.alwaysShowButtons) {
container.classList.add('hidden');
} else {
container.classList.add('always-visible');
}
const hoverArea = document.createElement('div');
hoverArea.id = 'enh-nav-hover-area';
hoverArea.classList.add(`enh-nav-pos-${STATE.settings.buttonPosition || 'bottom-right'}`);
document.body.appendChild(hoverArea);
const progressRadius = 22;
const progressCircumference = 2 * Math.PI * progressRadius;
container.innerHTML = `
<!-- Menu Buttons (appear on hover) -->
<div id="enh-nav-menu">
<button id="enh-nav-settings-btn" class="enh-nav-btn enh-nav-menu-btn" title="Settings" data-i18n-prop="title" data-i18n-key="settings">⚙️</button>
<button id="enh-nav-section-btn" class="enh-nav-btn enh-nav-menu-btn" title="Section Nav" data-i18n-prop="title" data-i18n-key="sectionNav">📄</button>
<button id="enh-nav-autoscroll-btn" class="enh-nav-btn enh-nav-menu-btn" title="Auto-Scroll" data-i18n-prop="title" data-i18n-key="autoScroll">⏯️</button>
</div>
<!-- Main Scroll Button -->
<button id="enh-nav-main-btn" class="enh-nav-btn" title="Scroll to Bottom">
<span id="enh-nav-scroll-arrow">⬇️</span>
<span id="enh-nav-progress-text">0%</span>
<svg id="enh-nav-progress-circle" width="48" height="48">
<circle id="enh-nav-progress-circle-bar" r="${progressRadius}" cx="24" cy="24" stroke-dasharray="${progressCircumference}" stroke-dashoffset="${progressCircumference}"></circle>
</svg>
</button>
<!-- Settings Panel -->
<div id="enh-nav-settings-panel" class="enh-nav-panel" enh-nav-pos-${STATE.settings.buttonPosition || 'bottom-right'}">
<span class="close-btn">✖️</span>
<h3 data-i18n-key="settingsTitle">Script Settings</h3>
<div class="enh-nav-setting-row">
<strong data-i18n-key="showHideButtons">Show/Hide Buttons</strong>
</div>
<div class="enh-nav-setting-row">
<label><span data-i18n-key="showAutoScrollButton">Auto-Scroll</span><input type="checkbox" id="enh-nav-toggle-autoscroll"></label>
</div>
<div class="enh-nav-setting-row">
<label><span data-i18n-key="showSectionNavButton">Section Nav</span><input type="checkbox" id="enh-nav-toggle-section"></label>
</div>
<div class="enh-nav-setting-row">
<label><span data-i18n-key="showProgressIndicator">Show Progress Indicator</span><input type="checkbox" id="enh-nav-toggle-progress"></label>
</div>
<div class="enh-nav-setting-row">
<label><span data-i18n-key="alwaysShowButtons">Always Show Buttons</span><input type="checkbox" id="enh-nav-toggle-always-show"></label>
</div>
<div class="enh-nav-setting-row">
<label><span data-i18n-key="buttonPosition">Button Position</span>
<select id="enh-nav-button-position">
<option value="bottom-right" data-i18n-key="positionBottomRight">Bottom Right</option>
<option value="top-right" data-i18n-key="positionTopRight">Top Right</option>
<option value="middle-right" data-i18n-key="positionMiddleRight">Middle Right</option>
</select>
</label>
</div>
<hr style="border-color: rgba(255,255,255,0.2); margin: 15px 0;">
<div class="enh-nav-setting-row">
<label><span data-i18n-key="language">Language</span>
<select id="enh-nav-lang-select">
<option value="en">English</option>
<option value="zh">中文</option>
</select>
</label>
</div>
<div class="enh-nav-setting-row">
<label><span data-i18n-key="themeStyle">Theme Style</span>
<select id="enh-nav-theme-style">
${Object.entries(CONFIG.themes).map(([id, theme]) =>
`<option value="${id}">${theme.name[STATE.settings.language] || theme.name.en}</option>`
).join('')}
</select>
</label>
</div>
<div class="enh-nav-setting-row">
<label><span data-i18n-key="iconSet">Icon Style</span>
<select id="enh-nav-icon-set">
<option value="minimal" data-i18n-key="iconSetMinimal">Minimal</option>
<option value="colorful" data-i18n-key="iconSetColorful">Colorful</option>
<option value="tech" data-i18n-key="iconSetTech">Tech</option>
<option value="forest" data-i18n-key="iconSetForest">Forest</option>
<option value="anime" data-i18n-key="iconSetAnime">Anime</option>
</select>
</label>
</div>
<div class="enh-nav-setting-row">
<label><span data-i18n-key="themeColor">Theme Color</span><input type="color" id="enh-nav-theme-color"></label>
</div>
<div class="enh-nav-setting-row">
<label><span data-i18n-key="scrollSpeed">Scroll Speed</span> <span id="enh-nav-speed-value"></span></label>
<div class="speed-container">
<input type="range" id="enh-nav-scroll-speed" min="1" max="10" step="1">
</div>
</div>
</div>
<!-- Section Nav Panel -->
<div id="enh-nav-section-panel" class="enh-nav-panel" enh-nav-pos-${STATE.settings.buttonPosition || 'bottom-right'}">
<span class="close-btn">✖️</span>
<h3 data-i18n-key="navTitle">Page Navigation</h3>
<ul id="enh-nav-section-list"></ul>
</div>
`;
document.body.appendChild(container);
// Apply initial visibility from settings
document.getElementById('enh-nav-autoscroll-btn').style.display = STATE.settings.showAutoScrollBtn ? 'flex' : 'none';
document.getElementById('enh-nav-section-btn').style.display = STATE.settings.showSectionNavBtn ? 'flex' : 'none';
// Apply initial progress indicator setting
updateProgressIndicatorVisibility();
}
/** Updates the circular progress bar and scroll direction arrow */
function updateScrollState() {
if (!STATE.scrollContainer) return;
const { scrollTop, scrollHeight, clientHeight } = STATE.scrollContainer;
const scrollableHeight = scrollHeight - clientHeight;
const arrowEl = document.getElementById('enh-nav-scroll-arrow');
const textEl = document.getElementById('enh-nav-progress-text');
const circleBar = document.getElementById('enh-nav-progress-circle-bar');
if (scrollableHeight <= 0) {
if (arrowEl) arrowEl.style.display = 'block';
if (textEl) textEl.style.display = 'none';
if (arrowEl) arrowEl.textContent = '↕️';
return;
}
const percent = Math.min(Math.round((scrollTop / scrollableHeight) * 100), 100);
const isNearTop = scrollTop < 100;
const isNearBottom = scrollTop > scrollableHeight - 100;
// Show arrow or percentage based on settings
const showProgress = STATE.settings.showProgressIndicator;
if (isNearTop || isNearBottom || !showProgress) {
if (arrowEl) arrowEl.style.display = 'block';
if (textEl) textEl.style.display = 'none';
if (arrowEl) arrowEl.textContent = isNearTop ? '⬇️' : '⬆️';
} else {
if (arrowEl) arrowEl.style.display = 'none';
if (textEl) textEl.style.display = 'block';
if (textEl) textEl.textContent = `${percent}%`;
}
// Update progress circle
if (circleBar) {
const radius = circleBar.r.baseVal.value;
const circumference = 2 * Math.PI * radius;
const offset = circumference - (percent / 100) * circumference;
circleBar.style.strokeDashoffset = offset;
}
// Update main button title for accessibility
updateScrollArrow();
updateUIText();
}
/** Updates progress indicator visibility based on setting */
function updateProgressIndicatorVisibility() {
const textEl = document.getElementById('enh-nav-progress-text');
const circleBar = document.getElementById('enh-nav-progress-circle-bar');
const showProgress = STATE.settings.showProgressIndicator;
if (textEl && circleBar) {
textEl.style.display = showProgress ? 'block' : 'none';
circleBar.style.display = showProgress ? 'block' : 'none';
}
updateScrollState(); // Refresh the display
}
/** Populates the section navigation panel */
function updateSectionNav() {
const list = document.getElementById('enh-nav-section-list');
const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6'); // 包含所有标题级别
list.innerHTML = '';
const unwantedTexts = [
'脚本设置', 'Script Settings',
'页面导航', 'Section Navigation',
'Upgrade to SuperGrok',
'Chat history', 'Chats', 'You said:', 'ChatGPT said:',
'导航', 'Navigate',
'设置', 'Settings'
];
if (headings.length === 0) {
list.innerHTML = `<li data-i18n-key="noHeadings" style="opacity: 0.6; text-align: center; padding: 30px;">
${CONFIG.i18n[STATE.settings.language].noHeadings}
</li>`;
return;
}
let hasValidHeadings = false;
let index = 0;
headings.forEach(h => {
const text = h.textContent.trim();
const id = h.id || h.textContent.toLowerCase().replace(/\s+/g, '-');
if (text === '' || unwantedTexts.includes(text)) return;
hasValidHeadings = true;
const item = document.createElement('li');
item.textContent = text;
const level = parseInt(h.tagName.substring(1));
item.style.paddingLeft = `${(level - 1) * 15 + 15}px`;
item.style.fontSize = `${18 - level * 2}px`;
item.style.fontWeight = level <= 2 ? 'bold' : 'normal';
item.style.setProperty('--index', index);
index++;
item.addEventListener('mouseenter', () => {
h.style.transition = 'background-color 0.2s';
h.style.backgroundColor = 'var(--enh-nav-theme)';
});
item.addEventListener('mouseleave', () => {
setTimeout(() => {
h.style.backgroundColor = '';
}, 200);
});
item.onclick = () => {
const element = document.getElementById(id) || h;
element.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
const originalBg = element.style.backgroundColor;
element.style.backgroundColor = 'var(--enh-nav-theme)';
element.style.transition = 'background-color 0.3s';
};
list.appendChild(item);
});
if (!hasValidHeadings) {
list.innerHTML = `<li data-i18n-key="noHeadings" style="opacity: 0.6; text-align: center; padding: 30px;">
${CONFIG.i18n[STATE.settings.language].noHeadings}
</li>`;
}
}
/** Toggles the visibility of a panel */
function togglePanel(panelId, forceState) {
const panel = document.getElementById(panelId);
if (!panel) return;
// Hide other panels
// document.querySelectorAll('.enh-nav-panel').forEach(p => {
// if (p.id !== panelId) p.classList.remove('visible');
// });
const isVisible = panel.classList.toggle('visible', forceState);
// Toggle current panel
// If we are opening the section nav, refresh its content
if (isVisible && panelId === 'enh-nav-section-panel') {
updateSectionNav();
}
}
/** Applies the selected theme style */
function applyThemeStyle(themeId) {
STATE.settings.themeStyle = themeId;
GM_setValue('themeStyle', themeId);
injectStyles(); // Re-inject styles with the new theme
}
// --- 4. EVENT LISTENERS --- //
/** Binds all event listeners to the UI */
function attachEventListeners() {
// Main Actions
document.getElementById('enh-nav-main-btn').addEventListener('click', handleScrollClick);
document.getElementById('enh-nav-autoscroll-btn').addEventListener('click', toggleAutoScroll);
// Panel Toggles
document.getElementById('enh-nav-settings-btn').addEventListener('click', () => togglePanel('enh-nav-settings-panel'));
document.getElementById('enh-nav-section-btn').addEventListener('click', () => togglePanel('enh-nav-section-panel'));
// Close Panel Buttons
document.querySelectorAll('.enh-nav-panel .close-btn').forEach(btn => {
btn.addEventListener('click', (e) => e.currentTarget.parentElement.classList.remove('visible'));
});
// Settings Controls
const settingsMap = {
'enh-nav-toggle-autoscroll': { key: 'showAutoScrollBtn', target: '#enh-nav-autoscroll-btn', type: 'toggle' },
'enh-nav-toggle-section': { key: 'showSectionNavBtn', target: '#enh-nav-section-btn', type: 'toggle' },
'enh-nav-toggle-progress': { key: 'showProgressIndicator', type: 'value', callback: updateProgressIndicatorVisibility },
'enh-nav-icon-set': {
key: 'iconSet',
type: 'value',
callback: updateIcons
},
'enh-nav-button-position': {
key: 'buttonPosition',
type: 'value',
callback: (value) => {
applyButtonPosition(value);
setTimeout(() => {
updatePanelPositions(value);
}, 100);
}
},
'enh-nav-toggle-always-show': {
key: 'alwaysShowButtons',
type: 'toggle',
callback: (value) => {
const container = document.getElementById('enh-nav-container');
const hoverArea = document.getElementById('enh-nav-hover-area');
if (value) {
container.classList.add('always-visible');
container.classList.remove('hidden');
if (hoverArea) hoverArea.style.display = 'none';
} else {
container.classList.remove('always-visible');
container.classList.add('hidden');
if (hoverArea) hoverArea.style.display = 'block';
}
}
},
'enh-nav-lang-select': { key: 'language', type: 'value', callback: updateUIText },
'enh-nav-theme-style': { key: 'themeStyle', type: 'value', callback: applyThemeStyle },
'enh-nav-theme-color': {
key: 'themeColor', type: 'value', callback: (value) => {
document.documentElement.style.setProperty('--enh-nav-theme', value);
updateUIText();
}
},
'enh-nav-scroll-speed': { key: 'scrollSpeed', type: 'value', callback: updateUIText },
};
for (const [id, config] of Object.entries(settingsMap)) {
const el = document.getElementById(id);
if (!el) continue;
const eventType = (el.type === 'checkbox' || el.tagName === 'SELECT') ? 'change' : 'input';
// Set initial value
if (el.type === 'checkbox') el.checked = STATE.settings[config.key];
else el.value = STATE.settings[config.key];
// Add listener
el.addEventListener(eventType, (e) => {
const value = (e.target.type === 'checkbox') ? e.target.checked : e.target.value;
GM_setValue(config.key, value);
STATE.settings[config.key] = value;
// Apply change instantly
if (config.type === 'toggle' && config.target) {
document.querySelector(config.target).style.display = value ? 'flex' : 'none';
}
if (config.callback) {
config.callback(value);
}
});
}
const hoverArea = document.getElementById('enh-nav-hover-area');
const container = document.getElementById('enh-nav-container');
if (hoverArea && container) {
hoverArea.addEventListener('mouseenter', () => {
if (!STATE.settings.alwaysShowButtons) {
container.classList.remove('hidden');
}
});
container.addEventListener('mouseleave', () => {
if (!STATE.settings.alwaysShowButtons) {
container.classList.add('hidden');
}
});
}
}
// --- 5. INITIALIZATION --- //
/** Main function to start the script */
function init() {
if (document.getElementById('enh-nav-container')) return;
STATE.scrollContainer = findScrollContainer();
if (!STATE.scrollContainer) {
setTimeout(init, 1000); // Retry if container not found yet
return;
}
loadSettings();
injectStyles();
updateIcons();
createUI();
attachEventListeners();
updateUIText();
updateScrollState();
applyButtonPosition(STATE.settings.buttonPosition);
const scrollTarget = (STATE.currentPlatform === 'generic') ? window : STATE.scrollContainer;
scrollTarget.addEventListener('scroll', updateScrollState, { passive: true });
const observer = new MutationObserver(() => {
const currentContainer = findScrollContainer();
if (STATE.scrollContainer !== currentContainer) {
STATE.scrollContainer = currentContainer;
const newTarget = (STATE.currentPlatform === 'generic') ? window : STATE.scrollContainer;
newTarget.addEventListener('scroll', updateScrollState, { passive: true });
updateScrollState();
}
});
observer.observe(document.body, { childList: true, subtree: true });
console.log("Enhanced AI Chat Scroll Navigator initialized.");
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();