如何创建 Jupyter Lab 扩展，将自定义按钮添加到 Jupyter Lab 笔记本的工具栏？答案

【问题标题】：How do I create a Jupyter Lab extension, that adds a custom button to the toolbar of a Jupyter Lab notebook?如何创建 Jupyter Lab 扩展，将自定义按钮添加到 Jupyter Lab 笔记本的工具栏？
【发布时间】：2020-11-13 19:58:09
【问题描述】：

我正在尝试创建一个扩展程序，将自定义按钮添加到已打开的 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;
  }
}

【问题讨论】：

你找到解决办法了吗？
@ctwhome 在下面查看我的答案，希望对您有所帮助：stackoverflow.com/a/67693462/15206790

标签： typescript dom jupyter-notebook jupyter-lab

【解决方案1】：

您的按钮代码看起来不错，但不包括实际的application plugin，它将为笔记本注册按钮：

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;

您可能想通过查看这些向笔记本添加按钮的扩展程序的代码来学习：

此外，如果您的意图是附加按钮，则可以将 insertItem() 替换为 addItem()。如果这是您的第一个扩展，我强烈建议您关注 tutorial 并以此为基础。

【讨论】：

【解决方案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

【讨论】：