0

I want to download a screenshot of the contents of a Chrome browser window from another Chrome browser window.

I will have full control over both pages and they will be hosted on the same domain.

I have already figured out cross-window communication using postMessage. I am NOT trying to answer the question "how do I call a function in Window B from Window A?"

I am familiar with Puppeteer. This question is related, but I can not use puppeteer because this is running in the browser (and has to run there). I don't need any answers for how to do this server side.

html2canvas is interesting, but too limited. I am looking to capture a screenshot that has perfect fidelity to what chrome displays on screen.

I know Chrome Debugging Protocol exposes a Page.captureScreenshot() method. But I don't know how (or whether it's possible) to communicate with it from within a browser.

Can anyone give me any advice about how to accomplish this?

enter image description here

jessegavin
  • 74,067
  • 28
  • 136
  • 164
  • You can use the messaging protocol to have Window B send the base64 encoded image back to Window A. [here](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) Alternatively, of-course you could use html2canvas without using remote-debugging. – Randy Casburn Mar 14 '19 at 17:40
  • My question is more about how to generate the image data. html2canvas has too many limitations for what I am doing, but thanks for mentioning it. – jessegavin Mar 14 '19 at 17:48
  • if they are on the same domain, you can talk back and forth with localStorage and `storage` events which fire on the non-setting page. or use a shared worker, or use a websocket server. – dandavis Mar 14 '19 at 17:53
  • Hey @dandavis, as I mentioned I already have cross-window communication figured out. My question is not about that, it's about how to capture the content of Window B as an image. – jessegavin Mar 14 '19 at 19:43
  • Ok, then I'm not sure why you can't call the function from B, given that it works, then send the data to A using one of the above methods... – dandavis Mar 14 '19 at 19:56
  • @dandavis I am not seeking advice on how to call a function in Window B from Window A, I am seeking advice on the function itself. - How do I capture a snapshot of Window B? What function can I write that will accomplish that? – jessegavin Mar 15 '19 at 03:19
  • You tagged the question [google-chrome-devtools], should we assume it's for your personal use only, and thus you are also ok with using either tools that are only available from dev-tools, either using a browser extension, or are you looking for a way to do it all from web APIs? – Kaiido Mar 15 '19 at 05:06
  • Erring on the web-api only side... There is no way in Chrome. – Kaiido Mar 15 '19 at 05:17

0 Answers0