capture_youtube.user.js

// ==UserScript==
// @name         Youtube Capture
// @namespace    https://ssig33.com/
// @version      2.0
// @description  try to take over the world!
// @author       ssig33
// @match        https://www.youtube.com/*
// @grant        none
// ==/UserScript==

(function() {
    setTimeout(()=>{
        document.querySelector('h1.title').insertAdjacentHTML('beforebegin', "<button id='capture'>Capture</button>");
        document.querySelector('#capture').addEventListener('click', ()=>{
            const video = document.querySelector('video');
            const canvas = document.createElement('canvas');
            canvas.setAttribute('width', video.videoWidth);
            canvas.setAttribute('height', video.videoHeight);
            canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
            const dataUrl = canvas.toDataURL();
            const time = parseInt(video.currentTime);
            const html = `<div class='captureyoutube'><p><img style="max-width:400px;max-height:400px;" src="${dataUrl}" alt='capture'/></p><p>${Math.floor(time/60)}:${time%60}</p></div>`;
            document.querySelector('button#capture').insertAdjacentHTML('afterend', html);

        });
    }, 3000);
    const loop = (href)=>{
        setTimeout(()=>{
            if(location.href !== href){
                document.querySelectorAll('div.captureyoutube').forEach(n => n.remove());
            }
            loop(location.href);
        }, 200);
    };
    loop(location.href);
})();