Creating a Jupyter Notebook Extension — Part 1

I’m building a new GUI for Pandas aptly called “Pandamonium” as a Jupyter Notebook Extension. I’ve not built a Jupyter Notebook extension before and I’ve spent this last weekend learning all about the extension eco-system. I’m going to share my learnings with a series of blog posts — a great way to get me to blog again in a pretty hectic 2020. This first post covers creating a simple extension that you can modify and see the changes reflected in a Notebook. I did not find much useful documentation (especially when using conda) so hopefully, this blog post will be useful to anybody starting out with Jupyter Notebook extensions.

Step 1: Create and activate a conda virtual environment

$ conda create — name jupyterexperiments python=3.7
$ conda activate jupyterexperiments

Step 2: Install jupyter_contrib_nbextensions

$ conda install -c conda-forge jupyter_contrib_nbextensions

Step 3: Find the location of the nbextensions folder

$ pip show jupyter_contrib_nbextensions
The location site-packages will be shown eg /Users/username/anaconda3/envs/jupyterexperiments/lib/python3.7/site-packages
The jupyter_contrib_nbextensions/nbextensions folder will be within the site-packages folder. You will need to place the code (folder) for your extension in this folder. eg
/Users/username/anaconda3/envs/jupyterexperiments/lib/python3.7/site-packages/jupyter_contrib_nbextensions/nbextensions

Step 4: Explore some existing extensions

Exploring existing extensions is a great way to get inspiration. Start your Jupyter Notebook and you’ll see a new tab called “NBextensions” where you’ll be able to enable the default extensions. Enabled extensions are available for use in newly created or edited Notebooks.

$ jupyter notebook

In /Users/username/anaconda3/envs/jupyterexperiments/lib/python3.7/site-packages/jupyter_contrib_nbextensions/nbextensions you will find a folder for each of the extensions.

Folders for Installed Jupyter Extensions

Explore the code of any extension. You see that most extensions only contain .yaml, main.js and readme.md file. Some more complex extensions also contain python code.

The basic structure of a Jupyter Notebook Extension

Step 5: Create your first extension — Planet Jupyter

Planet Jupyter will be a very simple extension that adds a button to the Notebook Toolbar that when clicked inserts a “Hello World” message into a new cell. All code can be found on github.

Create a new folder called planet_jupyter
$ mkdir planet_jupyter
$ cd planet_jupyter

Add a readme.md file and include some info on the extension.

Add a description.yaml file. Set Name to “Planet Jupyter” and Main to the name of the javascript file.

Next add a main.js file. The javascript in this file must follow the AMD module syntax. The code below adds a button to the Toolbar and provides code to run when the button is clicked. The insert_cell function inserts a new cell with a code comment.