☰

Douyin Live Clean Mode Toggle Switch Style

抖音直播页纯净模式开关，开关滑块样式，带提示和自动隐藏，支持动态加载多个XPath元素隐藏

// ==UserScript==
// @name         Douyin Live Clean Mode Toggle Switch Style
// @namespace    http://tampermonkey.net/
// @version      1.8
// @description  抖音直播页纯净模式开关，开关滑块样式，带提示和自动隐藏，支持动态加载多个XPath元素隐藏
// @author       Jeff
// @match        https://live.douyin.com/*
// @match        https://www.douyin.com/root/live/*
// @grant        none
// @run-at       document-idle
// @license    MIT
// ==/UserScript==

(function() {
    'use strict';

    // XPath路径常量
    const XPATH_TARGET_1 = '/html/body/div[2]/div[3]/div/main/div[2]/div/pace-island/div/div/div/div[1]/div[7]';
    const XPATH_TARGET_2 = '/html/body/div[2]/div[3]/div/main/div[2]/div/pace-island/div/div/div/div[1]/div[2]/div/div[1]/div/div/div/pace-island[11]/div/div/div';
    const XPATH_TARGET_3 = '/html/body/div[2]/div[3]/div/main/div[2]/div/pace-island/div/div/div/div[1]/div[1]/div';

    // 通用XPath定位函数
    function getXPathTarget(path) {
        return document.evaluate(
            path,
            document,
            null,
            XPathResult.FIRST_ORDERED_NODE_TYPE,
            null
        ).singleNodeValue;
    }

    // 创建样式
    const style = document.createElement('style');
    style.textContent = `
    #cleanModeToggleContainer {
        position: fixed;
        bottom: 20px;
        right: 20px;
        display: flex;
        align-items: center;
        gap: 12px;
        user-select: none;
        z-index: 999999;
        transition: opacity 0.5s ease;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }
    /* 滑块背景 */
    #cleanModeToggle {
        position: relative;
        width: 50px;
        height: 26px;
        background: #ccc;
        border-radius: 13px;
        cursor: pointer;
        transition: background-color 0.3s;
        box-sizing: border-box;
        flex-shrink: 0;
    }
    /* 滑块圆球 */
    #cleanModeToggle::before {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 22px;
        height: 22px;
        background: white;
        border-radius: 50%;
        box-shadow: 0 0 3px rgba(0,0,0,0.3);
        transition: left 0.3s;
    }
    /* 开启状态背景 */
    #cleanModeToggle.active {
        background: #28a745;
        box-shadow: 0 0 8px rgba(40,167,69,0.6);
    }
    /* 开启状态滑块位置 */
    #cleanModeToggle.active::before {
        left: 26px;
    }
    /* 悬停效果 */
    #cleanModeToggle:hover {
        background: #999;
    }
    #cleanModeToggle.active:hover {
        background: #218838;
        box-shadow: 0 0 10px rgba(33,136,56,0.8);
    }
    /* 提示文字 - 修改颜色 */
    #cleanModeToggleTooltip {
        color: rgba(255, 255, 255, 0.85);
        font-size: 14px;
        user-select: none;
        white-space: nowrap;
        user-drag: none;
        text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    }
`;

    document.head.appendChild(style);

    // 创建容器和滑块、提示文本
    const container = document.createElement('div');
    container.id = 'cleanModeToggleContainer';

    const toggleBtn = document.createElement('div');
    toggleBtn.id = 'cleanModeToggle';

    const tooltip = document.createElement('div');
    tooltip.id = 'cleanModeToggleTooltip';
    tooltip.textContent = '纯净模式开关';

    container.appendChild(toggleBtn);
    container.appendChild(tooltip);
    document.body.appendChild(container);

    let cleanMode = false;
    let hideTimeout;

    // 获取固定id目标元素
    function getTargets() {
        const chatroom = document.getElementById('chatroom');
        const rightPanel = document.getElementById('__living_frame_right_panel_id');
        let siblingPanel = null;
        if (rightPanel && rightPanel.parentElement) {
            siblingPanel = rightPanel.nextElementSibling;
        }
        return {chatroom, siblingPanel};
    }

    // 隐藏元素（如果存在且未隐藏）
    function hideElement(el) {
        if (el && el.style.display !== 'none') {
            el.style.display = 'none';
        }
    }

    // 显示元素（恢复默认显示）
    function showElement(el) {
        if (el && el.style.display === 'none') {
            el.style.display = '';
        }
    }

    // 切换纯净模式状态
    function toggleCleanMode(on) {
        const {chatroom, siblingPanel} = getTargets();
        const xpathTarget1 = getXPathTarget(XPATH_TARGET_1);
        const xpathTarget2 = getXPathTarget(XPATH_TARGET_2);
        const xpathTarget3 = getXPathTarget(XPATH_TARGET_3);

        if (on) {
            hideElement(chatroom);
            hideElement(siblingPanel);
            hideElement(xpathTarget1);
            hideElement(xpathTarget2);
            hideElement(xpathTarget3);
        } else {
            showElement(chatroom);
            showElement(siblingPanel);
            showElement(xpathTarget1);
            showElement(xpathTarget2);
            showElement(xpathTarget3);
        }

        toggleBtn.classList.toggle('active', on);
    }

    // 点击滑块切换事件
    toggleBtn.addEventListener('click', () => {
        cleanMode = !cleanMode;
        toggleCleanMode(cleanMode);
    });

    // 监听DOM新增，动态隐藏
    const observer = new MutationObserver(() => {
        if (!cleanMode) return;

        const {chatroom, siblingPanel} = getTargets();
        const xpathTarget1 = getXPathTarget(XPATH_TARGET_1);
        const xpathTarget2 = getXPathTarget(XPATH_TARGET_2);
        const xpathTarget3 = getXPathTarget(XPATH_TARGET_3);

        hideElement(chatroom);
        hideElement(siblingPanel);
        hideElement(xpathTarget1);
        hideElement(xpathTarget2);
        hideElement(xpathTarget3);
    });

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

    // 自动隐藏逻辑
    function resetHideTimer() {
        container.style.opacity = '1';
        clearTimeout(hideTimeout);
        hideTimeout = setTimeout(() => {
            container.style.opacity = '0';
        }, 5000); // 5秒无动作后隐藏
    }

    ['mousemove', 'mousedown', 'keydown', 'touchstart'].forEach(event => {
        window.addEventListener(event, resetHideTimer, {passive: true});
    });

    resetHideTimer();

    // 页面初始化时关闭纯净模式
    toggleCleanMode(cleanMode);

})();