YouTubeのショート動画を連続再生する拡張機能を作ってみた

この記事はだいぶ前に書かれたものなので情報が古いかもしれません

この記事を三行にまとめると

ショート動画終了時に自動でスクロールしたい
なぜかloop属性が消えない
timeupdateイベントを使って残り時間を見る

この記事は以下の動画の中に出てきたサンプルコードを載せたものです。コピペなどが必要なときに使ってください。

manifest.json

{
  "name": "shortscroll",
  "description": "ショート動画を連続再生する",
  "version": "1.0.0",
  "manifest_version": 3,
  "content_scripts": [{
    "matches": ["*://www.youtube.com/*"],
    "js": ["script.js"]
  }]
}

ショート動画終了時に自動でスクロールする

function autoScroll() {
  currentReel = document.querySelector('ytd-reel-video-renderer[is-active]');
  currentVideo = currentReel?.querySelector('video');

  if(currentReel != null && !isNaN(currentVideo?.duration)) {
    currentVideo.addEventListener('timeupdate', function(event) {
      if(event.target.duration - event.target.currentTime <= 0.3 * event.target.playbackRate) {
        nextId = Number(currentReel.getAttribute('id')) + 1;
        nextReel = document.querySelector('ytd-reel-video-renderer[id="' + nextId + '"]');
        nextReel.scrollIntoView({'behavior': 'smooth'});
      }
    })
  } else {
    setTimeout(autoScroll, 1000);
  }
}

document.addEventListener('yt-navigate-finish', autoScroll);

(function(){
  autoScroll();
})();