uBlock のブロックを要素のテキストでブロックする
これは、XPATHを使うとできます。
www.amazon.co.jp##:xpath(//div[@data-cel-widget][contains(.//span ,"再び購入")])
CSSブロックの問題点。
通常のublock は ドメイン、URLとCSSのクラス名で指定しますが、CSSのクラス名には限界がある。
また昨今のウェブサイトランダムはCSSクラス名が使われる。管理上cssはnpm build されている。、CSSのクラス名がランダムでユニークなIDになっており、クラス名で指定すると、広告ブロックがあっという間に陳腐化（意味をなさなくなる）してしまう。
また、CSSブロックだと「どこをブロックした」かがわかりにくく、ブロックを間違えてたり、ブロックしすぎたときに除去するなどのメンテナンスが不便である。
キーワードで指定したい。
そこで、要素に含まれる文字列で指定したい。
たぶんこれが簡潔でメンテが用意だと思う。
しかし、CSSでテキスト文字列を指定するのは難しい。
かわりにXpathにある'contains()' 関数を使えるといいなと思ってたらuBlock origin はXpathをサポートしているとわかったので歓喜した。
xpath を記入する
xpathブロックの記入例
ブロックのルールにxpathを書くときは、次のように書く。
:xpath(//element[contains(.//span ,"再び購入")])
ブロックに、xpathを書くときは、クォートとマーキングをちゃんとやる
##:xpath("//div") # ← クォートたらブロックルールの記述エラー
###:xpath ← `#` が多すぎ
正しい記述
##:xpath(//body//div)
xpath contains について
contains はCSSではなくXpathで明示的に要素をセレクトするセレクターで使う関数である。
contains は慣れてないと使いにくいが次のようになっている。
contains( 対象ノード選択, 文字列 )
なので次のようになっている
contains( . , "オススメ商品" ) # カレントノードから下のすべてのテキスト・ノードを探す。 contains( ./span , "オススメ商品" ) # カレントノード直下の ./span に'文字列'が含まれているとマッチ contains( .//span , "オススメ商品" ) # カレントノード子孫ノードに .//span に'文字列'が含まれているとマッチ
xpath と contains の関係
Xpathでは、条件にマッチしたノードを取り出す。そして選択時は選択条件を追記していく
//div # すべてのdiv ## この辺はCSSでもできそう //div[@data-cwd] ## <div data-ads > とdivかつdata-ads属性があるもの すべて //div[@data-cwd="youname"] ## <div data-cwd > とdivかつdata-cwd=younameであるもの すべて //div[contains(@data-ads, "name" )] ## div で 属性値チェック [data-cwd*="youname"] //div[contains( ./text(), "name" )] ## div のテキストノードで'name' があるか ## この辺はCSSでは無理そう //div[contains( ./, "block" )][contains( ./, "detected" )] ## div の文字列に 'block detected' の３つが含まれるもの //div[contains( ./, "アド" )][contains( ./, "検出" )][contains( ./, "無効" )] ## div の文字列に 'アド 検出 無効' の３つが含まれるもの
たとえば、Amazonのページ
「検索内容に関係したブランド」という迷惑なレコメンドがある場合。
##:xpath(//div[@data-cel-widget][contains(.//span ,"検索内容に関連したブランド")])
これでフィルタにマッチングさせて、わかりやすく文字列でフィルタを設定することができる。
このように、「表示されている文字」や「タイトルの文字」「文章」を元にブロックガッツリかけて便利です。
xpathについて
XPATHについては、過去記事を参照してください。
