External API calls to trigger JupyterLab features

JupyterLab
,
7

The --expose-app-in-browser thing is, as I said, a hack, and probably not something you should rely on, and as such isn’t rely documented as a sound integration technique. But as it can be enabled without re-building anything, it can be quick to explore in the browser console, which is going to be more instructive than narrative.

The labextension technique, on the other hand, has extensive documentation and automated tools.

If you’re already building a labextension, you can add your own iframe API with postMessage. Note, too: this kinda smells like a hack. That’s why this kind of capability isn’t in Lab in the first place… and probably won’t be added, but might make sense as a dedicated extension, especially if it allowed for mapping arbitrary postMessage payloads to JupyterLab commands, and handled some of the security junk.

Anyhow: roughly around here, this untested/unchecked code is kinda what one might need:

const activate(lab: JupyterFrontEnd) => {
  const MY_URL = 'https://my-app.com';
  const {commands} = app;
  
  const existingFeature(args) => /* ... */;

  const onMessage(event) => {
    const {source, origin, data} = event;
    if (origin != MY_URL) { return }
    existingFeature(JSON.parse(data));
  };

  window.addEventListener("message", onMessage);
};

Then, from outside:

const frame = document.querySelector('iframe#jupyterlab');
const button = document.querySelector('button#do-thing-in-lab')
button.addEventListener('click', function() {
  frame.postMessage(JSON.stringify({do: 'thing'}));
});
1 Like