Facebookの広告が目に入ってしまう
久しぶりの投稿で時代遅れのトピックを扱おうとしています、すいません。もしかしたら役立つ人もいるかと思い。
Facebookの右側に広告を表示する領域があるのですが、たまに下世話な芸能ニュースなど表示されていると、ワタシ嫌いではないので、ついついクリックしてしまうわけです。そして何度も「次へ」「次へ」とクリックしてどうでもいい情報をみせられ、中身のなさに愕然とするわけです。あまりに時間の無駄！でも目に入ってしまう以上、クリックしてしまいたい衝動にアガらえない！
という訳で、おもむろにCtrl+Shift+iで開発者コンソールをたちあげ、
|
1 |
$x('//*[@class="home_right_column"]').forEach((el)=>{el.textContent='何かの跡地';}); |
と入力して消していました。
一度入力すれば、上矢印カーソルを押すと入力履歴が呼び出されるので、ほとんど手間はありません。
しかし、Facebookではページ移動するたびに画面が書き換えられまた広告がでてきます。
そこでTampermonkeyでスクリプトを書きました。ユーザースクリプトはかなり昔からあるもはや古（いにしえ）の技術ですが、なんと私は初ユーザースクリプトです。たぶん、すでに誰かが作っていると思うんですが、まったく気にせずさくっと書けるかやってみました。
Tempermonkeyのインストール
インストールの仕方は、まずここからChrome拡張機能のTempermonkeyをインストールします。
Tempermonkeyにユーザースクリプト追加
Chromeの拡張機能画面でTempermonkeyが有効になっていることを確認し、オプションをクリックするとTempermonkeyのダッシュボードが開くので、＋ボタンを押し てユーザースクリプトを入力、保存してください。
以下がスクリプト。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// ==UserScript== // @name Facebook // @namespace https://www.facebook.com/ // @version 0.1 // @description try to take over the world! // @author Kazuya Utsunomiya // @match https://www.facebook.com/* // @grant none /* load jQuery */ // @require http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js // ==/UserScript== (function() { 'use strict'; const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { $('.home_right_column').hide(); }); }); const config = { attributes: true, childList: true, characterData: true }; observer.observe($('body').get(0), config); })(); |
これだけで、メタタグの@match属性から該当するfacebookのURLを開いた時点でユーザースクリプトが発動し、DOMを監視して変更があれば広告の入っているhome_right_columnクラスの領域を非表示にします。
facebookを開いて確認
一瞬広告が表示されますが、自動的にFacebookから広告が消えます。
難しかったところ
- ユーザースクリプトではsetTimeoutが無視されるので、後から追加されるDOM要素は拾えない。
- Facebookでのページ遷移はreactと思うが動的に行われるので、DOMの変更を検知する必要があった。