How can I set global variables before page load in Puppeteer, similar to PhantomJS onInitialized?

Other Questions Puppeteer
1

I’m trying to switch from PhantomJS to Puppeteer. In my old code, I used the onInitialized method to set a global variable that the page could use when it first loaded. But I can’t figure out how to do this in Puppeteer.

I’ve tried a few things:

  1. Using evaluate() after creating the page but before loading it. This sets the variable, but it gets reset when the page loads.
  2. Setting it in the domcontentloaded event. This works, but it’s too late for my needs.
  3. Setting it after page.goto(). This is definitely too late.

Here’s a simplified version of what I’ve tried:

const browser = await puppeteer.launch();
const page = await browser.newPage();

// Attempt 1: Before page load
await page.evaluate(() => {
  window.myConfig = 'before';
});

// Attempt 2: On DOM content loaded
page.on('domcontentloaded', () => {
  page.evaluate(() => {
    window.myConfig = 'during';
  });
});

await page.goto('https://example.com');

// Attempt 3: After page load
await page.evaluate(() => {
  window.myConfig = 'after';
});

Is there a way to set a global variable that persists through page load, similar to PhantomJS’s onInitialized?

2

hey sophialee92, have u tried using page.evaluateOnNewDocument()? it runs before any scripts on the page, so it should work like phantomjs’s onInitialized. heres an example:

await page.evaluateOnNewDocument(() => {
  window.myConfig = 'persists';
});
await page.goto('https://example.com');

hope this helps!

3

I’ve been using Puppeteer for a while now, and I found that the setExtraHTTPHeaders method can be quite useful for this scenario. It allows you to set custom headers that persist through navigation, which you can then access in your page scripts. Here’s how I typically do it:

await page.setExtraHTTPHeaders({
  'X-My-Config': JSON.stringify({ key: 'value' })
});

await page.evaluateOnNewDocument(() => {
  const myConfig = JSON.parse(document.querySelector('head').getAttribute('x-my-config'));
  window.myConfig = myConfig;
});

await page.goto('https://example.com');

This approach has worked well for me as it doesn’t require request interception and allows for more complex configurations. Just remember to parse the JSON on the page side. It’s a bit of a workaround, but it’s reliable and doesn’t interfere with page loading.

4

I’ve encountered a similar challenge when migrating from PhantomJS to Puppeteer. The solution that worked for me was using page.setRequestInterception(true) combined with page.on(‘request’). This approach allows you to intercept and modify requests before they’re sent, giving you an opportunity to inject your global variables.

Here’s how you can implement it:

await page.setRequestInterception(true);
page.on('request', request => {
  if (request.resourceType() === 'document') {
    request.respond({
      status: 200,
      contentType: 'text/html',
      body: `<script>window.myConfig = 'persists';</script>${request.url()}`
    });
  } else {
    request.continue();
  }
});
await page.goto('https://example.com');

This method ensures your global variable is set before any page scripts run, mimicking PhantomJS’s onInitialized functionality.