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;
  }
}

@ctwhome Check my answer below, hopefully it helps: https://stackoverflow.com/a/67693462/15206790 — Nikhil Patil, May 25 '21 at 18:13

krassowski · Answer 1 · 2021-06-10T13:39:01.613

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:

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.

score 0 · Answer 2 · answered May 25 '21 at 18:11

I had a hard time getting through the steps and make it work, but here's a list of updated steps that works: https://pastebin.com/UtCLhU1K

Main issue was getting the updated dependencies

jlpm add @jupyterlab/apputils
jlpm add @jupyterlab/coreutils
jlpm add @jupyterlab/docregistry
jlpm add @jupyterlab/notebook
jlpm add @lumino/disposable

And installing the extension

jlpm
# insert button.ts to src folder (also updated the console log in index.ts)
# insert the button info to index.ts
jlpm build
# since jupyter labextension install . keeps failing, this is the only way I can install it rn
jupyter labextension develop --overwrite .
jupyter lab

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

2 Answers2