Download the currently displayed frame of a YouTube video as a PNG

savePlayerFrame.js

const saveBlob = (blob, fileName) => {
    const a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    const url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = fileName;
    a.click();
    window.URL.revokeObjectURL(url);
};

const platformConfigs = {
    "vimeo.com": { "selector": "div.player_container > div.player > div.vp-video-wrapper > div.vp-video > div > video" },
    "youtube.com": { "selector": "#movie_player > div.html5-video-container > video" }
};
const supportedPlatforms = Object.keys(platformConfigs);
const platform = supportedPlatforms.find( platform => window.location.hostname.includes(platform) );
if (platform === undefined) { throw new Error("unable to identify video platform") }
else { console.debug("Platform:", platform); }

(function () {
    const videoEl = document.querySelector(platformConfigs[platform].selector);
    const canvas = new OffscreenCanvas(videoEl.videoWidth, videoEl.videoHeight);
    canvas.getContext('2d', { alpha: false }).drawImage(videoEl, 0, 0, canvas.width, canvas.height);
    canvas.convertToBlob({ options: { type: 'image/png' } }).then( blob => saveBlob(blob, 'frame.png') );
}());

Simply paste this into the DevTools console, and a file named frame.png will download. Note: the resolution of the still frame is dependent upon the current video resolution. If the playback resolution is set to Auto, then the image may not be the highest resolution available due to buffering. If you want the highest resolution, manually set the resolution to the highest, and then run the script.