Chrome-remote-interface: Render raw HTML instead of navigating to a URL

[westy92]

Is there a way to have Chrome render a string of raw HTML instead of having it navigate to a URL?

[cyrus-and]

Maybe using Page.setDocumentContent. This should work:

const CDP = require('chrome-remote-interface');

CDP(async (client) => {
    const {Page} = client;
    try {
        const {frameId} = await Page.navigate({url: 'about:blank'});
        const html = '<marquee>It works!</marquee>';
        await Page.setDocumentContent({frameId, html});
    } catch (err) {
        console.error(err);
        client.close();
    }
}).on('error', (err) => {
    console.error(err);
});

Note that you can fetch frameId by other means for example by using the Page.frameAttached event.

[utkuturunc]

@cyrus-and This works for html and css but remote scripts does not get loaded. Any ideas how to invoke them?

[cyrus-and]

@utkuturunc you're right it doesn't work for scripts, you should submit an issue [here]. You can always evaluate arbitrary JavaScript code in the tab context using, for example, the [Runtime] domain.

[utkuturunc]

@cyrus-and Thanks for the replies. I will submit that issue.

In the mean time, if anybody wants to do this you can simply convert the html string to a data uri and navigate to that uri. This also makes getting the frameId easier.

[westy92]

@utkuturunc did you get the issue submitted?

[utkuturunc]

Sorry for the delay. I just did.
https://github.com/ChromeDevTools/devtools-protocol/issues/13

By the way I cannot capture the frameId using any event, Page.frameAttached does not seem to be firing. I couldn't get it to work without navigating to a blank page.

[cyrus-and]

@utkuturunc AFAIK Page.frameAttached is fired during the page loading phase when a new frame is parsed from the HTML then attached to the parent frame, where the root frame is the one you get with Page.navigate. But it still implies a page navigation.

Alternatively you can use [Page.getResourceTree], for example to get the root frame:

const CDP = require('chrome-remote-interface');

CDP(async (client) => {
    try {
        const {Page} = client;
        const {frameTree} = await Page.getResourceTree();
        const root = frameTree.frame;
        console.log(root.id);
    } catch (err) {
        console.error(err);
    } finally {
        client.close();
    }
}).on('error', (err) => {
    console.error(err);
});