Could you please add a screenshot function?

[janson403]

For example, press s and the extension would take a screenshot of all videos that the html5players are currently playing (ignore all audio players), put all screenshots into a (hovering or not) panel and it's up to us to decide whether to copy, download or delete the screenshot.

[janson403]

@polywock hello i wrote a script with the help of gpt, and i add a key binding to S to launch the script below to take a screenshot, so the problem is solved, thank you for your awesome extension:

// IIFE to avoid polluting global scope
(function () {
  // 1. Get video element: Find the first <video> tag
  const video = document.querySelector("video");

  // 2. Create canvas with video's native resolution
  const canvas = document.createElement("canvas");
  canvas.width = video.videoWidth;   // Video's native width
  canvas.height = video.videoHeight; // Video's native height
  const ctx = canvas.getContext("2d");

  // 3. Capture current frame
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

  // 4. Generate timestamped filename (sanitize illegal chars)
  const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
  const filename = `video-screenshot-${timestamp}.png`;

  // 5. Convert canvas to Blob and create download link
  canvas.toBlob(
    function (blob) {
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = filename;  // Set download attribute
      document.body.appendChild(a);
      a.click();  // Trigger download

      // 6. Cleanup DOM and memory after 100ms
      setTimeout(() => {
        document.body.removeChild(a);
        URL.revokeObjectURL(url); // Release memory
      }, 100);
    },
    "image/png",  // Output format
    1          // Image quality (0-1)
  );
})();

[polywock]

Awesome! I always love to see people using the javascript features with ChatGPT. Very underrated workflow.