Hard code embeding code server

[TommyLike]

Is it possible to hard code embeding code server instance into our own page? I mean the whole page is customized, while serializing the code server in specific DIV and connecting it to the backend server via websocket, this is how to done in gotty(web termnial project):

if (elem !== null) {
    var term: Terminal;
    if (gotty_term == "hterm") {
        term = new Hterm(elem);
    } else {
        term = new Xterm(elem);
    }
    const httpsEnabled = window.location.protocol == "https:";
    if (window.location.pathname.endsWith('/')) {
        const url = (httpsEnabled ? 'wss://' : 'ws://') + window.location.host + window.location.pathname + 'ws';
    } else {
        const url = (httpsEnabled ? 'wss://' : 'ws://') + window.location.host + window.location.pathname + '/ws';
    }
    const args = window.location.search;
    const factory = new ConnectionFactory(url, protocols);
    const wt = new WebTTY(term, factory, args, gotty_auth_token);
    const closer = wt.open();

    window.addEventListener("unload", () => {
        closer();
        term.close();
    });
};

Not sure it's possible in code server. See how we did within gotty.

[jsjoeio]

I am not sure to be honest but @code-asher might know

[code-asher]

Very interesting question. Code's HTML is here: https://github.com/microsoft/vscode/blob/15e4ae374b642d60604b9ece83f5a077cad86278/src/vs/code/browser/workbench/workbench.html

There is some server-side injection ({{WORKBENCH_WEB_CONFIGURATION}} for example) which could make things tricky. Also Code is hard-coded to use body so that would need to be patched.

The easier route is probably to use an iframe.

[alanhe421]

If using an iframe, I would like to know if there is a way to enable communication between the code-server and the host page, such as allowing a code-server extension to communicate with the host page to perform certain specified actions.

[code-asher]

Making an extension communicate with the parent page is probably going to involve significant patching to VS Code, but it should be possible.

Vaguely implementation probably looks something like:

1. Add a listener for messages between the parent and child frames
2. Add or hijack a channel between the main thread and the extension host (as a random example see mainThreadCommands.ts and extHostCommands.ts)
3. Add API for extensions to use the new channel