用油猴脚本去掉讨厌的B站直播打赏框

date 2024-01-30

folder 代码

tag Tampermonkey , bilibili

作为一个上班族，我们经常需要在工作之余寻求一些娱乐和放松。

对于喜欢看各种比赛直播的人来说，小破站无疑是一个不错的选择。小破站拥有大量的直播版权，可以让我们随时随地观看到各种精彩的比赛。

然而，从去年开始，小破站更新了一个打赏工具条，这给我们的观影体验带来了诸多不便。原本，我们点击网页屏或全屏时，这个打赏工具条是不会出现的。

但是现在，无论是在何时何地，只要打开小破站观看直播，这个打赏工具条就会显露出来，让人感到非常的不舒服。

网页全屏

显示器全屏

经过仔细的思考和研究，我写了一个油猴脚本来处理这个问题。

这个脚本的主要作用是在打开小破站观看直播时自动隐藏打赏工具条。

这样，我们就可以专心地观看直播，享受比赛的激情，而不会被打赏工具条干扰。

当然，这个脚本我也发布了，记得要先装油猴插件哦…

地址是：>>>> https://greasyfork.org/zh-CN/scripts/483878 <<<<

// ==UserScript==
// @name         哔哩哔哩(B站|Bilibili)全屏直播净化
// @namespace    https://github.com/afyi/bliveclear
// @version      1.2.3
// @description  去掉B站(live.bilibili.com)网页全屏或者全屏时出现的讨厌的打赏工具栏的小工具
// @author       猫东东 <blog.del.pub>
// @match        *://live.bilibili.com/*
// @website      https://greasyfork.org/zh-CN/scripts/483878
// @grant        none
// @license      MIT

// ==/UserScript==
(function() {
    'use strict';

    if (/live.bilibili.com/.test(location.host)) {
        console.log("B站直播全屏时工具栏清理");
        const observer = new MutationObserver((mutationsList) => {
            for (let mutation of mutationsList) {
                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                    // console.log('body类名发生了改变');
                    // 这里可以添加处理逻辑
                    let classList = Object.values(document.querySelector('body').classList);
                    // 查看一下对应的值
                    // console.log(typeof classList, classList);
                    // 判定是否有播放器全屏的样式
                    if (classList.includes("player-full-win") || classList.includes("fullscreen-fix")) {
                        document.getElementById("web-player__bottom-bar__container").style = "display:none; width: 0;";
                    } else {
                        document.getElementById("web-player__bottom-bar__container").style = "display:block; width:100%;";
                    }
                }
            }
        });
        // 配置观察选项
        const config = { attributes: true };
        // 开始观察目标节点（body）及其子节点的变动
        observer.observe(document.querySelector('body'), config);
    }
})();