安利自己写的一个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 进行授权