Bilibili主页显示优化

删除bilibili主页的广告、轮播图、非视频卡片(直播卡片等)

Versión del día 12/08/2024. Echa un vistazo a la versión más reciente.

Tendrás que instalar una extensión para tu navegador como Tampermonkey, Greasemonkey o Violentmonkey si quieres utilizar este script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Userscripts para instalar este script.

Necesitará instalar una extensión como Tampermonkey para instalar este script.

Necesitarás instalar una extensión para administrar scripts de usuario si quieres instalar este script.

(Ya tengo un administrador de scripts de usuario, déjame instalarlo)

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

(Ya tengo un administrador de estilos de usuario, déjame instalarlo)

// ==UserScript==
// @name         Bilibili主页显示优化
// @namespace    http://tampermonkey.net/
// @version      1
// @description  删除bilibili主页的广告、轮播图、非视频卡片(直播卡片等)
// @match        https://www.bilibili.com/
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 从localStorage获取保存的状态,如果没有保存过,默认为false(关闭状态)
    let isAdRemovalEnabled = localStorage.getItem('bilibiliAdRemovalEnabled') === 'true';
    let isSwiperRemovalEnabled = localStorage.getItem('bilibiliSwiperRemovalEnabled') === 'true';
    let isNonVideoCardRemovalEnabled = localStorage.getItem('bilibiliNonVideoCardRemovalEnabled') === 'true';

    function removeAds() {
        if (!isAdRemovalEnabled) return;

        // 处理被feed-card包裹的情况
        const feedCards = document.querySelectorAll('.feed-card');
        feedCards.forEach(card => {
            const videoCard = card.querySelector('.bili-video-card.is-rcmd');
            if (videoCard && !videoCard.classList.contains('enable-no-interest')) {
                card.remove();
            }
        });

        // 处理直接的bili-video-card
        const directVideoCards = document.querySelectorAll('.bili-video-card.is-rcmd:not(.enable-no-interest)');
        directVideoCards.forEach(card => {
            // 如果父元素不是feed-card,直接删除这个bili-video-card
            if (!card.parentElement.classList.contains('feed-card')) {
                card.remove();
            }
        });
    }

    function removeSwiper() {
        if (!isSwiperRemovalEnabled) return;

        // 删除轮播图
        const swiper = document.querySelector('.recommended-swipe.grid-anchor');
        if (swiper) {
            swiper.remove();
        }

        // 删除特定的CSS规则
        const style = document.createElement('style');
        style.textContent = `
            .recommended-container_floor-aside .container>*:nth-of-type(n + 8) {
                margin-top: 0 !important;
            }
            .recommended-container_floor-aside .container.is-version8>*:nth-of-type(n + 13) {
                margin-top: 0 !important;
            }
        `;
        document.head.appendChild(style);
    }

    function removeNonVideoCards() {
        if (!isNonVideoCardRemovalEnabled) return;

        // 删除 floor-single-card 类的元素
        const nonVideoCards = document.querySelectorAll('.floor-single-card');
        nonVideoCards.forEach(card => {
            card.remove();
        });

        // 删除 bili-live-card 类的元素(直播卡片)
        const liveCards = document.querySelectorAll('.bili-live-card');
        liveCards.forEach(card => {
            card.remove();
        });
    }

    // 创建设置按钮和开关控件
    function createSettingsButton() {
        const settingsButton = document.createElement('button');
        settingsButton.textContent = '设置';
        settingsButton.style.cssText = `
            position: fixed;
            top: 2%;
            right: 27%;
            z-index: 10000;
            padding: 5px 10px;
            background-color: #00a1d6;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        `;
        document.body.appendChild(settingsButton);

        const toggleContainer = document.createElement('div');
        toggleContainer.style.cssText = `
            position: fixed;
            top: 6%;
            right: 21%;
            z-index: 9999;
            background-color: white;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0,0,0,0.3);
            display: none;
        `;
        toggleContainer.innerHTML = `
            <label style="display: block; margin-bottom: 10px;">
                <input type="checkbox" id="adRemovalToggle" ${isAdRemovalEnabled ? 'checked' : ''}>
                移除广告
            </label>
            <label style="display: block; margin-bottom: 10px;">
                <input type="checkbox" id="swiperRemovalToggle" ${isSwiperRemovalEnabled ? 'checked' : ''}>
                移除轮播图
            </label>
            <label style="display: block;">
                <input type="checkbox" id="nonVideoCardRemovalToggle" ${isNonVideoCardRemovalEnabled ? 'checked' : ''}>
                移除视频以外的其他卡片
            </label>
        `;
        document.body.appendChild(toggleContainer);

        settingsButton.addEventListener('click', function() {
            toggleContainer.style.display = toggleContainer.style.display === 'none' ? 'block' : 'none';
        });

        // 添加广告移除开关事件监听器
        const adCheckbox = document.getElementById('adRemovalToggle');
        adCheckbox.addEventListener('change', function() {
            isAdRemovalEnabled = this.checked;
            localStorage.setItem('bilibiliAdRemovalEnabled', isAdRemovalEnabled);
            if (isAdRemovalEnabled) {
                removeAds();
            } else {
                location.reload();
            }
        });

        // 添加轮播图移除开关事件监听器
        const swiperCheckbox = document.getElementById('swiperRemovalToggle');
        swiperCheckbox.addEventListener('change', function() {
            isSwiperRemovalEnabled = this.checked;
            localStorage.setItem('bilibiliSwiperRemovalEnabled', isSwiperRemovalEnabled);
            if (isSwiperRemovalEnabled) {
                removeSwiper();
            } else {
                location.reload();
            }
        });

        // 添加非视频卡片移除开关事件监听器
        const nonVideoCardCheckbox = document.getElementById('nonVideoCardRemovalToggle');
        nonVideoCardCheckbox.addEventListener('change', function() {
            isNonVideoCardRemovalEnabled = this.checked;
            localStorage.setItem('bilibiliNonVideoCardRemovalEnabled', isNonVideoCardRemovalEnabled);
            if (isNonVideoCardRemovalEnabled) {
                removeNonVideoCards();
            } else {
                location.reload();
            }
        });
    }

    // 初始执行
    createSettingsButton();
    if (isAdRemovalEnabled) {
        removeAds();
    }
    if (isSwiperRemovalEnabled) {
        removeSwiper();
    }
    if (isNonVideoCardRemovalEnabled) {
        removeNonVideoCards();
    }

    // 创建一个MutationObserver来监视DOM变化
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.type === 'childList') {
                removeAds();
                removeSwiper();
                removeNonVideoCards();
            }
        });
    });

    // 配置观察选项
    const config = { childList: true, subtree: true };

    // 开始观察文档主体
    observer.observe(document.body, config);
})();