Chromeの拡張機能を自作してみよう

この記事はだいぶ前に書かれたものなので情報が古いかもしれません
もちろん3倍以上にもできます

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

manifest.json
動画の中でやったバージョン
yt-navigate-finishバージョン
この記事は以下の動画の中に出てきたサンプルコードを載せたものです。コピペなどが必要なときに使ってください。



動画の中でも言ってますがこのコードは正常に動作しないことがあります。基本的には動くんですが、たまにボタンが出てこなかったりボタンを押しても倍速にならないことがあります。そういうときは一度ページを読み込み直すと正常に動作します。

原因については現在も調査中なのですが、もしこうすれば直るよっていうアドバイスがあればぜひコメントください(YouTubeの方のコメントも大歓迎です)



manifest.json

{
  "name": "シャア専用",
  "description": "動画の再生速度を通常の3倍にする",
  "version": "1.0.0",
  "manifest_version": 3,
  "content_scripts": [{
    "matches": ["https://www.youtube.com/*"],
    "js": ["script.js"]
  }]
}



script.js

window.addEventListener('load', function(){
  //ボタンの中身の作成
  toggle = document.createElement('div');
  toggle.setAttribute('class', 'ytp-autonav-toggle-button');
  toggle.setAttribute('aria-checked', 'false');
  
  container = document.createElement('div');
  container.setAttribute('class', 'ytp-autonav-toggle-button-container');
  container.appendChild(toggle);
  
  //ボタンの作成
  button = document.createElement('button');
  button.setAttribute('class', 'ytp-button');
  button.appendChild(container);
  
  //画面の右下にボタンを追加
  div = document.querySelector('.ytp-right-controls');
  div.appendChild(button);
  
  //ボタンのクリックイベント
  video = document.querySelector('video');
  button.onclick = function() {
    checked = toggle.getAttribute('aria-checked');
  
    //3倍速と1倍速を交互に切り替える
    if(checked == 'false') {
      toggle.setAttribute('aria-checked', 'true');
      video.playbackRate = 3;
    } else {
      toggle.setAttribute('aria-checked', 'false');
      video.playbackRate = 1;
    }
  }  
});

こちらは動画の中で書いたコードになります。

loadイベントは最初にサイトを開いたときしか発動しません。そのため最初にトップページを開いてそこから動画のページに移動するとボタンが作成されなかったり、別の動画のページに移動したときにボタンがONのままでも1倍速に戻ってしまうなどの不具合が発生します。

これらの不具合を解消したものが下の改訂版です。でも繰り返しになりますけど改訂版の場合も正常に動かないことがあります。その点はご了承ください。ってかマジで原因が分からねえ……orz



改訂版

//ボタン作成済みフラグ
makedbutton = false;

document.addEventListener('yt-navigate-finish', function(){
  //動画のプレイヤーが見つからない場合は処理を行わない
  div = document.querySelector('.ytp-right-controls');
  if(div == null) {
    return;
  }

  //ボタンが作成されていなければ作成する
  if(!makedbutton) {
    //ボタンの中身の作成
    toggle = document.createElement('div');
    toggle.setAttribute('class', 'ytp-autonav-toggle-button');
    toggle.setAttribute('aria-checked', 'false');
    
    container = document.createElement('div');
    container.setAttribute('class', 'ytp-autonav-toggle-button-container');
    container.appendChild(toggle);
    
    //ボタンの作成
    button = document.createElement('button');
    button.setAttribute('class', 'ytp-button');
    button.appendChild(container);
  
    //画面の右下にボタンを追加
    div.appendChild(button);

    //ボタンのクリックイベント
    button.onclick = function() {
      checked = toggle.getAttribute('aria-checked');
    
      //3倍速と1倍速を交互に切り替える
      if(checked == 'false') {
        toggle.setAttribute('aria-checked', 'true');
        video.playbackRate = 3;
      } else {
        toggle.setAttribute('aria-checked', 'false');
        video.playbackRate = 1;
      }
    }

    //ボタン作成済みフラグを立てる
    makedbutton = true;
  }

  //動画読み込み時にボタンがONになっていたら速度を3倍にする
  video = document.querySelector('video');
  video.addEventListener('loadeddata', function(){
    checked = toggle.getAttribute('aria-checked');
    if(checked == 'true') {
      video.playbackRate = 3;
    }
  });
});

こちらはloadイベントの代わりに「yt-navigate-finish」というイベントで処理を発動しています。

yt-navigate-finishならページを移動するたびに発動するので先ほどの不具合に対応できます。ただしページを移動するたびに発動するため、ただイベントをloadからyt-navigate-finishに変えただけだと何度もボタン作成の処理が発生してしまい、プレイヤーのところに何個も3倍速ボタンが出ちゃいます。なので上記ではmakedbuttonというフラグ用の変数を用意して、ボタンの作成処理を一度だけ発動するようにしています。

またページを移動すると動画の速度が1倍に戻ってしまうので、動画のloadeddataイベントを使って動画の読み込み完了時に3倍速ボタンがONだったら自動で3倍速にする処理を追加しています。

それ以外は動画内で紹介したバージョンと同じです。
 もしかしたら何か関連しているかも? 
 質問や感想などお気軽にコメントしてください