Question: Transfering data from window to extension

Hey, i have a question. I would like to use this implementation of vscode in browser as frontend for lowcode platform. I want to use this in iframe and i want to send data through window.postMessage.

However vscode extension has no access to window object. I tried creating custom command similarly to github1s.vscode.get-browser-url and i am able to register eventListener on window in this way, but i have no clue how to pass information from callback to extension

Is this even possible?

Thanks for info

[conwnet]

and therefore i can’t listen to events that are occuring outside extension (events comming from window)

I think we can do that:

// in your extension, for example:
// demo-extension/src/extension.ts

import * as vscode from 'vscode';

vscode.commands.registerCommand('my-command-register-by-extension', (data) => {
    // do something related extension
    console.log(data); // once user click `document.body`, the extension should print 'click'
});

// in vscode, for example:
// src/vs/code/browser/workbench/workbench.ts

import { commands } from 'vs/workbench/workbench.web.api';

document.body.onclick = (e) => {
    commands.executeCommand('my-command-register-by-extension', e.type);
}

[conwnet]

@mecirmartin

However vscode extension has no access to window object.

Yes, the extension runs inside a webworker, so we can’t visit the window object directly. And the extension host service also runs inside an isolated iframe:

https://github.com/conwnet/github1s/blob/master/resources/index.html#L180-L181

We can also use the postMessage API inside a webworker (just contact with the extension host service directly), but I think the vscode command maybe better in this case.

I tried creating custom command similarly to github1s.vscode.get-browser-url and i am able to register eventListener on window in this way, but i have no clue how to pass information from callback to extension

You can register a command like github1s.vscode.get-browser-url in vscode main service, and then the extension can get the data from vscode main service by using the extension API (vscode.commands.executeCommand('github1s.vscode.get-browser-url', ...arguments)). Noted the Returns of the executeCommand API is the returned value of the given command(the window object works here) and the arguments is the data we can get inside an extension context (webworker).

https://code.visualstudio.com/api/references/vscode-api#commands

You can also register a command in your extension context using the API (vscode.commands.registerCommand). So that we can call the function which comes from the extension context once the vscode is ready when we are in vscode main service.

Hope the information above can help you.