Add Rainbow Span to UserName

Find UserName elements and wrap them in a span with a rainbow class.
当前为 2024-08-16 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Add Rainbow Span to UserName
// @license MIT
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Find UserName elements and wrap them in a span with a rainbow class.
// @author       Gangz1o
// @match        *://*/*
// @grant        none
// ==/UserScript==

(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);
})();