YouTube Video Screenshot

Add video screenshot button for YouTube
当前为 2023-05-14 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name          YouTube Video Screenshot
// @version       1.0.1
// @match         https://www.youtube.com/watch?v=**
// @match         https://www.youtube.com/live/**
// @author        peng-devs
// @namespace     https://greasyfork.org/users/57176
// @description   Add video screenshot button for YouTube
// @icon          https://www.youtube.com/s/desktop/c1d331ff/img/favicon_48x48.png
// @grant         none
// @allFrames     true
// @license       MIT
// ==/UserScript==

const NAME = 'YouTube Video Screenshot'


function main() {
  console.log(`[${NAME}] initializing...`)
  const button = document.createElement("button")
  button.id = 'yt-ss-btn'
  button.title = 'Screenshot'
  button.className = 'ytp-button style-scope ytd-player'
  button.innerHTML = '<svg viewBox="-6 -6 38 38" class="style-scope ytd-player"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" class="style-scope ytd-player" fill="#fff"></path></svg>'

  button.onclick = () => {
    const video = document.querySelector('video')
    const canvas = document.createElement('canvas')
    canvas.width = video?.videoWidth
    canvas.height = video?.videoHeight
    canvas.getContext('2d')?.drawImage(video, 0, 0, canvas.width, canvas.height)

    // download screenshot directly
    const link = document.createElement('a')
    link.download = `yt-screenshot-${Date.now()}.png`
    link.href = canvas.toDataURL()
    link.click()
  }

  // place button on the player control bar
  const observer = new MutationObserver(_ => {
    const control_bar = document.querySelector('.ytd-player.ytp-right-controls')
    if (!control_bar) return

    control_bar.prepend(button)
    observer.disconnect()
    console.log(`[${NAME}] loaded...`)
  })
  observer.observe(document.body, { childList: true, subtree: true })
}

main()