See the hidden GitHub Emoji descriptions in popup

github_emoji_more_words.md

If an emoji has extra hidden words, they will be appended to the end.
Made just for fun to see what other words I could type.

You can adjust the text color in the script; I made this using Dark Theme.

github_emoji_more_words.user.js

// ==UserScript==
// @name         Emoji Suggester Data-Text Appender
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  Appends data-text to emoji suggestions on GitHub
// @match        https://github.com/*
// @icon         https://icons.duckduckgo.com/ip2/github.com.ico
// @grant        none
// ==/UserScript==

/*
Changelog:
v1.2:
- Made all the matching text bold

v1.1:
- Make matching characters bold

v1.0 (2024-07-09):
- Original script to append data-text to emoji suggestions
*/

(function() {
    'use strict';

    let debounceTimer;

    function appendDataText() {
        const suggestionList = document.querySelector('.emoji-suggestions');
        if (!suggestionList) return;

        const input = document.querySelector('textarea:focus, input[type="text"]:focus');
        const searchText = input ? input.value.split(':').pop().toLowerCase() : '';

        suggestionList.querySelectorAll('li[role="option"]').forEach(item => {
            const dataText = item.getAttribute('data-text');
            if (!dataText) return;

            // Update emoji name
            let emojiNameSpan = item.querySelector('.emoji-name-text');
            if (!emojiNameSpan) {
                const emojiNameText = Array.from(item.childNodes).find(node => node.nodeType === Node.TEXT_NODE && node.textContent.trim());
                if (emojiNameText) {
                    emojiNameSpan = document.createElement('span');
                    emojiNameSpan.className = 'emoji-name-text';
                    emojiNameText.replaceWith(emojiNameSpan);
                }
            }
            if (emojiNameSpan) {
                const emojiName = item.getAttribute('data-emoji-name');
                emojiNameSpan.innerHTML = emojiName.replace(new RegExp(searchText, 'gi'), match => `<strong>${match}</strong>`);
            }

            // Update data-text
            let enhancedSpan = item.querySelector('.enhanced-data-text');
            if (!enhancedSpan) {
                enhancedSpan = document.createElement('span');
                enhancedSpan.className = 'enhanced-data-text';
                enhancedSpan.style.color = '#666';
                enhancedSpan.style.fontSize = '0.8em';
                item.appendChild(enhancedSpan);
            }

            const boldDataText = dataText.replace(new RegExp(searchText, 'gi'), match => `<strong>${match}</strong>`);
            enhancedSpan.innerHTML = ` (${boldDataText})`;
        });
    }

    const observer = new MutationObserver(() => {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(appendDataText, 100);
    });

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