youtube_with_gyazo.user.js

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

const get_local = key =>{
  const v = GM_getValue(`ycg_setting_${key})`);
  if(v) return v;
  const value = prompt(`Input ${key}`);
  GM_setValue(`ycg_setting_${key}`, value);
  return value
}

(function() {
  setTimeout(()=>{
    document.querySelector('h1.title').insertAdjacentHTML('beforebegin', "<button id='capture'>Capture</button>");
    document.querySelector('#capture').addEventListener('click', ()=>{
      const client_id = get_local('client_id');
      const access_token = get_local('access_token');

      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 time = parseInt(video.currentTime);
      const title = `${Math.floor(time/60)}:${time%60} - ${document.title.replace(/\s*[\[\]]\s*/g,' ')}`
      const id = (new URL(location.href)).searchParams.get('v')
      const videoUrl = `https://youtu.be/${id}?t=${time}`
      canvas.toBlob(async (blob)=>{
        const formData = new FormData();
        formData.append('imagedata', blob);
        formData.append('client_id', client_id);
        formData.append('access_token', access_token);
        
        const response = await fetch("https://upload.gyazo.com/api/upload", {
          method: 'POST',
          body: formData,
        })

        const data = await response.json();
        const imageUrl = data.url;
        
        const html = `<div class='captureyoutube'><p><img style="max-width:400px;max-height:400px;" src="${imageUrl}" alt='capture'/></p><p>${Math.floor(time/60)}:${time%60}</p><p>Markdown<br/><textarea>![${title}](${imageUrl})</textarea></p><p>Scrapbox<br ><textarea>[${imageUrl}]
[${title} ${videoUrl}]</textarea></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);
})();