Very cool!! Nice job on this. One thing I was just imagining was an optional “high quality” mode where it screenshots the page using getDisplayMedia, which will be more accurate (e.g. iframes, modern CSS, etc.), but has the downside that it requires a browser permission popup:

async function captureScreenshot() {
  try {
    // Request screen capture permission if not already granted
    const stream = await navigator.mediaDevices.getDisplayMedia({ preferCurrentTab: true });
    
    // Create a video element to capture the stream
    const video = document.createElement('video');
    video.srcObject = stream;
    await video.play();

    // Create a canvas to draw the video frame
    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;

    // Draw the current video frame to the canvas
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

    // Stop all tracks in the stream
    stream.getTracks().forEach(track => track.stop());

    // Convert the canvas to a data URL (PNG format)
    return canvas.toDataURL('image/png');
  } catch (error) {
    console.error('Error capturing screenshot:', error);
    return null;
  }
}

https://perchance.org/getdisplaymedia-screenshot-example

If the mode is set to high quality, and the user denies the permission (or their device doesn’t support it - e.g. mobile devices don’t currently support getDisplayMedia), then it could fall back to the normal approach.

In any case, well done with this plugin!