Injecting a script tag (or script code) to inside every iframe

Hi,

My goal is to re-initialize certain Javascript read-only variables such as window.screen.pixelDepth for the entire page, including iframes in it. I can add a script tag to the top-level HTML by using this code:

await page.evaluate(scriptText => {
  const el = document.createElement('script');
  el.type = 'text/javascript';
  el.textContent = scriptText;
  document.head.prepend(el);
}, scriptToInject);

However, this does not get applied to the HTML pages loaded by <iframe> tags. I wonder how I can inject Javascript for all HTML pages inside iframes of a top-level page.

[gogo9th]

Yes, this works nicely. Thanks very much for your clever solution!

[vsemozhetbyt]

Another attempt:

import puppeteer from 'puppeteer';
const browser = await puppeteer.launch();

try {
  const [page] = await browser.pages();

  await page.evaluateOnNewDocument(() => {
    const observer = new MutationObserver((mutations) => {
      for (const mutation of mutations) {
        if (Array.from(mutation.addedNodes).some(node => node.nodeName === 'BODY')) {
          observer.disconnect();
          Object.defineProperty(document.body, 'offsetWidth', {
             value: 1000,
             writable: false,
             configurable: true
          });
        }
      }
    })
    observer.observe(document, { childList: true, subtree: true });
  });

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

  const data = await page.evaluate(() => {
    return document.body.offsetWidth;
  });
  console.log(data);
} catch(err) { console.error(err); } finally { await browser.close(); }