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.
ChromeDevTools/devtools-protocol#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);
});