☰

YouTube Channel Playlist Button

Adds a button linking to the channel's playlist on YouTube channel pages

当前为 2024-11-13 提交的版本，查看 最新版本。

// ==UserScript==
// @name         YouTube Channel Playlist Button
// @namespace    https://greatest.deepsurf.us/en/users/703184-floriegl
// @version      1.1
// @description  Adds a button linking to the channel's playlist on YouTube channel pages
// @author       floriegl
// @match        https://www.youtube.com/*
// @license      MIT
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    let actionModel = undefined;
    let channelId = undefined;

    const readdObserver = new MutationObserver(() => {
        if (!document.getElementById('channel-playlist-link')) {
            addPlaylistButton();
        }
    });

    function addPlaylistButton() {
        readdObserver.disconnect();
        readdObserver.observe(actionModel, { childList: true, subtree: false });

        if (!document.getElementById('channel-playlist-link')) {
            actionModel.insertAdjacentHTML('beforeend', `
                <a class="yt-flexible-actions-view-model-wiz__action" id="channel-playlist-link" style="text-decoration: none">
                    <button-view-model class="yt-spec-button-view-model">
                        <button class="yt-spec-button-shape-next yt-spec-button-shape-next--outline yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--enable-backdrop-filter-experiment"
                                aria-label="Go to Channel Playlist" title style="">
                            <div class="yt-spec-button-shape-next__button-text-content">Channel Playlist</div>
                            <yt-touch-feedback-shape style="border-radius: inherit;">
                                <div class="yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response" aria-hidden="true">
                                    <div class="yt-spec-touch-feedback-shape__stroke" style=""></div>
                                    <div class="yt-spec-touch-feedback-shape__fill" style=""></div>
                                </div>
                            </yt-touch-feedback-shape>
                        </button>
                    </button-view-model>
                </a>`);
        }

        document.getElementById('channel-playlist-link').href = `/playlist?list=UU${channelId.substring(2)}`;
    }

    window.addEventListener('yt-navigate-finish', async (e) => {
         if (e.detail && e.detail.pageType === 'channel' && e.detail.endpoint && e.detail.endpoint.browseEndpoint && typeof e.detail.endpoint.browseEndpoint.browseId === 'string' && e.detail.endpoint.browseEndpoint.browseId.startsWith('UC')) {
            channelId = e.detail.endpoint.browseEndpoint.browseId;
            actionModel = document.querySelector('.yt-flexible-actions-view-model-wiz');
            if (!actionModel) {
                actionModel = await new Promise((resolve) => {
                    new MutationObserver((mutations, obs) => {
                        const item = document.querySelector('.yt-flexible-actions-view-model-wiz');
                        if (item) {
                            resolve(item);
                            obs.disconnect();
                        }
                    }).observe(document, { childList: true, subtree: true });
                });
            }
            addPlaylistButton();
        } else {
            readdObserver.disconnect();
        }
    });
    window.addEventListener("resize", () => {
        if (actionModel !== document.querySelector('.yt-flexible-actions-view-model-wiz')) {
            actionModel = document.querySelector('.yt-flexible-actions-view-model-wiz');
            if (channelId && actionModel) {
                addPlaylistButton();
            }
        }
    });
})();