-1

I am currently working on a Chrome extension that requires capturing screenshots of web pages in the background, without the user switching tabs. However, I've run into several issues during my attempts, and I'm seeking advice on achieving a reliable solution.

I've tried various approaches, including using libraries like html2canvas and Puppeteer, as well as native JavaScript methods like drawWindow. Unfortunately, these solutions encountered problems such as:

CORS Issues: Images and fonts from external domains are not properly captured, resulting in incorrect images. Screenshots Not Representing Reality: The generated screenshots do not always accurately represent what the user sees, especially for asynchronously loaded elements. DOM Duplication: Some methods generate a duplicate of the DOM, which can lead to performance and display issues. I would like to know if there is a recommended approach for capturing background screenshots, avoiding these CORS, incorrect rendering, and DOM duplication problems. Ideally, I want to obtain screenshots that faithfully reflect what the user sees on the screen.

I am open to any suggestions, including code examples, recommended libraries, or best practices for resolving this issue.

Thank you in advance for your assistance!

Robin
  • 1
  • https://blog.shahednasser.com/how-to-take-screenshots-in-chrome-extension/ – Bergi Aug 22 '23 at 12:08
  • Just make the extension switch tabs by itself before taking the screenshot? – Bergi Aug 22 '23 at 12:08
  • Have you seen https://stackoverflow.com/questions/4573956/taking-screenshot-using-javascript-for-chrome-extensions or https://stackoverflow.com/questions/71953104/take-full-screenshot-in-chrome? Alternatively, take a look at [this approach](https://stackoverflow.com/questions/64343246/chrome-extension-connect-chrome-debugger-and-take-full-screenshot) – Bergi Aug 22 '23 at 12:11

0 Answers0