suggestion: allow for transparent backgrounds in screenshots

[lino-levan]

See #16

[lowlighter]

Regarding this:

There isn't one currently, but I was really curious because it doesn't seem to exist as an option in the CDP protocol. After some investigation, I found out why.

Essentially, puppeteer just makes the background transparent for the screenshot and then undoes that. I'm not sure if this is the best way of doing that (it seems super race-y). I'm starting to wonder whether or not I should just expose the transparency emulation directly? Curious to hear your thoughts here.

Until this eventually lands in astral, how would one access the transparency emulation currently ? Is it possible to just put the background transparent and handle the screenshot manually ?

[lino-levan]

Until this eventually lands in astral, how would one access the transparency emulation currently ? Is it possible to just put the background transparent and handle the screenshot manually ?

One of my favorite parts of Astral is that it exposes the CDP bindings ("celestial" bindings) for the user to mess with. In this case, you could get the celestial bindings on a page and then make a call to the protocol directly. The bindings are fully typed!

You can find the chrome protocol docs at https://chromedevtools.github.io/devtools-protocol/.

I haven't tested it but something like:

const browser = await launch();
const page = await browser.newPage();
const celestial = page.unsafelyGetCelestialBindings();

// use the emulation bindings to set the background color
await celestial.Emulation. setDefaultBackgroundColorOverride({r: 0, b: 0, g: 0, a: 0});
await page.goto("https://google.com");
Deno.writeFileSync("screenshot.png", await page.screenshot());

[lowlighter]

Cool thanks for the explanation and the doc link !

I searched quickly in astral but couldn't find it since in the screenshot puppeteer named their method setTransparentBackgroundColor() instead of keeping the CDP name 🙃