Youtubeの広告は非常にウザい。わかる。
一昔前は右上に出てた程度だった。かわいい
しばらくすると、再生中の動画の下に横長の広告が表示されるようになった。ここまではまぁわかる。
そして、以降再生しようとするたびに毎回広告が表示される。うざいけどCMだと思えば。。
しかし、最近では再生中にもかかわらずバンバン広告を挟んでくる。もはや広告を見るためにYoutube見てるんじゃないか錯覚するレベル。てか動画と広告の音量統一しろ頼む
っていうウザい広告を一発で抹殺する方法探してたら、Chrome拡張機能があったのでメモ
インストール
当然だが、Chrome限定 以下からインストールするだけ
YouTube™のための自分好みってなにってなるが、原文だと「adblock-for-youtube」なので日本語訳がおかしいだけだと思う。
これでYouTubeでいくつか動画見るとすごく快適なのを感じる
Google的にはYouTube Premiumへ誘導させたいんだろうけど、ちょっと価格がね、、
ってことで利用規約的にはアウトなのでいつ消されるかわからんけど
技術
一応このブログは技術ブログなので、どうやって広告ブロックしているのか気になった。
まぁ当然chrome.webRequest.onBeforeRequest.addListenerを使っているわけで、対象のドメインは以下
const YOUTUBE_AD_REGEX = /(doubleclick\.net)|(adservice\.google\.)|(youtube\.com\/api\/stats\/ads)|(&ad_type=)|(&adurl=)|(-pagead-id.)|(doubleclick\.com)|(\/ad_status.)|(\/api\/ads\/)|(\/googleads)|(\/pagead\/gen_)|(\/pagead\/lvz?)|(\/pubads.)|(\/pubads_)|(\/securepubads)|(=adunit&)|(googlesyndication\.com)|(innovid\.com)|(tubemogul\.com)|(youtube\.com\/pagead\/)|(google\.com\/pagead\/)/
を
const YOUTUBE_REGEX = /^https?:\/\/(\w*.)?youtube.com/i
のURLにマッチしたときにonBeforeRequestを発火して、マッチしたリクエストを拒否している。
リクエストの拒否だけではなくCSSによる無効化もやっていて、display: none !important;
していた。多分Youtube Premiumへのリンクとかも消されている気がする。
なるほどと思った点が、単純なContent ScriptでCSS入れるだけだとうまく消せないのか、CSSをインジェクションするタイミングを遅延させている。
というのも、Content Scriptで以下Javascriptをdocument_startのタイミングで実行
chrome.runtime.sendMessage({ action: 'PAGE_READY' })
でBackground.js側で受け取ってCSSを有効化している。単純にContent ScriptでCSSを使えることを知らないだけかもしれないが、、
chrome.runtime.onMessage.addListener(({ action }, { tab }, sendResponse) => { if (action === 'PAGE_READY') { if (settings.ads && tabTracker.has(tab.id)) { chrome.tabs.insertCSS({ file: 'styles/ad-hiding-filters.css', runAt: 'document_start' }) } } });
気になった点
2019年2月16日現在見てる感じ、通信等を送信している等スパイウェアぽいコードはないが、おそらくEvilになると思う。
理由はmanifest.jsonにあって、Content ScriptがすべてのURLで実行される。
"content_scripts": [ { "matches": [ "http://*/*", "https://*/*" ], "js": [ "scripts/contentscript.js" ], "all_frames": true, "run_at": "document_start" } ],
YoutubeのURLなんて変わらないんだから「www.youtube.com」だけを対象にすればいいのに、なんで全URLを対象にしているのかがわからん。ソースの書き方的に全くの初心者って感じでもないし、、
あと、パーミッションが
"permissions": [ "tabs", "storage", "unlimitedStorage", "webRequest", "webRequestBlocking", "<all_urls>" ]
になってるが、広告ブロックするかの設定でstorageつかうのはわかるが、unlimitedStorageも有効化されているのは謎。unlimitedStorageが必要なのはストレージの容量が5MBを超えるときのみで、たかが設定2つ3つ保存するのには必要ない感。。