안녕하세요, 반짝이는 Ponkots 엔지니어입니다.
오랜만에 기사에서도 쓸까~라고 생각해, 집필중입니다.

이번에는 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초 복귀도 같은 느낌으로 쓰면 이미 완성! !

참고로 한 것

크롬 확장을 만드는 방법(초 개요)
도다 이치호 씨 SukoStamp

매우 참고가 되었습니다. 감사합니다.