Communication between a host page and a JupyterLite instance running in an IFrame

Question

Not able to send data from the hosted page to the jupyter-lite instance.

I came across this doc that gives a good idea of how themes are being managed from the hosted page.

Similarly now I would like to send data particularly code from the hosted page to the jupyter lite instance but don;t know how to do it.

I was thinking if this might help me but not: https://jupyterlab.readthedocs.io/en/latest/api/modules/codeeditor.html

I tried to update the index.ts as follows:

import { JupyterFrontEnd, JupyterFrontEndPlugin } from '@jupyterlab/application';
import { IEditorServices } from '@jupyterlab/codeeditor';
import IReplService from '@jupyterlite/server-extension';

/**
 * Initialization data for the jupyterlab-iframe-bridge-example extension.
 */
const plugin: JupyterFrontEndPlugin<void> = {
  id: 'jupyterlab-iframe-bridge-example:plugin',
  autoStart: true,
  requires: [IEditorServices, IReplService],
  activate: (app: JupyterFrontEnd, editorServices: IEditorServices, replService: IReplService) => {
    console.log('JupyterLab extension jupyterlab-iframe-bridge-example is activated!');

    /* Incoming messages management */
    window.addEventListener('message', (event) => {
      if (event.data.type === 'from-host-to-iframe') {
        console.log('Code received in the iframe:', event.data.code);
        const editor = editorServices.activeEditor;
        if (editor) {
          editor.model.value.setText(event.data.code);
          editor.focus();
          replService.executeCode(event.data.code);
        }
      }
    });
  },
};

export default plugin;

but this didn;t worked.