YouTubeのショート動画を倍速にする拡張機能を作ってみた

5秒戻しは実際にやりたいときが結構ある

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

manifest.json
数字のキーを押したらn倍速にする
5秒送り、5秒戻しをつけ加えたバージョン
この記事は以下の動画の中に出てきたサンプルコードを載せたものです。コピペなどが必要なときに使ってください。





manifest.json

{
  "name": "youtube shorts control",
  "description": "ショート動画のコントロール",
  "version": "1.0.0",
  "manifest_version": 3,
  "content_scripts": [{
    "matches": ["https://www.youtube.com/*"],
    "js": ["script.js"]
  }]
}



数字のキーを押したらn倍にする

document.addEventListener('keydown', function(event) {
  if(!isNaN(event.key) && event.key > 0) {
    video = document.querySelector('ytd-reel-video-renderer video');

    if(video != null) {
      video.playbackRate = event.key;
    }
  }
})



5秒送り、5秒戻しをつけ加えたバージョン

document.addEventListener('keydown', function(event) {
  arr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', 'ArrowRight', 'ArrowLeft'];

  if(arr.indexOf(event.key) != -1) {
    video = document.querySelector('ytd-reel-video-renderer video');

    if(video == null) {
      return;
    }

    switch(event.key) {
      case 'ArrowRight':
        video.currentTime += 5;
        break;
      case 'ArrowLeft':
        video.currentTime -= 5;
        break;
      default:
        video.playbackRate = event.key;
    }
  }
})
 もしかしたら何か関連しているかも? 
 質問や感想などお気軽にコメントしてください