Youtube に『ここすき』ボタン入れてみた：時間コメント入力補助

はじめに

Youtube のコメント欄に x:xx のような時間が書かれたコメントを見たことがありますか?
クリックするとその時間まで飛ばしてくれる便利なコメントです。ですが、このコメントはどうやって入力しているのでしょう。手動でしょうか。
手動以外で、入力できないの?
ということで

作った物

動作映像 pic.twitter.com/HcvI47AVfF

— かるた (@ThreeColorDumpl) August 20, 2020

動画を載せることができなかったため、twitterに投稿しました。

How to use

・Youtube 上のハートボタンをクリックする
・F10 を押す (F10 : ショートカットキーとして登録した場合)

詳細

作ったもの : Chrome 拡張機能
プログラミング言語 : Javascript (html, json)
リポジトリ : GitHub

詰みポイント

Youtubeで拡張機能が動作しない

Youtube では history state を書き換えることで、高速な読み込みを可能としています。そのため、URLが変わっても、拡張機能のコンテンツスクリプトは再実行されません。ここを参考にしました。

Youtube ではこのJSフレームワークを使用しているようです。詳しくは、ここを読めば、理解できます。

私の場合 : 解決法

window.addEventListener('yt-navigate-start', process);

if (document.body) process();
else document.addEventListener('DOMContentLoaded', process);

function process(){
// なんらかの処理
}

ソースコード

再生時間の取得とコメントに挿入

var currentTime = document.getElementsByTagName("video")[0].currentTime;

// sec -> hour + min + sec
var hour = zeroPadding(parseInt(Math.floor(currentTime)/60/60), 2);
var min = zeroPadding(parseInt(Math.floor(currentTime)/60)%60, 2);
var sec = zeroPadding(parseInt(Math.floor(currentTime))%60, 2);
var previousComment = document.getElementById("contenteditable-root").innerText;
previousComment =  (previousComment=="") ? previousComment + "" : previousComment + "\n";

//コメント欄にフォーカス
document.getElementById("simplebox-placeholder").click();
// すべてを結合
var insertComment = (hour == "00") ? previousComment + min + ":" + sec + " : " : previousComment + hour  + ":"  + min + ":" + sec + " : ";

//コメント欄に挿入
document.getElementById("contenteditable-root").innerHTML = insertComment;

さいごに

でも、結局 x:xx のような時間が書かれたコメント を簡単に入力する方法があったなら何の意味もないんですけどね!!
方法を知っている方は、コメント等で教えていただければ、うれしいです。

Youtube ってだからあんなに早かったんですね。ブラウザの履歴の書き換えなんてサイト側でできることが初めて知りました。History.pushState()とか使っているのかな?Google ってやっぱりすごいですね。

拡張機能は、GitHub のリリースからcrx拡張子をダウンロードできます。
だれにも需要がないと悲しいので、ストアに公開しませんでした。
希望があれば、公開するのでコメントください(コメント乞食)