Tampermonkey(Chrome版Greasemonkey)でFacebookの広告を非表示

Facebookの広告が目に入ってしまう

久しぶりの投稿で時代遅れのトピックを扱おうとしています、すいません。もしかしたら役立つ人もいるかと思い。

Facebookの右側に広告を表示する領域があるのですが、たまに下世話な芸能ニュースなど表示されていると、ワタシ嫌いではないので、ついついクリックしてしまうわけです。そして何度も「次へ」「次へ」とクリックしてどうでもいい情報をみせられ、中身のなさに愕然とするわけです。あまりに時間の無駄!でも目に入ってしまう以上、クリックしてしまいたい衝動にアガらえない!

という訳で、おもむろにCtrl+Shift+iで開発者コンソールをたちあげ、

と入力して消していました。

一度入力すれば、上矢印カーソルを押すと入力履歴が呼び出されるので、ほとんど手間はありません。

しかし、Facebookではページ移動するたびに画面が書き換えられまた広告がでてきます。

そこでTampermonkeyでスクリプトを書きました。ユーザースクリプトはかなり昔からあるもはや古(いにしえ)の技術ですが、なんと私は初ユーザースクリプトです。たぶん、すでに誰かが作っていると思うんですが、まったく気にせずさくっと書けるかやってみました。

Tempermonkeyのインストール

インストールの仕方は、まずここからChrome拡張機能のTempermonkeyをインストールします。

Tempermonkeyにユーザースクリプト追加

Chromeの拡張機能画面でTempermonkeyが有効になっていることを確認し、オプションをクリックするとTempermonkeyのダッシュボードが開くので、+ボタンを押し てユーザースクリプトを入力、保存してください。

以下がスクリプト。

これだけで、メタタグの@match属性から該当するfacebookのURLを開いた時点でユーザースクリプトが発動し、DOMを監視して変更があれば広告の入っているhome_right_columnクラスの領域を非表示にします。

facebookを開いて確認

一瞬広告が表示されますが、自動的にFacebookから広告が消えます。

難しかったところ

  1. ユーザースクリプトではsetTimeoutが無視されるので、後から追加されるDOM要素は拾えない。
  2. Facebookでのページ遷移はreactと思うが動的に行われるので、DOMの変更を検知する必要があった。

 なにかコメントをどうぞ