搞了个能量显示的脚本

houmusic · May 9, 2025, 4:45pm

油猴插件，代码是ai写的，具体不懂。。。

// ==UserScript==
// @name         NodeLoc 导航栏能量显示
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  在导航栏显示能量数值（图标前置+黑色透明样式）
// @author       You
// @match        https://nodeloc.cc/*
// @grant        GM_xmlhttpRequest
// @connect      nodeloc.cc
// ==/UserScript==

(function() {
    'use strict';

    // 创建导航栏元素
    function createNavItem() {
        const li = document.createElement('li');
        li.className = 'energy-display';
        li.style.display = 'flex';
        li.style.alignItems = 'center';
        li.style.marginRight = '15px';
        li.style.fontFamily = 'Arial, sans-serif';

        li.innerHTML = `
            <div style="display: flex; align-items: center;">
                <div style="font-size: 18px; margin-right: 5px;">⚡</div>
                <div style="text-align: right; line-height: 1.2;">
                    <div style="font-size: 12px; color: rgba(0,0,0,0.6);">能量值</div>
                    <div style="font-size: 16px; font-weight: bold; color: rgba(0,0,0,0.9);">加载中...</div>
                </div>
            </div>
        `;

        // 插入到导航栏第一个位置
        const navBar = document.querySelector('ul.d-header-icons');
        if (navBar) {
            navBar.insertBefore(li, navBar.firstChild);
            return li.querySelector('div > div:last-child > div:last-child');
        }
        return null;
    }

    // 获取并更新数据
    function updateEnergy(displayElement) {
        GM_xmlhttpRequest({
            method: 'GET',
            url: 'https://nodeloc.cc/leaderboard/1.json',
            onload: function(response) {
                try {
                    const data = JSON.parse(response.responseText);
                    if (displayElement) {
                        displayElement.textContent =
                            data.personal.user.total_score.toLocaleString();
                        // 添加数值透明度动画
                        displayElement.style.opacity = '0.8';
                        setTimeout(() => {
                            displayElement.style.opacity = '1';
                        }, 300);
                    }
                } catch (e) {
                    if (displayElement) displayElement.textContent = '--';
                }
            },
            onerror: function() {
                if (displayElement) displayElement.textContent = '--';
            }
        });
    }

    // 等待导航栏加载
    const observer = new MutationObserver(() => {
        const navBar = document.querySelector('ul.d-header-icons');
        if (navBar) {
            observer.disconnect();
            const displayElement = createNavItem();
            if (displayElement) {
                // 初始加载
                updateEnergy(displayElement);
                // 每30秒刷新
                setInterval(() => updateEnergy(displayElement), 30000);
            }
        }
    });

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

效果图

123

heiyu · May 9, 2025, 4:48pm

牛批的。。。

zhangyx · May 9, 2025, 6:18pm

https://nodeloc.cc/leaderboard
discource模板基本都差不多，不过还没把入口控件加上

Lxi · May 9, 2025, 6:22pm

edge没反应

yyyyt · May 10, 2025, 2:27am

谢谢大佬的脚本
总算知道自己能量多少了

bauw · May 10, 2025, 6:49am

有个问题，如果主题是深色就没看不见了，修改改了下

// ==UserScript==
// @name         NodeLoc 导航栏能量显示
// @namespace    http://tampermonkey.net/
// @version      1.8
// @description  在导航栏显示能量数值（图标前置+自动适配主题颜色）
// @author       You
// @match        https://nodeloc.cc/*
// @grant        GM_xmlhttpRequest
// @connect      nodeloc.cc
// ==/UserScript==

(function () {
    'use strict';

    // 创建导航栏元素
    function createNavItem() {
        const li = document.createElement('li');
        li.className = 'energy-display';
        li.style.display = 'flex';
        li.style.alignItems = 'center';
        li.style.marginRight = '15px';
        li.style.fontFamily = 'Arial, sans-serif';

        li.innerHTML = `
            <div style="display: flex; align-items: center;">
                <div style="font-size: 18px; margin-right: 5px;">⚡</div>
                <div style="text-align: right; line-height: 1.2;">
                    <div class="energy-label" style="font-size: 12px;">能量值</div>
                    <div class="energy-value" style="font-size: 16px; font-weight: bold;">加载中...</div>
                </div>
            </div>
        `;

        // 插入到导航栏第一个位置
        const navBar = document.querySelector('ul.d-header-icons');
        if (navBar) {
            navBar.insertBefore(li, navBar.firstChild);
            return li.querySelector('.energy-value');
        }
        return null;
    }

    // 获取并更新数据
    function updateEnergy(displayElement) {
        GM_xmlhttpRequest({
            method: 'GET',
            url: 'https://nodeloc.cc/leaderboard/1.json',
            onload: function (response) {
                try {
                    const data = JSON.parse(response.responseText);
                    if (displayElement) {
                        displayElement.textContent =
                            data.personal.user.total_score.toLocaleString();
                        // 添加数值透明度动画
                        displayElement.style.opacity = '0.8';
                        setTimeout(() => {
                            displayElement.style.opacity = '1';
                        }, 300);
                    }
                } catch (e) {
                    if (displayElement) displayElement.textContent = '--';
                }
            },
            onerror: function () {
                if (displayElement) displayElement.textContent = '--';
            }
        });
    }

    // 根据主题颜色调整显示颜色
    function adjustDisplayColor(isDarkTheme) {
        const energyLabel = document.querySelector('.energy-label');
        const energyValue = document.querySelector('.energy-value');

        if (!energyLabel || !energyValue) return;

        if (isDarkTheme) {
            energyLabel.style.color = 'rgba(255, 255, 255, 0.6) !important'; // 浅色
            energyValue.style.color = 'rgba(255, 255, 255, 0.9) !important'; // 更浅色
        } else {
            energyLabel.style.color = 'rgba(0, 0, 0, 0.6) !important'; // 深色
            energyValue.style.color = 'rgba(0, 0, 0, 0.9) !important'; // 更深色
        }
    }

    // 检测当前主题
    function detectCurrentTheme() {
        const lightButton = document.querySelector('.interface-color-selector__light-option');
        const darkButton = document.querySelector('.interface-color-selector__dark-option');

        if (lightButton && lightButton.classList.contains('active')) {
           // console.log('当前主题: 亮色');
            return false; // 亮色主题
        }
        if (darkButton && darkButton.classList.contains('active')) {
           // console.log('当前主题: 深色');
            return true; // 深色主题
        }

          // console.log('当前主题: 默认亮色');
        return false; // 默认亮色主题
    }

    // 监听主题切换
    function setupThemeListener() {
        const themeButtons = document.querySelectorAll('.interface-color-selector__light-option, .interface-color-selector__dark-option, .interface-color-selector__auto-option');

        themeButtons.forEach(button => {
            button.addEventListener('click', () => {
                // 延迟 200ms，确保主题切换完成
                setTimeout(() => {
                    const isDarkTheme = detectCurrentTheme();
                    adjustDisplayColor(isDarkTheme);
                }, 200);
            });
        });
    }

    // 等待导航栏加载
    const observer = new MutationObserver(() => {
        const navBar = document.querySelector('ul.d-header-icons');
        if (navBar) {
            observer.disconnect();
            const displayElement = createNavItem();
            if (displayElement) {
                // 初始加载
                updateEnergy(displayElement);
                // 每30秒刷新
                setInterval(() => updateEnergy(displayElement), 30000);
                // 调整显示颜色
                const isDarkTheme = detectCurrentTheme();
                adjustDisplayColor(isDarkTheme);
                // 监听主题切换
                setupThemeListener();
            }
        }
    });

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

azhaoyihao · May 10, 2025, 7:23am

谢佬分享已收藏

ax570383885 · May 10, 2025, 7:38am

奇怪浏览器显示插件已运行但是上面没显示NL

houmusic · May 10, 2025, 8:43am

点左边排行榜也一样。。。

dot · May 10, 2025, 9:42am

厉害了工

LuckyFixate · May 10, 2025, 9:59am

6666，感谢OP

Ax789959 · May 10, 2025, 11:54am

谢佬分享已收藏

mili · May 10, 2025, 12:07pm

在用了好用

garcin · May 11, 2025, 1:46pm

显示两条–
好像没获取到数据