☰

ChatGPT visual Enhancements for message clarity

Enhances the ChatGPT interface by visually highlighting the active chat link and styling message boxes for the assistant and user.

当前为 2025-01-18 提交的版本，查看 最新版本。

// ==UserScript==
// @name         ChatGPT visual Enhancements for message clarity
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Enhances the ChatGPT interface by visually highlighting the active chat link and styling message boxes for the assistant and user.
// @author       noushadBug
// @match        https://chatgpt.com/*
// @icon         https://chatgpt.com/favicon.ico
// @license      MIT
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    // Function to update the active <li> state
    function updateActiveState() {
        const listItems = document.querySelectorAll('li.relative');
        const currentPath = window.location.pathname;

        listItems.forEach(li => {
            const anchor = li.querySelector('a'); // Find the <a> inside <li>
            if (anchor && anchor.getAttribute('href') === currentPath) {
                // If href matches the current path, style it as active
                li.classList.add('active');
                li.style.background = 'black';
                li.style.borderRadius = '20px';
            } else {
                // Remove active styles from other <li> elements
                li.classList.remove('active');
                li.style.background = '';
                li.style.borderRadius = '';
            }
        });
    }

    // Function to style assistant messages
    function styleAssistantMessages() {
        const messages = document.querySelectorAll('[data-message-author-role="assistant"]');

        messages.forEach(message => {
            if (!message.classList.contains('custom-assistant-message-container')) {
                // Add custom class and apply styles
                message.classList.add('custom-assistant-message-container');
                message.style.background = '#414c3b';
                message.style.padding = '1em';
                message.style.borderRadius = '10px';
            }
        });
    }

    // Observe URL and DOM changes
    const observer = new MutationObserver(() => {
        updateActiveState();
        styleAssistantMessages();
    });

    // Start observing changes to the document body
    observer.observe(document.body, { childList: true, subtree: true });

    // Initial calls to set up states
    updateActiveState();
    styleAssistantMessages();

    // Clean up when the script is removed
    window.addEventListener('unload', () => observer.disconnect());
})();