☰

ChatGPT Character Counter

Adds a character counter to message fields on chatgpt.com

// ==UserScript==
// @name         ChatGPT Character Counter
// @namespace    https://leaked.tools/
// @version      1.4
// @description  Adds a character counter to message fields on chatgpt.com
// @author       Sango
// @match        *://chatgpt.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=chatgpt.com
// @license      MIT
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    const maxCharacters = 32732;

function addCharacterCounter(element, position) {
    // Avoid adding multiple counters to the same element
    if (position.previousElementSibling && position.previousElementSibling.classList.contains('character-counter')) {
        return;
    }

    // Create the counter element
    const counter = document.createElement('div');
    counter.className = 'character-counter flex items-center justify-center';
    counter.style.fontSize = '14px';
    counter.style.color = '#555';
    counter.style.marginRight = '5px';
    counter.textContent = `0/${maxCharacters}`;

    // Insert the counter before the element
    position.insertAdjacentElement('beforebegin', counter);

    // Update the counter when the content changes
    const updateCounter = () => {
        const content = element.value || element.textContent.trim();
        const currentLength = content.length;
        counter.textContent = `${currentLength}/${maxCharacters}`;

        // Change color if limit exceeded
        if (currentLength > maxCharacters) {
            counter.style.color = '#ffa700';
        } else {
            counter.style.color = '#555';
        }
    };

    // Listen for content changes
    if (element.tagName.toLowerCase() === 'textarea') {
        element.addEventListener('keyup', updateCounter);
    } else {
        const observer = new MutationObserver(updateCounter);
        observer.observe(element, { childList: true, subtree: true, characterData: true });
    }

    updateCounter(); // Initialize the counter
}


    function observeFields() {
        const observer = new MutationObserver(() => {
            const editableDivs = document.querySelectorAll('div[contenteditable="true"]');
            editableDivs.forEach((editableDiv) => {
                if (!editableDiv.dataset.counterAdded) {
                    editableDiv.dataset.counterAdded = true; // Mark this div as processed
                    addCharacterCounter(editableDiv, editableDiv.parentElement.parentElement.parentElement.parentElement.querySelector(".flex.gap-x-1:last-of-type>.min-w-8"));
                }
            });

            const textareas = document.querySelectorAll('textarea:not([placeholder="Message ChatGPT"])');
            textareas.forEach((textarea) => {
                if (!textarea.dataset.counterAdded) {
                    textarea.dataset.counterAdded = true; // Mark this textarea as processed
                    addCharacterCounter(textarea, textarea.parentElement.parentElement.parentElement.querySelector(".flex.justify-end>.btn"));
                }
            });
        });

        observer.observe(document.body, { childList: true, subtree: true });
    }

    observeFields();
})();