YouTubeの広告を早送りでスキップするChrome/Edge拡張機能 #JavaScript

YouTubeの広告を自動的にミュート＋早送りする拡張機能を作ってみた。

コード

content.js

let video
main()

function main(){
    video = document.querySelector('#movie_player video')
    video ? new MutationObserver(mutated).observe(movie_player,{attributes:true}) : setTimeout(main,100)
}

function mutated(){
    if(movie_player.classList.contains('ad-showing')){
        video.muted = true
        video.playbackRate = 16
    }
    else{
        video.muted = false
        video.playbackRate = 1
    }
}

#movie_playerタグの属性変更を検知して、広告表示中なら動画速度を上げたりミュートにしています。

短いコードなので、JavaScriptを知ってる人ならすぐ理解できると思います。
1つだけ補足すると、唐突に出現するmovie_playerとは、そのidを持つ要素のことです。

使い方

Edgeでのインストール方法を紹介しますが、Chromeでも大体同じです

メニューの拡張機能
拡張機能の管理
開発者モードをチェック
展開して読み込み
content.jsとmanifest.jsonが入ったフォルダを指定する

manifest.json

{
"name": "YouTube Ad Mute",
"version": "1.0",
"manifest_version": 3,
"content_scripts": [{
    "matches": ["https://*.youtube.com/*"],
    "js": ["content.js"]}]
}

※開発者モードにチェックを入れると、2週間毎に確認のダイアログが表示されます

メモ

📝スキップボタンの自動クリックは実装してません。アウトらしいので。

📝早送りは16倍速です。Ad Speedupの真似ですｗ

📝videoタグをポーリングする所はPromise化すべきですが、トップレベルのawaitが動かなかったので断念した。

ポーリングquerySelectorは没になった

function $(selector){
    function async(ok){
        const el = document.querySelector(selector)
        el ? ok(el) : setTimeout(async, 100, ok)
    }
    return new Promise(async)
}