YouTubeの動画エリアをキャプチャして，pngファイルとして保存するブックマークレット

youtube-capture-bookmarklet.js

(() => {
  const parseQueryString = (queryString) => {
    const params = {};
    queryString
      .split('&')
      .forEach((str) => {
        const [k, v] = str.split('=');
        params[k] = decodeURIComponent(v);
      });
      return params;
  };

  const { v: videoId } = parseQueryString(location.search.substr(1));
  const videoElm = document.querySelector('video');
  const canvasElm = document.createElement('canvas');
  canvasElm.width = parseInt(videoElm.style.width);
  canvasElm.height = parseInt(videoElm.style.height);
  canvasElm.getContext('2d').drawImage(videoElm, 0, 0, canvasElm.width, canvasElm.height);
  const anchorElm = document.createElement('a');
  anchorElm.setAttribute('download', `${videoId}.png`);
  anchorElm.setAttribute('href', canvasElm.toDataURL("image/png").replace("image/png", "image/octet-stream"));
  anchorElm.click();
})();