Frontend extension execution order

JupyterLab extensions
1

Hi,

I have a question about the order in which frontend extensions. For example, if my extension make s a chnage to the DOM how can I ensure something else does not come along and replace it.

For example if I make this extension to change the window title

import {
  JupyterFrontEnd,
  JupyterFrontEndPlugin
} from '@jupyterlab/application';


const plugin: JupyterFrontEndPlugin<void> = {
  id: 'my_extension:plugin',
  description: 'My Extension',
  autoStart: true,
  activate: (
    app: JupyterFrontEnd,

  ) => {
    console.log('JupyterLab extension my_extension is activated!');
    const title=document.querySelector("title");
    if(title) title.textContent="My Title";
  }
};

export default plugin;

When I load the page the script executes and the title chnages, but then something later on chnages it back. Is there a way I can stop this happening (i.e. execute my extension last once the dom is loaded)?

Any help would be greatly appreciated

2

The title is managed programatically, it changes when user opens a new notebook, changes workspace etc. What exactly would you like in the title?

1 Like
3

I see. Thanks. I just wanted to provide the server name for the user in the page title. From looking a little bit more I think there is a way to set this when building (or maybe there are some templates that can be adpated somewhere).

However I am still having issues around the timing of execution for front end extensions. Another example was trying to get the logo element like this

    const logoElement = document.getElementById('jp-MainLogo');
    console.log('logoElement=',logoElement);

In a developer console this works, but when run as part of an extension this does not. My suspicion is that it is because the code in the extension executes before the page has finished loading. Feel free to correct me on this though. Is there a way to specify front end execution after the page has finished loading?

4

From looking a little bit more I think there is a way to set this when building (or maybe there are some templates that can be adpated somewhere).

I think these are the relevant issues:

It sounds like setting appName in page_config.json should work.

However I am still having issues around the timing of execution for front end extensions. Another example was trying to get the logo element like this

Again, this is not how you would go about customizing JupyterLab. You cannot just go around and change the DOM elements as these are owned by JupyterLab (well, technically you can but as you see it is not a reliable way to achieve a good UI). Instead, you need to disable a core plugin providing the logo and add the logo widget on the shell via your custom plugin.

See

5

Thanks, this is really helpful.