ニコニコ動画の広告をスキップするChrome拡張を作ってみた #JavaScript

はじめに

普段ニコニコ動画を流しながら作業していますが、ストレスを感じさせる動画広告が増えてきたように思います。
「胡散臭い話し方をするVtuberアバターが紹介する胡散臭い化粧品」の広告を1,000回見ても絶対に買わないので、
【動画広告を自動でスキップするChrome拡張機能】を自作しました。

成果物の紹介

動画広告再生後、1秒以内に自動でスキップしてくれるようになりました。
※動画は知人の許諾のうえで載せています

ニコニコ動画の広告表示の仕組み

拡張機能作成にあたり、ニコニコ動画の動画広告がどのような仕組みかを確認しました。

どうやら再生画面(PlayerContainer)内に

通常動画再生用コンテナ(VideoPlayer)
右から左に流れるコメント再生用コンテナ(CommentRenderer)
動画広告再生用コンテナ(VideoAdContainer)

などがあり、再生ボタンが押されると動画広告再生用コンテナ内にある動画リンクを読み込む → 広告終了後に同コンテナのstyleがdisplay: noneに変更され、通常動画とコメントが再生される仕組みのようです。

そこで今回は、VideoAdContainer内にあるvideoのリンクを書き換えることで動画広告を終了させる方法で作成しました。

スキップ機能の作成(JavaScript)

まずはソースコードをご覧ください。

nicoadskipper.js

adSkip = setInterval(skip, 100);

function skip() {
    const elem1 = document.getElementsByTagName('video');
        if (elem1[1] == null){
        } else if(elem1[1].src !=""){
            elem1[1].src="";
            clearInterval(adSkip);
        }
}

document.getElementsByTagName('video')でページ内のvideoタグリストを取得しています。
再生ボタンを押すまではvideoタグが1つ(通常再生video)のみ存在し、再生ボタンを押すとvideoタグが合計3つになります。
videoタグの2つ目が動画広告に関するもののため、elem1[1]のリンクをsrc=""に書き換えます。
再生ボタンを押すまではelem[1]は存在しないため、nullだった場合も含め条件分岐式でまとめています。

この処理をsetIntervalを用いて100msごとに実行するのですが、このままでは通常動画再生中も延々と処理が続くため、
~~clearIntervalを用いて300ms経過すると処理が停止するようにしました。(なお300msである必要性は特にありません)~~
(10/11追記: 300ms経過するとスキップ機能がはたらかない事象が確認されたため、src=""に処理後すぐにclearIntervalするよう修正しました。そもそもsrc=""を繰り返すメリットもありませんしね。尚この場合elem1[1]==nullである間延々と処理が続きますので、MutationObserverで監視する方式にすべきであることを併記しておきます)

これで【videoタグ 2つ目のsrcに動画広告リンクが記載されているとき、srcを消すことを100ms毎に行なう】機能の完成です。

自分のChromeに拡張機能を読み込む

JavaScriptファイルだけではChrome拡張機能として使えないため、manifest.jsonやアイコン画像も準備します。
ここでは割愛させていただきます。

無事にChrome拡張機能が追加されました。

注意事項

YoutubeのAdBlockなどと同様、この拡張機能は運営会社(株式会社ドワンゴ)および動画広告者に損失を与えうるものです。
そのためChromeストアへの公開および不特定多数への配布は行いません。

ここで記載したコードを使用してのChromeストア公開はご遠慮ください。著作権を放棄したわけではありません。
また本機能を使用したことによる一切の責任を負いかねます。ご了承ください。

※ただし、個人利用で試してみたいという方がいましたらTwitterアカウント(@gmnoir) までご連絡ください。
当方の想定した用途かを確認のうえで、個別にファイルをお送りします。

最後に

JavaScriptを書くのが初めてなこともあり、まずい書き方があるかもしれません。(特にsetInterval / clearInterval)
コメントでご指導いただけますと大変ありがたいです。

ニコニコ動画が、なるべくUXを損なわない方法で収益化できることを、ユーザーとして願っています。

参考記事

課金なんて必要ない？YouTubeの広告自動スキップ＆バナー自動削除のChrome拡張作ってみた
 manifest.jsonの書き方