文章

安利自己写的一个js脚本

部分图片待更新

问题所在

叔叔B站电脑端首页太烂了,很多广告,而且不相干的推荐,如果使用诸如ADBlock等类似的插件的话会使得顶部出现一个恶心人的弹窗!!

像是这种:检测到您的页面展示可能受到浏览器插件影响,建议您将当前页面加入插件白名单,以保障您的浏览体验~

提出解决方案

省流版本:通过监听 DOM 变化和滚动事件,不断地查找并移除页面上的特定元素。

主要采用了 MutationObserver API 来监视 DOM 的变化。当 DOM 发生变化时,例如新的元素被添加到页面上,MutationObserver 会触发一个回调函数,这个函数会移除页面上的特定元素(比如广告栏目或者是不想看的UP主之类的)。

为了防止首页瀑布流刷新导致新加载出来的推荐里面照样冒广告,还加了一个 window.addEventListener(‘scroll’, callback) 来监听滚动事件。当用户滚动页面时,它会再次调用 allinone 函数,移除新加载的元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
// ==UserScript==
// @name         No-Bilibili-AdBlock-Tips
// @namespace    http://tampermonkey.net/
// @version      2024-01-29
// @description  去除bilibili一些不需要的东西
// @author       Moear
// @match        https://www.bilibili.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=bilibili.com
// @grant        GM_addStyle
// ==/UserScript==
(function() {
    'use strict';

    var isAdBlockEnabled = true;
    var observer = null;
    var videoTitlesToRemove = new Set(['纪录','添加你想要的视频名']); // Add video titles to remove here
    var authorNamesToRemove = new Set(['老师好我叫何同学','添加你不想看到的up主名字','是红星闪闪啊','暴躁的仙人JUMP']); // Add author names to remove here


    function toggleAdBlock() {
        if (isAdBlockEnabled) {
            observer = new MutationObserver(function(mutations) {
                var adblockTips = document.querySelector('.adblock-tips'); //移除tips
                if (adblockTips) {
                    adblockTips.parentNode.removeChild(adblockTips);
                }

                // Remove elements with class 'floor-card single-card'
                var floorCards = document.querySelectorAll('.floor-card.single-card'); //移除楼层推荐
                floorCards.forEach(function(card) {
                    card.parentNode.removeChild(card);
                });

                var liveCards = document.querySelectorAll('.bili-live-card.is-rcmd'); //移除直播推荐
                liveCards.forEach(function(card) {
                    card.parentNode.removeChild(card);
                });

                // Add code to remove elements with class 'recommended-swipe grid-anchor'
                var recommendedSwipe = document.querySelectorAll('.recommended-swipe.grid-anchor');
                recommendedSwipe.forEach(function(element) {
                    element.parentNode.removeChild(element);
                });

                if (!adblockTips && floorCards.length === 0 && liveCards.length === 0 && recommendedSwipe.length === 0) {
                    observer.disconnect(); // Once we've found and removed the elements, we don't need to observe anymore
                }
            });
            observer.observe(document, { childList: true, subtree: true });
        } else if (observer) {
            observer.disconnect();
            observer = null;
        }
    }

    function removeChildByClassName(className, parentLevels) {
        var observer = new MutationObserver(function(mutations) {
            var element = document.querySelector(className);
            if (element) {
                var targetParent = element;
                for (var i = 0; i < parentLevels; i++) {
                    if (targetParent.parentNode) {
                        targetParent = targetParent.parentNode;
                    } else {
                        console.log("The element doesn't have " + parentLevels + " levels of parents.");
                        return;
                    }
                }
                console.log('remove element: ' + element.textContent);
                targetParent.parentNode.removeChild(targetParent);
                observer.disconnect(); // Once we've found and removed the element, we don't need to observe anymore
            } else {

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

    function removeElementsByContent(className, contentSet, parentLevels) {
        var observer = new MutationObserver(function(mutations) {
            var elements = document.querySelectorAll(className);
            elements.forEach(function(element) {
                if (contentSet.has(element.textContent)) {
                    var targetParent = element;
                    for (var i = 0; i < parentLevels; i++) {
                        if (targetParent.parentNode) {
                            targetParent = targetParent.parentNode;
                        } else {
                            return;
                        }
                    }
                    console.log('remove element: ' + element.textContent);
                    targetParent.parentNode.removeChild(targetParent);
                }
            });
            if (elements.length === 0) {
                observer.disconnect(); // Once we've found and removed the elements, we don't need to observe anymore
            }
        });
        observer.observe(document, { childList: true, subtree: true });
    }

    function allinone(){
        toggleAdBlock();
        removeChildByClassName('.bili-video-card__info--creative-ad', 6); //移除创作推广
        removeChildByClassName('bili-live-card__info--living',6); //移除直播推广
        removeChildByClassName('recommended-swipe grid-anchor',1);//移除首页大推荐
        removeElementsByContent('.bili-video-card__info--tit', videoTitlesToRemove, 4);//根据视频标题移除
        removeElementsByContent('.bili-video-card__info--author', authorNamesToRemove, 6);//根据视频作者名字正则匹配移除
    }
    allinone();//一加载进去就启动一次 去掉恶心人的东西
    window.addEventListener('scroll', function() { //每次滚动就加载一次
        if (window.scrollY > 1) {
            allinone();
        }
    });

})();

使用方法

1.下载油猴(篡改猴插件)

进入油猴官网下载插件并加载 你的浏览器最好是Chrome,Edge之类的,兼容性好一点

其他人的教程

2.下载我的js脚本或者自己添加一个新的js脚本进去

我的脚本发布在greasyfork上面,可以直接点击进行下载,点击安装就行了

或者可以自行复制上面的js脚本装载进去就可以用了

本文由作者按照 CC BY 4.0 进行授权