Add Rainbow Span to UserName

Find UserName elements and wrap them in a span with a rainbow class.
// ==UserScript==
// @name         Add Rainbow Span to UserName
// @license MIT
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Find UserName elements and wrap them in a span with a rainbow class.
// @author       Gangz1o
// @match        *://*/*
// @grant        none
// ==/UserScript==
/* 
火焰特效
Fire Style
.rainbow {
           -webkit-animation-duration: 0.8s;
    -webkit-animation-name: flamemotion;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    color: #ffe
        }
        @-webkit-keyframes flamemotion {
    0% {
        text-shadow: 0 -0.05em .2em #fff,.01em -0.02em .15em #fe0,.01em -0.05em .15em #fc0,.02em -0.15em .2em #f90,.04em -0.2em .3em #f70,.05em -0.25em .4em #f70,.06em -0.2em .9em #f50,.1em -0.1em 1em #f40
    }

    25% {
        text-shadow: 0 -0.05em .2em #fff,0 -0.05em .17em #fe0,.04em -0.12em .22em #fc0,.04em -0.13em .27em #f90,.05em -0.23em .33em #f70,.07000000000000001em -0.28em .47em #f70,.1em -0.3em .8em #f50,.1em -0.3em .9em #f40
    }

    50% {
        text-shadow: 0 -0.05em .2em #fff,.01em -0.02em .15em #fe0,.01em -0.05em .15em #fc0,.02em -0.15em .2em #f90,.04em -0.2em .3em #f70,.05em -0.25em .4em #f70,.06em -0.2em .9em #f50,.1em -0.1em 1em #f40
    }

    75% {
        text-shadow: 0 -0.05em .2em #fff,0 -0.06em .18em #fe0,.05em -0.15em .23em #fc0,.05em -0.15em .3em #f90,.07000000000000001em -0.25em .4em #f70,.09em -0.3em .5em #f70,.1em -0.3em .9em #f50,.1em -0.3em 1em #f40
    }

    100% {
        text-shadow: 0 -0.05em .2em #fff,.01em -0.02em .15em #fe0,.01em -0.05em .15em #fc0,.02em -0.15em .2em #f90,.04em -0.2em .3em #f70,.05em -0.25em .4em #f70,.06em -0.2em .9em #f50,.1em -0.1em 1em #f40
    }
}


*/

(function() {
    'use strict';

    // 这里设置你的用户名,如果你有多个的话
    const userNameTexts = ["UserName1", "UserName2"];

    // 查找页面中的所有元素，排除 <script> 和 <style>
    const elements = document.querySelectorAll('*:not(script):not(style)');

    elements.forEach(element => {
        if (element.childNodes.length === 1 && element.childNodes[0].nodeType === Node.TEXT_NODE) {
            const text = element.textContent.trim();
            // 检查当前元素的文本内容是否在 userNameTexts 数组中
            if (userNameTexts.includes(text)) {
                // 替换文本为带有 <span class="rainbow"> 的新内容
                element.innerHTML = `<span class="rainbow">${text}</span>`;
            }
        }
    });

    // 为 .rainbow 类添加一些样式
    const style = document.createElement('style');
    style.textContent = `
        .rainbow {
           background: linear-gradient(135deg, #9B5DE5, #F15BB5, #FEE440, #00F5D4, #00BBF9,#9ED4E3);
           -webkit-background-clip: text;
           background-clip: text;
           color: transparent;
           animation: rainbow_animation 8s cubic-bezier(0.3, 0, 1, 1) infinite;
           background-size: 300% 100%;
        }
        @keyframes rainbow_animation {
        0%,100% {
           background-position: 0 50%;
        }
        20% {
           background-position: 100% 50%;
        }
      }
    `;
    document.head.appendChild(style);
})();