如何创建一个Jupyter Lab扩展，以向Jupyter Lab笔记本的工具栏添加自定义按钮？

Question

我正在尝试创建一个扩展程序，将自定义按钮添加到打开的Jupyter Lab笔记本工具栏上，类似于此照片中的“提交笔记本”按钮。 我该如何实现这一点？ 我尝试使用以下代码，但它不起作用：

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

- Caleb Oki

---

你找到任何解决方案了吗？ - ctwhome

@ctwhome 请查看我的答案，希望能对您有所帮助：https://dev59.com/2bzpa4cB1Zd3GeqPJVwl#67693462 - Nikhil Patil

Answer 1

你的按钮代码看起来很好，但是没有包括实际的应用插件，该插件将为笔记本注册该按钮。请参考应用程序插件。

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;

您可能想从这些将按钮添加到笔记本的扩展的代码中学习：

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

此外，如果您的意图是追加一个按钮，您可以使用addItem()替换insertItem()。如果这是您的第一个扩展，我强烈建议您遵循教程并建立在其基础上。

- krassowski

Answer 2

我在完成步骤并使其运作方面遇到了困难，但这里有一份更新的步骤清单https://pastebin.com/UtCLhU1K可以使用。

主要问题是获取更新后的依赖项。

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

安装扩展

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

- Nikhil Patil