YouTube Music Now Playing Highlighter

Highlights the currently playing song in the YouTube Music queue.

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         YouTube Music Now Playing Highlighter
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Highlights the currently playing song in the YouTube Music queue.
// @author       Hegy
// @match        https://music.youtube.com/watch*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=music.youtube.com
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    const highlightPlayingSong = () => {
        // Find all queue items
        const allQueueItems = document.querySelectorAll('ytmusic-player-queue-item');

        // Loop through all queue items
        allQueueItems.forEach(item => {
            // Check if the item is the one currently playing
            if (item.getAttribute('play-button-state') === 'playing') {
                // Apply the highlight style
                item.style.backgroundColor = '#581d22';
            } else {
                // Remove the highlight from other items
                item.style.backgroundColor = '';
            }
        });
    };

    // Use a MutationObserver to watch for changes in the player queue.
    // This is more efficient than using a setInterval.
    const observer = new MutationObserver((mutationsList, observer) => {
        for(const mutation of mutationsList) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'play-button-state') {
                highlightPlayingSong();
            }
        }
    });

    // Start observing the document body for attribute changes in the subtree
    observer.observe(document.body, { attributes: true, subtree: true });

    // Initial run to highlight the song on page load
    highlightPlayingSong();
})();