Adblock 插件规则语法实现B 站动态黑名单 - 隐藏特定用户的图文动态
需求很簡(jiǎn)單，比方說(shuō)有時(shí)候會(huì)關(guān)注幾個(gè)專(zhuān)職搬運(yùn)視頻的號(hào)，然后就會(huì)發(fā)現(xiàn)他們會(huì)發(fā)些很煩人的圖文動(dòng)態(tài)。視頻還是想看的，所以需要精確的只屏蔽特定用戶(hù)的圖文動(dòng)態(tài)。b 站本身似乎沒(méi)這種功能，因?yàn)槲抑饕请娔X上瀏覽器看看b 站動(dòng)態(tài)，所以決定用瀏覽器的廣告屏蔽插件來(lái)實(shí)現(xiàn)，具體而言，就是添加一條自定義屏蔽規(guī)則。
屏蔽插件
我用的firefox 瀏覽器，插件是這個(gè)Adblocker Ultimate，用了挺長(zhǎng)時(shí)間了，效果一直很強(qiáng)力，除了偶爾會(huì)遇上針對(duì)廣告攔截的，不過(guò)規(guī)則更新也挺勤快。Chrome 應(yīng)該也有這個(gè)。
廣告屏蔽插件的原理多種多樣，比如可以直接阻止網(wǎng)絡(luò)請(qǐng)求、停止腳本的，最簡(jiǎn)單的類(lèi)型是根據(jù)規(guī)則匹配頁(yè)面上的某個(gè)元素，然后把這個(gè)元素隱藏掉，正適合拿來(lái)做黑名單屏蔽。
要添加自定義規(guī)則可以點(diǎn)開(kāi)設(shè)置，里面就有個(gè)自定義規(guī)則標(biāo)簽頁(yè)：
每行寫(xiě)一條規(guī)則，自動(dòng)保存。
規(guī)則語(yǔ)法
基本的規(guī)則語(yǔ)法可以參考這個(gè)：Adblock Plus filters explained，差不多是通用。如果要選擇并隱藏某個(gè)域名下頁(yè)面中某個(gè)或者某一類(lèi)元素，基本思路就是用CSS 選擇器，類(lèi)似這樣：
t.bilibili.com##.target-css## 后面跟的是標(biāo)準(zhǔn)的CSS 選擇器語(yǔ)法，這條規(guī)則會(huì)把t.bilibili.com 域名下頁(yè)面上所有.target-css 類(lèi)的元素隱藏掉。要做的就是打開(kāi)瀏覽器控制臺(tái)，分析頁(yè)面結(jié)構(gòu)，看看要隱藏的那個(gè)元素有什么特別之處。
偽選擇器
當(dāng)然只用標(biāo)準(zhǔn)的CSS 選擇器能做的很有限，所以規(guī)則中也擴(kuò)展了所謂的偽選擇器（pseudo-selector），形式上有點(diǎn)像CSS 偽類(lèi)，比如這樣：
t.bilibili.com#?#div:has(span:contains(今天給大家推薦))用了偽選擇器的規(guī)則要把## 變成#?#。這條規(guī)則的意思是：屏蔽頁(yè)面上滿(mǎn)足條件的div 元素，這些div 的子元素有span ，而這個(gè)span 內(nèi)部的文本含有“今天給大家推薦” 這么幾個(gè)字。
上面的例子用了偽選擇器:has 和:contains 。:has(expr)的意思是，冒號(hào)前的元素，其子元素中含有滿(mǎn)足CSS 表達(dá)式expr 的元素，如果滿(mǎn)足這個(gè)條件，冒號(hào)前的元素就被選中。偽選擇器可以嵌套，所以括號(hào)里的CSS 表達(dá)式還可以包含偽選擇器。:contains(text) 也很簡(jiǎn)單，就是檢查冒號(hào)前元素的內(nèi)部文字是否包含text，滿(mǎn)足條件就選中。
所以包含偽選擇器的CSS 表達(dá)式需要滿(mǎn)足兩個(gè)條件才能選中某個(gè)元素，首先就是滿(mǎn)足CSS 選擇器，在這個(gè)基礎(chǔ)上，用CSS 選擇器選中的元素還要滿(mǎn)足偽選擇器的條件才能最后被選中。
偽選擇器并列語(yǔ)法
除了嵌套，偽選擇器還可以并列，比如：
t.bilibili.com#?#div:has(span):has(table)這條規(guī)則也是選中div 元素，這個(gè)div 要滿(mǎn)足兩個(gè)條件，首先是含有span 元素，同時(shí)還要含有table 元素。有了這種語(yǔ)法就可以把多個(gè)條件組合到一起，實(shí)現(xiàn)復(fù)雜的選擇功能。
其他偽選擇器
基本上偽選擇器的用法可能都要參考別人的規(guī)則文件，反正我是沒(méi)找著成體系的文檔。常見(jiàn)的偽選擇器就是:has()，:contains() ，再加一個(gè):not()，就是和:has() 的效果相反，選中不滿(mǎn)足條件的。
屏蔽動(dòng)態(tài)
現(xiàn)在可以開(kāi)始研究如何屏蔽動(dòng)態(tài)了。打開(kāi)瀏覽器控制臺(tái)，可以看到：
每條動(dòng)態(tài)卡片就是一個(gè)div.bili-dyn-list__item，把這個(gè)元素整個(gè)刪掉，對(duì)應(yīng)的動(dòng)態(tài)就完全沒(méi)了。所以基礎(chǔ)的屏蔽規(guī)則就是：
當(dāng)然只是這么寫(xiě)的話(huà)所有動(dòng)態(tài)都沒(méi)了，接下來(lái)就開(kāi)始用偽選擇器，需要實(shí)現(xiàn)兩個(gè)條件：
兩個(gè)條件可以分開(kāi)考慮，最后并列起來(lái)就行。
匹配特定用戶(hù)
最簡(jiǎn)單的想法是看看動(dòng)態(tài)卡片里有沒(méi)有哪個(gè)鏈接或者別的元素帶有指向用戶(hù)頁(yè)面的鏈接，有的話(huà)就能精確的根據(jù)用戶(hù)鏈接或者id 做匹配。我已經(jīng)找過(guò)了，沒(méi)有[doge]。所以退而求其次，直接匹配顯示出來(lái)的用戶(hù)名文本。鼠標(biāo)放在用戶(hù)名上檢查元素，可以看到基本是這樣的結(jié)構(gòu)：
就是找到這個(gè)地方的一個(gè)span，它的內(nèi)部文本匹配用戶(hù)名。那么上面的基礎(chǔ)規(guī)則就可以改成：
意思是要求最前面的動(dòng)態(tài)卡片div 里面有一個(gè)span，span 的內(nèi)部文本又要匹配用戶(hù)名，span 前面加了一串元素層級(jí)是為了提高容錯(cuò)度，保證選擇的是這個(gè)表示用戶(hù)名的span。
只用這條規(guī)則的話(huà)，這個(gè)用戶(hù)的所有動(dòng)態(tài)都會(huì)被屏蔽。
匹配圖文動(dòng)態(tài)
總之是要找到圖文動(dòng)態(tài)和其他動(dòng)態(tài)不同的地方，然后匹配這個(gè)差異點(diǎn)。我發(fā)現(xiàn)的是這個(gè)：
只有圖文動(dòng)態(tài)有這樣的結(jié)構(gòu)，對(duì)應(yīng)動(dòng)態(tài)里面的正文部分。所以基礎(chǔ)規(guī)則改成這樣：
t.bilibili.com#?#div.bili-dyn-list__item:has(div.bili-dyn-content__orig__desc > div.bili-rich-text)div.bili-rich-text 元素在其他地方也有出現(xiàn)，所以要用css 表達(dá)式限制這個(gè)父子元素關(guān)系。
用這條規(guī)則可以無(wú)差別屏蔽所有圖文動(dòng)態(tài)
并列
然后就很簡(jiǎn)單了，把上面兩個(gè)條件中的偽選擇器表達(dá)式并列起來(lái)，就能表達(dá)關(guān)系與，實(shí)現(xiàn)只屏蔽特定用戶(hù)的圖文表達(dá)式，規(guī)則如下：
t.bilibili.com#?#div.bili-dyn-list__item:has(div.bili-dyn-item__header div.bili-dyn-title span:contains(少女前線(xiàn)后勤組)):has(div.bili-dyn-content__orig__desc > div.bili-rich-text)注意中間不要加空格。把用戶(hù)名換成別的，復(fù)制粘貼幾次就能屏蔽更多用戶(hù)。
總結(jié)
總之還挺好用的，基本上無(wú)痕，對(duì)瀏覽器性能也沒(méi)感覺(jué)有什么影響。規(guī)則語(yǔ)法簡(jiǎn)單直觀，不像正則那樣堪比玄學(xué)，希望大家都學(xué)會(huì)了。
注
如果要屏蔽轉(zhuǎn)發(fā)動(dòng)態(tài)，可以把div.bili-dyn-content__orig__desc 改成div.bili-dyn-content__forw__desc。如果圖文和轉(zhuǎn)發(fā)都要屏蔽，那就復(fù)制粘貼，兩條都寫(xiě)上。
總結(jié)
以上是生活随笔為你收集整理的Adblock 插件规则语法实现B 站动态黑名单 - 隐藏特定用户的图文动态的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 【C语言进阶深度学习记录】二十三 数组
- 下一篇： 主机关机后第二天就无法开机_iphone