如何在JupyterLab 3.2.0自定义扩展中监听Notebook单元格事件

你之前找到的代码均为经典Jupyter Notebook的扩展写法，不适用于JupyterLab 3.x版本。针对你的疑问先给出明确结论：

JupyterLab 3.x 确实已经废弃了经典Jupyter Notebook的全局事件注册表机制，所有事件都以*信号（Signal）*的形式挂载在对应模型、组件实例上，需要先获取到Notebook实例再绑定监听，不存在全局可直接访问的事件对象。

前置依赖 #

扩展开发时需要先安装对应的依赖包：
npm install @jupyterlab/notebook @lumino/signaling

常见单元格事件监听实现 #

1. 监听单元格列表变化（新增、删除、移动单元格） #

import { INotebookTracker } from '@jupyterlab/notebook';
import { each } from '@lumino/algorithm';
import { ISignal, Signal } from '@lumino/signaling';

// 扩展激活函数中获取NotebookTracker实例
const activate = (app, notebookTracker: INotebookTracker) => {
  // 监听所有已打开的Notebook实例
  notebookTracker.widgetAdded.connect((tracker, panel) => {
    // 绑定当前Notebook的单元格列表变化信号
    panel.notebook.model.cells.changed.connect((cellList, changed) => {
      // changed.type 可选值: 'add' | 'remove' | 'set' | 'move'
      if (changed.type === 'add') {
        // 遍历新增的单元格模型
        each(changed.newValues, cellModel => {
          // 匹配对应的单元格组件实例
          const cellWidget = panel.notebook.widgets.find(w => w.model.id === cellModel.id);
          // 此处写新增单元格后的处理逻辑
          console.log('新增单元格:', cellWidget);
        });
      }
      if (changed.type === 'remove') {
        each(changed.oldValues, cellModel => {
          console.log('删除单元格:', cellModel.id);
        });
      }
    });
  });
};

2. 监听单元格执行、内容修改、选中事件 #

在上述代码中获取到cellWidget单元格组件实例后，可以绑定更多常用事件：

// 监听单元格执行状态变更
cellWidget.model.stateChanged.connect((model, change) => {
  // 判断是否是执行状态变更
  if (change.name === 'executionCount') {
    if (model.executionCount !== null) {
      console.log('单元格开始执行', model.id);
    } else {
      console.log('单元格执行完成/重置', model.id);
    }
  }
});

// 监听单元格内容变更
cellWidget.model.contentChanged.connect(() => {
  console.log('单元格内容更新:', cellWidget.model.sharedModel.getSource());
});

// 监听单元格选中状态变化
cellWidget.stateChanged.connect((widget, state) => {
  if (state.name === 'selected') {
    console.log('单元格选中状态变更:', state.newValue);
  }
});

注意事项 #

所有绑定的信号需要在组件销毁时手动断开，避免内存泄漏：

// 断开信号连接示例
Signal.disconnectAll(panel.notebook.model.cells.changed);

内容的提问来源于stack exchange，提问作者Stefan