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.
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.
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.
Step 6: Install and Enable the Extension
$ jupyter nbextension install planet_jupyter
$ jupyter nbextension enable planet_jupyter/main
You’ll notice a new “plane” icon when you edit or create a new notebook.
Step 7: Continue to Develop your Extension
You can go ahead and extend your extension. After each code change just re-run to have your changes included in your Jupyter Notebook
$ jupyter nbextension install planet_jupyter
$ jupyter nbextension enable planet_jupyter/main
