ツイッターのおすすめユーザがうざい。
もうね、３年近く同じユーザがレコメンドされてるのよ。リアルの職場の知り合いだから絶対フォローを押したくないの。ずっと出てくるの。
ツイッター「フォロー押すまで、帰らない」って居座り続けるんですよ。ええ私は、永遠にフォローを押すことは無いんですけど。むしろレコメンドされるユーザーは、ブロックしてもいいと思ってたりする。
「おすすめユーザ」を消す
そこで、CSSセレクタのマッチングを工夫して「非表示」にすることを試みた。ツイッターはdiv[data-testid="cellInnerDiv"] に全部のコンテンツが入ってるし、ReactなのでCSSクラス名も不安定。
そこでCSSのクラス名以外で該当ボックスにマッチさせる必要があります。これがずいぶんと長い間出来なかったんです。Xpathを使ってました。
最近になって:has() セレクタがまともに使えるようになりました。
これで「〇〇を含む親ボックス」が取得可能になり、CSSセレクタによるコンテンツブロックがはかどるようになりました。
おすすめユーザを非表示にする例
! 2023-01-08 https://twitter.com twitter.com##div[aria-label="Timeline"]>div[data-testid="cellInnerDiv"]:has(div[aria-label^="Follow"][data-testid$="follow"]) twitter.com##div[aria-label="Timeline"]>div[data-testid="cellInnerDiv"]:has(a[href^="/i/connect_people?user_id="])
従来は、次のようなXPATHを書く必要がありました。
twitter.com##:xpath(//div[@data-testid="cellInnerDiv"][ .//span[contains(., "Who to follow")]]) twitter.com##:xpath(//div[@data-testid="cellInnerDiv"][ .//span[contains(., "おすすめユーザ")]]) twitter.com##:xpath(//div[@data-testid="cellInnerDiv"][.//span[contains(., "Who to follow")]]/following-sibling::div[position()<4])
div[following-sibling::div[position()<4] で隣接ノードを絞り込むほうが確実なんですよね。
ちなみに、メッセージを消す例
メッセージ（DM）のボックス消したいと思う人は多いのではないでしょうか。
twitter.com##div[data-testid="DMDrawer"] twitter.com##div[data-testid="DMDrawerHeader"]
