ublock插件是一款开源的chrome广告屏蔽插件，下载地址 https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm
内置很多网站的广告屏蔽规则，比如youtube，但是有时候也会出现问题，比如说它默认把淘宝京东这些网站的详情页给屏蔽了，但是可以对特定网站关闭屏蔽功能，所以逛这些购物网站时关掉就可以了。
即使不学习过滤规则，也可以通过元素选择模式，手动选择页面的一些元素进行过滤。
但是要进行一些高级的过滤，就需要学习过滤规则了，比如说关键词匹配，或者说屏蔽用户id为xxx的用户的帖子。又或者说屏蔽bilibili直播的礼物特效。
01.基础过滤规则
源文档 https://github.com/gorhill/uBlock/wiki/Introduction-to-basic-filtering-syntax
<div id="unique-identifier" class="first-class second-class" data-storage="123-456">
<div class="first-class">
过滤器需要##作为前缀
可以通过 标签选择器，id选择器，类选择器等方式选择元素，
分别为 ##div, ###unique-identifier, ##.first-class
并集选择器和交集选择器也一样适用，比如##.first-class.second-class
也可以对属性进行筛选，用[]标签
-
##[data-storage="123-456"]-正好匹配 -
##[data-storage^="123-"]- 匹配开头 -
##[data-storage$="-456"]- 匹配结尾 -
##[data-storage*="3-4"]- 匹配中间 -
##[id="unique-identifier"]等价于###unique-identifier -
##[class="first-class"]等价于##.first-class, 但是只喜欢只会逐字比较属性
02.Cosmetic filters（元素隐藏过滤器）
参考 https://github.com/gorhill/uBlock/wiki/Static-filter-syntax#static-network-filtering
存在一些固定的过滤方法可以使用，这些方法很多都支持链式调用，前面讲到的##属于最基础的Cosmetic filters
:has(...), :has-text(...), :if(...), :if-not(...), :matches-css(...), :matches-css-before(...), :matches-css-after(...), :min-text-length(n), :not(...), :nth-ancestor(n), :upward(arg), :watch-attr(...), :xpath(...).
这里简单介绍一下最实用的
-
:has-text(needle)参数needle可以是字符串或者正则表达式，正则表达式要用//包裹起来
会对当前元素和它的子元素中的所有文本进行匹配
-
:has(arg)类似于if的作用，arg里面的参数可以是普通的css选择器或者Cosmetic filters,
过滤器的默认行为是隐藏选中的元素，而不会把他们从dom树上移除
下面两个方法分别是移除元素，和重新定义样式
subject:remove()
- Description: action operator, instruct to remove elements from the DOM tree, instead of just hiding them.
- Chainable: No, action operator can only be used at the end of the root chain.
- subject: Can be a plain CSS selector, or a procedural cosmetic filter.
- Examples:
gorhill.github.io###pcf #a18 .fail:remove()
New in uBO 1.26.0. Fixes #2252
Since :remove() is an "action" operator, it must only be used as a trailing operator (just like the :style() operator).
AdGuard's cosmetic filter syntax { remove: true; } will be converted to uBO's :remove() operator internally.
subject:style(arg)
- Description: action operator, applies specified style to selected elements in DOM tree.
- Chainable: No, action operator can only be used at the end of the root chain.
- subject: Can be a plain CSS selector, or a procedural cosmetic filter after 1.29.3b10. Before, only native, plain CSS selectors were supported, see #382.
-
arg: one or more CSS property declarations, separated by the standard
;. Property values withurl(...)are forbidden. - Examples:
example.com##h1:style(background-color: blue !important)motobanda.pl###mvideo:style(z-index: 1!important)
03.HTML过滤器（在response data阶段移除元素）
也就是在返回html的阶段移除元素,但是现在vue之类框架的页面通常都是用ajax请求动态请求数据,所以这种过滤方式用处还是比较有限的.
和Cosmetic filters的语法基本相同，只是在前面加一个^符号
比如example.com##^.badstuff
04.脚本注入
+js(...)可以从官方脚本资源库中加载脚本
官方脚本资源连接如下
https://github.com/gorhill/uBlock/wiki/Resources-Library
举个例子
acis.js
全名是abort-current-inline-script.js
这个脚本会终止页面内（script标签）js的执行，只要文本或者正则表达式或者属性能够成功匹配到
Examples:
weristdeinfreund.de##+js(acis, Number.isNaN)tichyseinblick.de##+js(acis, Math, /\}\s*\(.*?\b(self|this|window)\b.*?\)/)
下面的过滤器可以禁止指定站点的脚本加载：
example.com#@#+js()
05.实战使用 b站动态屏蔽指定用户 屏蔽抽奖广告
举个例子就是b站的动态,有些up主你虽然关注了,但是不希望他们的发言出现在动态里.比如因为他们的发言过于频繁,或者说你关注她们主要是为了看直播的,比如一些vtuber.
我们可以添加类似下面的规则
其中用到两个方法 has和has-text,还用到了正则
! 2022-05-28 https://t.bilibili.com 屏蔽b站动态up的选择器
t.bilibili.com##.bili-dyn-item__main:has(.bili-dyn-title__text:has-text(/用户名1|用户名2/))
还有一个问题就是,这样我们连他们发视频的动态也一起过滤了,所以我们可以先加一个not排除里面有视频的动态.
t.bilibili.com##.bili-dyn-item__main:not(:has(.bili-dyn-card-video)):has(.bili-dyn-title__text:has-text(/用户名1|用户名2/))
屏蔽抽奖广告，这个网站的抽奖广告也是挺烦的。
www.jianshu.com##.aside div:has-text(抽奖)
www.jianshu.com##footer+div:has-text(抽奖)
