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();
})();