Interactive Sidebar Navigator for ChatGPT

为ChatGPT官网提供了不遮挡页眉、页脚或滚动条的用户友好、交互性强的侧边栏。
换行
// ==UserScript==
// @name         Interactive Sidebar Navigator for ChatGPT
// @namespace    http://tampermonkey.net/
// @version      3.0
// @description  A user-friendly, interactive sidebar for the ChatGPT official website that does not cover the header, footer, or the scrollbar.
// @description:zh-CN  为ChatGPT官网提供了不遮挡页眉、页脚或滚动条的用户友好、交互性强的侧边栏。
// @license      GPL-3.0-or-later
// @match        https://chat.openai.com/**
// @grant        none
// @run-at       document-end
// ==/UserScript==
 
(function() {
    'use strict';
 
    // Define the header and footer heights if known, or estimate
    const headerHeight = '60px'; // Change this value to the actual height of your header
    const footerHeight = '60px'; // Change this value to the actual height of your footer
 
    // Insert custom styles into the document
    const style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = `
        #customSidebar {
            position: fixed;
            top: ${headerHeight};
            bottom: ${footerHeight};
            right: 0;
            width: 250px;
            background-color: #000;
            color: #fff;
            overflow-y: auto;
            overflow-x: hidden;
            transition: transform 0.3s ease-out;
            transform: translateX(250px);
            z-index: 9999;
            box-shadow: -2px 0 5px rgba(0,0,0,0.5);
            padding-bottom: 10px; // Adjusted padding for footer
        }
 
        #customSidebar div {
            padding: 10px;
            border-bottom: 1px solid #444;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            cursor: pointer;
        }
 
        #customSidebar div.active {
            background-color: #777; // Highlight active item
        }
 
        /* Tooltip styles */
        .sidebar-tooltip {
            visibility: hidden;
            background-color: #555;
            color: #fff;
            text-align: left;
            border-radius: 5px;
            padding: 5px;
            position: absolute;
            z-index: 10001;
            left: 100%;
            top: 0;
            white-space: pre-wrap;
            word-wrap: break-word;
            opacity: 0;
            transition: visibility 0s, opacity 0.5s linear;
        }
 
        .tooltip {
            visibility: hidden;
            background-color: #555;
            color: #fff;
            text-align: left;
            border-radius: 5px;
            padding: 5px;
            position: absolute;
            z-index: 10001;
            left: 100%;
            margin-left: 10px; // Space between item and tooltip
            white-space: nowrap;
            word-wrap: break-word;
            transition: visibility 0s linear 0.3s, opacity 0.3s linear 0.3s;
            opacity: 0;
            pointer-events: none; // Tooltip should not interfere with mouse events
        }
 
        .sidebar-item:hover .tooltip {
            visibility: visible;
            opacity: 1;
            transition-delay: 0s;
        }
 
        .sidebar-tooltip-show {
            visibility: visible;
            opacity: 1;
            transition-delay: 3s; // Delay to show tooltip after 3s of hover
        }
        .sidebar-item:hover::after {
            visibility: visible;
            opacity: 1;
            transition-delay: 0s;
        }
 
        #tooltipContainer {
            display: none; // Start with the tooltip container not displayed
            position: fixed;
            z-index: 10001;
            pointer-events: none; // Ensure the tooltip does not interfere with mouse events
            transition: opacity 0.3s ease-in-out;
            opacity: 0;
        }
 
        .visible #tooltipContainer {
            display: block; // Display tooltip container when a tooltip is visible
            opacity: 1;
        }
 
        #sidebarToggle {
            position: fixed;
            right: 250px;
            top: calc(50% - 20px); // Center toggle vertically, adjusting for its own height
            transform: translateX(100%);
            z-index: 10000;
            cursor: pointer;
            background-color: #444;
            color: #fff;
            border: none;
            width: 30px;
            height: 40px;
            border-radius: 5px 0 0 5px;
            outline: none;
            transition: right 0.3s ease-out, transform 0.3s ease-out;
        }
 
        .sidebar-icon-bar {
            display: block;
            width: 20px;
            height: 2px;
            background-color: #fff;
            margin: 6px auto;
            transition: background-color 0.3s, transform 0.3s ease-out;
        }
 
        .toggle-open .top-bar {
            transform: translateY(8px) rotateZ(45deg);
        }
 
        .toggle-open .middle-bar {
            opacity: 0;
        }
 
        .toggle-open .bottom-bar {
            transform: translateY(-8px) rotateZ(-45deg);
        }
 
        body {
            padding-right: 250px; // Make space for the sidebar when it is expanded
        }
        div.sticky.top-0 {
          opacity: 0.3;
        }
    `;
 
  document.head.appendChild(style);
 
	let questionAnswerSelector = '.flex-col.gap-1.md\\:gap-3'
	let customSidebarSelector = '#customSidebar > div'
    let questionAnswerLength=2
    let customSidebarLlength=0
 
  function updateSidebarContent(){
      let elementWithAttribute = document.querySelector(questionAnswerSelector);
 
      if (elementWithAttribute) {
        sidebar.innerHTML = ''
        console.log('elementWithAttribute exists: update')
      }else{
        console.log('elementWithAttribute not exists')
        // updateSidebarContent()
      }
        const allTextItems = Array.from(document.querySelectorAll(questionAnswerSelector));
        if (allTextItems.length > 0) {
            // observer.disconnect();
 
            // Populate the sidebar with items
            allTextItems.forEach((item, index) => {
                if (index % 2 === 0) { // Add odd items
                    const div = document.createElement('div');
                    div.textContent = item.textContent.trim() || 'Untitled';
                  // createTooltip(div, div.textContent); // Add tooltip to each item
                    div.setAttribute('title', div.textContent); // Set the title for default browser tooltip
 
 
 
            // Setup mouse events for showing and hiding the tooltip
            let hoverTimeout;
            div.addEventListener('mouseenter', (e) => {
                const rect = div.getBoundingClientRect();
                hoverTimeout = setTimeout(() => {
                    showTooltip(div.textContent, rect.right, rect.top + window.scrollY);
                }, 3000);
            });
            div.addEventListener('mouseleave', () => {
                clearTimeout(hoverTimeout);
                hideTooltip();
            });
 
                    div.addEventListener('click', () => {
                        // Scroll to the element on the page
                        item.scrollIntoView({ behavior: 'smooth', block: 'start' });
                        // Highlight the active item
                        document.querySelectorAll('#customSidebar div').forEach(d => d.classList.remove('active'));
                        div.classList.add('active');
                    });
                    sidebar.appendChild(div);
                }
 
            // Adjust sidebar overflow after populating it
            adjustSidebarOverflow();
            });
 
            // Initially open the sidebar
            sidebar.style.transform = 'translateX(0)';
            toggleButton.classList.add('toggle-open');
            // Adjust the toggle button position
            setToggleButtonPosition();
 
 
            const customSidebar = document.getElementById('customSidebar');
            if (customSidebar) {
                const divs = customSidebar.querySelectorAll('div');
                divs.forEach((div, index) => {
                    div.textContent = `${index + 1}: ${div.textContent}`;
                });
            } else {
                console.log('#customSidebar not found');
            }
 
        }
  }
 
 
  // Create a global tooltip container
  const tooltipContainer = document.createElement('div');
  tooltipContainer.id = 'tooltipContainer';
  document.body.appendChild(tooltipContainer);
 
 
  // Function to update tooltip content and position
  function showTooltip(text, x, y) {
      tooltipContainer.textContent = text;
      tooltipContainer.style.top = `${y}px`;
      tooltipContainer.style.left = `${x}px`;
      tooltipContainer.classList.add('visible');
  }
 
  function hideTooltip() {
      tooltipContainer.classList.remove('visible');
  }
 
    // Create the sidebar element
    const sidebar = document.createElement('div');
    sidebar.id = 'customSidebar';
    document.body.appendChild(sidebar);
 
    // Create the toggle button
    const toggleButton = document.createElement('button');
    toggleButton.id = 'sidebarToggle';
    toggleButton.innerHTML = `
        <div class="sidebar-icon-bar top-bar"></div>
        <div class="sidebar-icon-bar middle-bar"></div>
        <div class="sidebar-icon-bar bottom-bar"></div>
    `;
    document.body.appendChild(toggleButton);
 
    // Function to set the correct position of the toggle button
    function setToggleButtonPosition() {
        const isSidebarVisible = sidebar.style.transform === 'translateX(0px)';
        toggleButton.style.right = isSidebarVisible ? '250px' : '0';
        toggleButton.style.transform = `translateX(${isSidebarVisible ? '-100%' : '0'})`;
    }
 
    // Initial call to set the toggle button position
    setToggleButtonPosition();
 
    // Toggle functionality
    toggleButton.addEventListener('click', function() {
        const isClosed = sidebar.style.transform.includes('250px');
        sidebar.style.transform = isClosed ? 'translateX(0)' : 'translateX(250px)';
        toggleButton.classList.toggle('toggle-open', isClosed);
        // Wait for the transition to finish before adjusting the toggle button position
        setTimeout(setToggleButtonPosition, 300);
    });
 
 
      // Adjust sidebar overflow based on its content height
    function adjustSidebarOverflow() {
        const sidebar = document.getElementById('customSidebar');
        if (sidebar.scrollHeight > sidebar.clientHeight) {
            sidebar.style.overflowY = 'auto';
        } else {
            sidebar.style.overflowY = 'hidden';
        }
    }
 
  // Observe mutations to the page content
  const observer = new MutationObserver(mutations => {
    questionAnswerLength = document.querySelectorAll(questionAnswerSelector).length/2
    customSidebarLlength = document.querySelectorAll(customSidebarSelector).length
    if (questionAnswerLength == customSidebarLlength){
      console.log(`questionAnswerLength: ${questionAnswerLength} == customSidebarLlength: ${customSidebarLlength}`)
      return
    }
    mutations.forEach(mutation => {
        // Check if the mutation occurs on a form element or its descendants
        let target = mutation.target;
        while (target !== document && target.nodeName !== 'FORM') {
            target = target.parentNode;
        }
 
        // If the change does not occur on a form element, perform the corresponding action
        if (target.nodeName !== 'FORM') {
            console.log('Performing changes on non-form element');
            console.log('Invoke updateSidebarContent');
            sidebar.innerHTML = '';
            updateSidebarContent();
        }
    });
 
 
  });
 
  // Configuration for the observer
  const config = {
      // attributes: true,       // Listen for attribute changes
      // characterData: true,    // Listen for text content changes
      childList: true,        // Listen for additions/removals of child elements
      subtree: true           // Listen for changes in all descendant nodes
  };
 
 
  let checkExist = setInterval(function() {
    // '.flex-col.gap-1.md\\:gap-3'
    // 'div.group.relative.active\\:opacity-90'
     // Find the element to observe (e.g., main content area)
    const observeElement = document.querySelector('main');
    if (observeElement != null) {
      console.log(`observeElement: ${observeElement}`);
      // Start observing mutations
      observer.observe(observeElement, config);
      clearInterval(checkExist);
 
    }
  }, 1000);
 
 
})();
欢迎访问Greasy Fork镜像
