Remote browser/electron monitor through the devtools protocol

remote-devtools-render-poc.js

'use strict';

const puppeteer = require('puppeteer');
const CDP = require('chrome-remote-interface');
const fs = require('fs').promises;

function timeout(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function waitMouseEvent(client, event) {
    const res = await client.Runtime.evaluate({
        awaitPromise: true,
        expression: `
            new Promise((resolve, reject) => {
                document.addEventListener(
                    '${event}',
                    (res) => {
                        data = {
                            x: res.pageX,
                            y: res.pageY,
                            buttons: res.buttons,
                            modifiers: 0,
                            clickCount: res.detail
                        }

                        if (res.ctrlKey)
                            data.modifiers += 2;

                        if (res.shiftKey)
                            data.modifiers += 8;

                        if (res.altKey)
                            data.modifiers += 1;

                        if (res.metaKey)
                            data.modifiers += 4;

                        switch (res.button) {
                            case 0:
                                data.button = 'left';
                                break;

                            case 1:
                                data.button = 'middle';
                                break;

                            case 2:
                                data.button = 'right';
                                break;
                        }

                        if ('${event}' == 'mousedown') {
                            data.type = 'mousePressed'
                        }

                        else if ('${event}' == 'mouseup') {
                            data.type = 'mouseReleased'
                        }

                        else if ('${event}' == 'mousemove') {
                            data.type = 'mouseMoved'
                        }

                        resolve(JSON.stringify(data));

                    },
                    { once: true });
            })`
    });

    const value = res.result.value;
    return JSON.parse(value);
}

(async () => {
    let vscode, client, browser;

    try {
        // create blank file
        const fh = await fs.open('blank.html', 'w');
        await fh.close();

        // open chrome in app mode with blank file
        browser = await puppeteer.launch({
            headless: false,
            args: [
                '--disable-infobars',
                '--app=' + 'file://' + __dirname + '/blank.html'
            ]
        });

        // get browser hostname and port
        const [host, port] = browser.wsEndpoint().split('/')[2].split(':');

        // get tab list
        let clientTarget;
        for (let target of await CDP.List({host, port})) {
            if (target.type == 'page') {
                clientTarget = target;
                break;
            }
        }

        // connect to tab
        client = await CDP({
            'target': clientTarget
        });

        // connect to vscode
        vscode = await CDP({
            'target': 'ws://localhost:8315/devtools/page/71c8cf3a-2aac-4022-bea2-f8e5cd63e960'
        });


        // setup crude event forwarding
        (async () => {
            while (true) {
                await vscode.Input.dispatchMouseEvent(
                    await waitMouseEvent(client, 'mousedown'));

                console.log('mouse down');
            }
        })();

        (async () => {
            while (true) {
                await vscode.Input.dispatchMouseEvent(
                    await waitMouseEvent(client, 'mouseup'));

                console.log('mouse up');
            }
        })();

        (async () => {
            while (true) {
                await vscode.Input.dispatchMouseEvent(
                    await waitMouseEvent(client, 'mousemove'));
            }
        })();


        // start render loop
        let oldhtml;
        while (true) {
            //await timeout(1000);

            // get html from vscode
            const {root: {nodeId: vsDocNodeId}} = await vscode.DOM.getDocument();
            const {nodeId: vsNode} = await vscode.DOM.querySelector({
                selector: 'html',
                nodeId: vsDocNodeId,
            });
            const result = await vscode.DOM.getOuterHTML({
                nodeId: vsNode
            });
            const html = result.outerHTML;



            // set html on browser
            if (oldhtml !== html) {
                console.log('rendering');

                const {root: {nodeId: brDocNodeId}} = await client.DOM.getDocument();

                const {nodeId: brNode} = await client.DOM.querySelector({
                    selector: 'html',
                    nodeId: brDocNodeId,
                });

                await client.DOM.setOuterHTML({
                    nodeId: brNode,
                    outerHTML: html
                });
            }


            oldhtml = html;
        }

    } catch (err) {
        console.error(err);

    } finally {
        console.log('cleaning up');

        if (client) {
            await client.close();
        }

        if (vscode) {
            await vscode.close();
        }

        if (browser) {
            await browser.close();
        }

        console.log('done');
    }

})();

hey mate, I am trying to run this but I am not sure how you started vscode and connected the remote dev tools to port 8315?

hey mate, I am trying to run this but I am not sure how you started vscode and connected the remote dev tools to port 8315?

Just start vscode with CDP turned on: code --remote-debugging-port=8315 :)