【Chrome拡張】WEB版Youtubeに10秒スキップを追加したよ

こんにちは、キラキラポンコツエンジニアです。
久しぶりに記事でも書こうかな～と思い、執筆中でございます。

今回は、chorome拡張を駆使して、web版youtubeに10秒スキップを
実装してみました。
画像にするとこんな感じ

再生ボタンの左右にボタンが追加されていますね。
#用意したもの
中身は意外とシンプルです。
・jqueryファイル
・アイコン・ボタン画像
・ manifest.json
・ jsのソースコード
#ソースコード
ダウンロードして使いたい方は、下のリンクからどうぞ。
ダウンロード
###1．画像の読み込み
まずは、再生ボタン横のボタンを読み込みます。

main.js

const rightImg = chrome.extension.getURL("imgs/right.svg");
const leftImg = chrome.extension.getURL("imgs/left.svg");

###2. 10秒スキップ処理を定義
YouTubeって実は、
・ " j "で10秒戻る
・ " l "で10秒進む
・ " k "で再生/一時停止　と
キーボードのショートカット機能で標準実装されているみたいです。

これ知らない方結構いると思います。たち
（→キーでは5秒スキップなんですよ。連打しないといけないですから・・・）

なので、ボタンタップで「j」と「l」の入力を送ってやると動くというわけですわ・・・（簡単だね）
その処理がこちら

main.js

const nextSkip = new KeyboardEvent( "keydown", { keyCode: 76 }); // lキー
const backSkip = new KeyboardEvent( "keydown", { keyCode: 74 }); // jキー

###3. スキップスキップボタンの埋め込み
続いては、このボタンたちをYouTube上に埋め込む処理を書いていきます。

main.js

//ボタンをプレイヤーに挿入する
const setButton = () => {
    //10秒進
    $(`<button id="nextSkip-button" class="ytp-button"><img src="${rightImg}" id="skip-button-icon"></button>`)
        .insertAfter("button.ytp-play-button");
    $("#nextSkip-button")
        .on("click", () => {
            
        // シークバーの移動
        document.dispatchEvent(nextSkip);
    });

    //10秒戻る
    $(`<button id="backSkip-button" class="ytp-button"><img src="${leftImg}" id="skip-button-icon"></button>`)
        .insertBefore("button.ytp-play-button");
    $("#backSkip-button")
        .on("click", () => {
            
        // シークバーの移動
        document.dispatchEvent(backSkip);
    });

}

setButton(); // 実行

詳しく見ていきます。

main.js

$(`<button id="nextSkip-button" class="ytp-button"><img src="${rightImg}" id="skip-button-icon"></button>`)
        .insertAfter("button.ytp-play-button");

ここでは、Youtube上の
button.ytp-play-button　つまり再生ボタンの前後に
button要素を埋め込む処理を書いています。

main.js

$("#nextSkip-button")
        .on("click", () => {

        // シークバーの移動
        document.dispatchEvent(nextSkip);
    });

そんでクリックされたら、先ほど定義したスキップ処理を
実行しているだけです。　ね、簡単でしょう・・・⁉
10秒戻しも同じような感じで書いたらもう完成！！

#参考にしたもの
chrome拡張の作り方（超概要）
塗田一帆さん　SukoStamp

大変参考になりました。感謝申し上げます。