get dynamic-generated dom in dynamic-generated iframe with cdp

dynamic-iframe-cdp.js

// 一部のコードはこちらのコードを参考にしています。
// https://gist.github.com/imaman/cd7c943e0831a447b1d2b073ede347e2
import CDP from "chrome-remote-interface";
import * as ChromeLauncher from "chrome-launcher";
import * as url from "node:url";

async function launch(action) {
  let chrome;
  try {
    chrome = await ChromeLauncher.launch({});
    console.log(`Chrome debugging port running on ${chrome.port}`);
    return await action(chrome.port);
  } finally {
    if (chrome) {
      chrome.kill();
    }
  }
}

async function onLaunched(port) {
  let client;
  try {
    client = await CDP({ port });
    return await run(client, port);
  } finally {
    if (client) {
      await client.close();
    }
  }
}

async function run(client) {
  const { Page, DOM, Runtime } = client;
  await DOM.enable();
  await Runtime.enable();
  await Page.enable();

  Page.frameNavigated(async (params) => {
    if (!params.frame.parentId || params.frame.url === "about:blank") {
      return;
    }
    console.log(`params: ${JSON.stringify(params)}`);
    console.log(`iframe url: ${params.frame.url}`);
    const u = new url.URL(params.frame.url);

    const doc = await DOM.getDocument({ depth: -1 });
    const { nodeId: iframeNodeId } = await DOM.querySelector({
      nodeId: doc.root.nodeId,
      selector: `iframe[src="${u.pathname}${u.search}"]`,
    });

    DOM.childNodeInserted(({ node }) => {
      DOM.requestChildNodes({
        nodeId: node.nodeId,
        depth: -1,
      });
    });
    const res = await DOM.describeNode({ nodeId: iframeNodeId });
    await DOM.requestChildNodes({
      nodeId: res.node.contentDocument.nodeId,
      depth: -1,
    });
  });
  DOM.setChildNodes(({ _parentId, nodes }) => {
    const walk = (node) => {
      if (node.nodeName === "INPUT") {
        console.log(`Found input node: ${JSON.stringify(node)}`);
      }
      if (node.children) {
        for (const child of node.children) {
          walk(child);
        }
      }
    };
    for (const node of nodes) {
      walk(node);
    }
  });

  await Page.navigate({ url: "http://localhost:8082" });
  await Page.loadEventFired();

  await new Promise((resolve) => setTimeout(resolve, 10000));
}

async function main() {
  return await launch(onLaunched);
}

main()
  .then((x) => console.log(`Output:\n${x}`))
  .catch((e) => console.error("Error: ", e));