YouTubeの動画広告をブロックするChrome拡張の仕組み

Google Chromeでは「Chrome拡張」をインストールすることで機能を追加できます。

その中でもYouTubeの動画をブロックするものは多く、実装がどうなっているのか前から気になっていました。

調べてみると、コードを公開されている方も多くいらっしゃったので、分かったことをまとめます。

「広告をスキップ」ボタンは5秒待たなくてもクリックできる

まず最初に参考にしたのは以下のコードです。

普通にYouTubeで動画を見ていると、「広告をスキップ」ボタンは5秒待たないと出てきませんが、このコードでは、画面がロードされるとすぐに「広告をスキップ」ボタンを押しています。

そこで、一時的にChrome拡張をオフにして広告を再生、Developer Toolからソースコードを見てみると・・・

「広告をスキップ」ボタンが表示される前でしたが、しっかりHTML上には存在していました。

であれば、あとはこの要素をクリックするだけ。思ったより簡単ですね。

次に参考にしたのがこちらのコード。

広告は画面上では早送りなどはできないのですが、このコードではそれをやっています。

上述の通り、「広告をスキップ」ボタンはHTML上には存在しているのですが、こんなこともできるみたいです。

YouTube側の実装が変わってしまうと、ここに書いている内容も役に立たなくはなってしまうのですが、普段バックエンドを触っている分、フロントエンドの知見が増えて面白かったです。