YouTubeの関連動画欄を同じ作者の動画一覧にする拡張機能

YouTubeを見ているとき、右側に出てくる関連動画を同じ作者の動画に切り替えるブラウザ拡張機能を作りました。

※Microsoft Edgeでもこの拡張機能は動作します。
※スマートフォンのChromeには対応していません。

この拡張機能を使うとこうなります

再生画面で右側に出てくる関連動画が同じ作者の動画一覧に変わります。

拡張機能のセットアップ（Chromeの場合）

使いたい人は下記の手順でセットアップしてください。これはソース公開の拡張機能です。

1. この拡張機能を入れるフォルダをパソコン内に作ってください。

　Cドライブの中でずっと同じ場所で使えるところにフォルダを作ってください。

　よくわからない人はCドライブの直下に「AutoSelectFromTab」というフォルダで作ってください。

2. 下記2つの内容をそれぞれファイルにして作ったフォルダに入れます。右上の「全選択」を押してコードをメモ帳にコピー＆ペーストして、指定のファイル名で保存してください。

文字コードはUTF-8にしてください。

下の内容をファイル名「manifest.json」、文字コードUTF-8で保存

 
{
  "name": "AutoSelectFromTab for YouTube",
  "description": "YouTubeの関連動画にある提供タブを自動選択します。",
  "version": "24.1228.0",
  "manifest_version": 3,
  "web_accessible_resources": [],
  "permissions": [],
  "content_scripts": [
    {
      "matches": ["https://www.youtube.com/watch*"],
      "js":["script.js"]
    }
  ]
}

下の内容をファイル名「script.js」、文字コードUTF-8で保存

 
var retry_count = 0;
var max_retry_count = 5;
var old_url = "";

function clickTab() {
	var elements = document.getElementsByTagName("yt-formatted-string");

	if(elements.length == 0){
		console.info("Not Found: Tag");
		retry_count++;

		if(retry_count < max_retry_count) {
			setTimeout(() => {
				clickTab();
			}, 750);
		}

	}else{
		console.info("Found: Tag");

		for(i=0; i < elements.length; i++) {
			if(elements[i].getAttribute("title")){
				var value = elements[i].getAttribute("title");

				if((value.indexOf("提供") == 0) || (value.indexOf("From ") == 0)){
					console.info("Found: From tab");
					console.info("Click: From tab");
					elements[i].click();
				}
			}
		}
	}
}

function checkURLChange() {
	if(old_url !== location.href) {
		console.info("Change: URL");
		old_url = location.href;

		if(location.href.indexOf("/watch?") != -1) {
			setTimeout(() => {
				retry_count = 0;
				clickTab();
			}, 1500);
		}
   }
}

document.onreadystatechange = () => {
	if(document.readyState === "complete") {
		old_url = location.href;
		setInterval(checkURLChange, 1000);

		setTimeout(() => {
			retry_count = 0;
			clickTab();
		}, 1500);
	}
}

3. フォルダ内に「manifest.json」「script.js」のファイルがあることを確認します。

4. Chromeを起動します。右上のメニュー（…のところ）→「拡張機能」→「拡張機能を管理」をクリックして拡張機能の画面を出します。

5. 拡張機能画面の右上にある「デベロッパーモード」を有効にします。

6. 拡張機能画面に「パッケージ化されていない拡張機能を読み込む」ボタンが出てくるのでクリック。

7. フォルダ選択画面が出るので、手順1で作ったフォルダを選択します。

8. 拡張機能画面に「AutoSelectFromTab for YouTube」が読み込まれたら完了です。

シークレットモードでも拡張機能を使う場合

拡張機能の設定画面を開き、設定したい拡張機能の「詳細」をクリック。「シークレットモードでの実行を許可する」をオンにしてください。

拡張機能のセットアップ（Microsoft Edgeの場合）

Microsoft Edgeの拡張機能としても動作します。読み込み方法は下記になります。

1～3. 「拡張機能のセットアップ（Chromeの場合）」の1～3の手順を行ってください。

4. Edgeを起動します。右上のメニュー（…のところ）→「拡張機能」をクリック。ポップアップされた画面の「拡張機能の管理」をクリックして拡張機能の画面を出します。

5. 拡張機能画面の左下にある「開発者モード」を有効にします。

6. 拡張機能画面の右上に「展開して読み込み」ボタンが出てくるのでクリック。

7. フォルダ選択画面が出るので、手順1で作ったフォルダを選択します。

8. 拡張機能画面に「AutoSelectFromTab for YouTube」が読み込まれたら完了です。

YouTubeにアクセスして試してみましょう

YouTubeの再生画面で今まで関連動画が出ていたところが同じ作者の動画一覧に変わります。

もしうまく自動表示されない場合はページを読み込み直してください。

リリースノート

24.1228.0 2024/12/28

最初のバージョン

net tips

このブログを検索