概要

やるべきことがあるのについつい見てしまう、現代人の最大の敵ことYouTube。そんなyoutubeと健全にお付き合いできるChrome Extentionを開発します。
実際の処理としては動画再生中にサジェストされるサムネイルの数を半減させることで興味のある動画が表示される確率を減らします。

manifest

まず、拡張機能に関する設定をmanifest.jsonに書き込んでいきます。

manifest.json

{
    "manifest_version": 2,
    "name": "reduce_youtube",
    "version": "1.0",
    
    "browser_action": {
        "default_title": "reduce_youtube"
    },
    "content_scripts": [
        {
            "js": ["reduce_youtube.js"],
            "matches": ["https://*.youtube.com/*"]
        }
    ]
}

jsにスクリプトファイルを、matchesに反映させたいURLを記述します。

JavaScript

function reducing(){
	let i = 0;
	document.querySelectorAll("ytd-compact-video-renderer").forEach((element) => {
		if (i % 2){
			element.style.opacity = 0;
		}
		i ++
	})
};

これが適応させたい関数です。サムネイルに付与されているクラスytd-compact-video-rendererの要素すべてを取得してそのうち半分（奇数番目）について透明度を0にすることで、強制的に見えなくしています。

これを実行するために以下のようなコードを書いてみました。どうでしょうか

// 読み込み時実行
window.addEventListener('load', function(){
	console.log("load");
	reducing();
});

実はこのコードでは動かないことがあります。この理由は以下の記事に書いてありました。

YouTube、動画間の遷移でPjax的なことをしているので、動画ページ内で別の動画をクリックして遷移した場合、Chrome ExtensionのJSを再読込してくれません。
YouTubeをラジオ化するChrome Extensionを作りました

そこで、以下のように要素の変更を検知して実行するようにしなければいけません。

// オブザーバインスタンスを作成
let observer = new MutationObserver(function(mutations) {
	console.log("mut");
	reducing();
});

// 監視する要素
let target = document.querySelector('head');

const config = {
    childList: true,  // 子ノードに対する追加・削除を監視
    subtree: true  // 子孫ノードまで監視
};

observer.observe(target, config);

これでサムネイルを半減することができました。

参考文献