How puppeeter works ?

print-pdf-for-paged-js.md

inspired from https://gitlab.pagedmedia.org/tools/pagedjs-cli/blob/master/index.js

This implement a Printer class that extend EventEmitter which does:

1. browser = puppeteer.launch()
2. page = browser.newPage()
3. Serving the paged html locally
   • /print the website
   • /polyfill les scripts js
4. page.goto(http://localhost:${port}/print/${basename}) locally served files
5. page.exposeFunction source
   • Create a binding: send('Runtime.addBinding', {name: name}) source
   • that would trigger an event client.on('Runtime.bindingCalled', event => this._onBindingCalled(event));
   • also after this._client.send('Page.addScriptToEvaluateOnNewDocument', {source: expression});
6. So it page.exposeFunction('PuppeteerLogger', (msg, counter) then,
7. page.exposeFunction('onPagesRendered', async (msg, width, height, orientation) that emit the message
8. Add local paged.js

   await page.addScriptTag({
     url: `http://localhost:${port}/polyfill/paged.polyfill.js`
   });
   

   • This lead to there
   • This add the script.
9. page.waitForSelector(".pagedjs_pages"): Waiting for a class in the page

Printing to pdf

Settings

settings = {
      printBackground: true,
      displayHeaderFooter: false,
      preferCSSPageSize: options.width ? false : true,
      width: options.width,
      height: options.height,
      orientation: options.orientation,
      margin: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
      }
    }

pupetteer

https://github.com/GoogleChrome/puppeteer/blob/a2f1e2774af31ffa7a786b0e754ec638ab428d76/lib/Page.js#L928

• const result = await this._client.send('Page.printToPDF', {

9. page.waitForSelector(".pagedjs_pages")

Note

• Pagedjs implement window.PuppeteerLogger("page") and window.onPagesRendered(msg, styles.width.value + styles.width.unit, styles.height.value + styles.height.unit, styles.orientation);
• If we can get back those information into R, it would help.

working_notes.md

Working notes for crrri developpement.

general description

• puppeeter launch creates a new connection then a new browser with this connexion

• Connection creation

• When creation is done,

  • a browser is created. (new Browser()) https://github.com/GoogleChrome/puppeteer/blob/79ec7a3fe5630cb0ee186c8db6807bd0ff2e0f51/lib/Browser.js#L103
    • and some on events are registered code,
    • after browser creation a command is sent Target.setDiscoverTargets code
    • and some event are catched by the one previously registered. if a target is created targetCreated, then
    • new flow is run with a new Target using a browserContext code

• new target is a new promises code

  • this create a new session connection.createSession and that would create a new CDPSession code
  • everythings keeps track of sessionIDs and targetIDs This would end the creation I think

• The call to browser.NewPage() would called the inner class BrowserContext, that would call the creation of a new page using Target.createTarget code

  • the page returned is the one from the created target, that would call page.create
  • page.create enable page module, create a new page object then use promise.all to continue
  • the page object contains everything else from devtools protocols.

From there you can do everything!

Global mechanism

This use promise to check for well received command through messages

about connection object

• receive a message
• get ID
• when a message is sent, the id is register with the method, and promise method reject and resolve
• if method is received, event is emit
• TODO: needs special treatment for Target Event
  • https://github.com/GoogleChrome/puppeteer/blob/e2e43bc23d2a81eb9c9214fb64f5fff3b95e6590/lib/Connection.js#L100
  • https://github.com/GoogleChrome/puppeteer/blob/e2e43bc23d2a81eb9c9214fb64f5fff3b95e6590/lib/Connection.js#L96
• There is also a CDPSession class that inherit eventEmitter and use the previous connection class.
  • it uses Target.sendMessageToTarget to send message using the send function