How do I create a Jupyter Lab extension, that adds a custom button to the toolbar of a Jupyter Lab notebook?

Question

I am trying to create an extension that adds a custom button to the toolbar of an opened Jupyter Lab notebook, similar to the "Submit Notebook button ..." in this photo. How do I achieve this? I tried using the following code but it does not work:

import { ToolbarButton } from "@jupyterlab/apputils";
import { DocumentRegistry } from "@jupyterlab/docregistry";
import { INotebookModel, NotebookPanel } from "@jupyterlab/notebook";
import { IDisposable } from "@lumino/disposable";

export class ButtonExtension implements DocumentRegistry.IWidgetExtension<NotebookPanel, INotebookModel> {

  createNew(panel: NotebookPanel, context: DocumentRegistry.IContext<INotebookModel>): IDisposable {
    // Create the toolbar button
    let mybutton = new ToolbarButton({
        label: 'My Button',
        onClick: () => alert('You did it!')
    });

    // Add the toolbar button to the notebook toolbar
    panel.toolbar.insertItem(10, 'mybutton', mybutton);

    // The ToolbarButton class implements `IDisposable`, so the
    // button *is* the extension for the purposes of this method.
    return mybutton;
  }
}

Answer 1

Your button code looks good, but does not include the actual application plugin which would register the button for notebooks:

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

const yourPlugin: JupyterFrontEndPlugin<void> = {
  id: '@your-org/plugin-name',
  autoStart: true,
  activate: (app: JupyterFrontEnd) => {
    const your_button = new ButtonExtension();
    app.docRegistry.addWidgetExtension('Notebook', your_button);
  }
}

export default yourPlugin;

You may want to learn from looking at the code of these extensions that add a button to notebooks:

• jupyter-offlinenotebook / src / index.ts
• retrolab / lab-extension / src / index.ts

Also, you could replace insertItem() with addItem() if your intent is to append a button. If this is your first extension, I would highly recommend following the tutorial and building upon that.