I want to screenshot youtube videos for an app. I can do this with clip to onenote chrome extension but don't know how to emulate the functionality

Question

So clip to OneNote and other clipping extensions can screenshot everything on the page including content in an iframe. Does anyone know how they do that? I figure it's some sort of javascript functionality. When I tried to use html2canvas, they said it wouldn't be possible to grab the iframe. As far as security issues go, this screenshot would be rendered clientside.

Answer 1

You can use the captureVisibleTab api with the "<all_urls>" permission.

"Captures the visible area of the currently active tab in the specified window."

chrome.tabs.captureVisibleTab(
 chrome.windows.WINDOW_ID_CURRENT,
 { format: "png" || "jpeg" },
 function(dataurl) {
  console.log(dataurl)
 }
)

https://developer.chrome.com/extensions/tabs#method-captureVisibleTab