How Can I Add Actions To The Tool-bar In The Dashboard Of Jupyter Notebook?

I'm creating a custom front-end extension for Jupyter Notebook. The actions will be triggered via buttons in the Notebook Dashboard and the Notebook Editor. The extension will aff

Solution 1:

You can use a bit of jQuery to get this effect. For instance, if you want your button to appear before the Delete button, you can add something like

$('<button/>')
    .addClass('my-new-button btn btn-default btn-xs')
    .attr('title', 'My New Button')
    .attr('aria-label', 'My New Button')
    .text('My New Button')
    .insertBefore('.delete-button')
    .on('click', function () {...});

This is a little fragile, because it relies on the '.delete-button' being in that location, but the docs note that the front-end API is not very stable anyways. In addition, the button will probably always be shown, since I haven't found a way to get access to the selected list and check whether the button should be displayed. Finally, this probably won't work with JupyterLab which is the future™

This could go in an nbextension (see frontend extensions and distributing extensions) to make it easier to install.