[FIXED] How to auto-update jupyter notebook extension during development/debugging?

Issue

I try to write a custom extension for the Jupyter Notebook, as described here: https://towardsdatascience.com/how-to-write-a-jupyter-notebook-extension-a63f9578a38c

I use the Chrome developer tools on Windows7 to inspect and edit the Javascript source code of my custom extension. I hoped that when pressing F5 to update the page, my altered source code would be immediately applied.

However, as stated in the above mentioned article, I have to run

jupyter-contrib-nbextensions.exe install

and restart the server to refresh the notebook extension and to see the effects of my code changes.

Doing so after every little change is quite annoying when playing around and developing/debugging extensions.

=>Is there some sort of development option for automatically updating/reloading the extension?

Solution

As a work around I wrote an extension "Workspace module":

https://github.com/stefaneidelloth/treezjs/tree/master/jupyter_notebook_extension/workspace_module

The purpose of that extension is to import a file "workspace.js" if it exists in the notebook folder. The main.js of my extension is:

    define([
    'require',
    'jquery',
    'base/js/namespace',
    'base/js/events',
    'notebook/js/codecell' 
], function(
    requirejs,
    $,
    Jupyter,
    events,
    codecell   
) {
           
    var load_ipython_extension = function() {  
        if (Jupyter.notebook !== undefined && Jupyter.notebook._fully_loaded) {
            init();                    
        } else {
            console.log("[workspace_module] Waiting for notebook availability")
            events.on("notebook_loaded.Notebook", function() {
                init();                           
            })
        }
    };
    
    function init(){
        
        console.log("[workspace_module] trying to load workspace.js")

        var moduleScript = document.createElement('script');
        moduleScript.setAttribute('type','module'); 
        
        moduleScript.setAttribute('src','workspace.js');    

        document.body.appendChild(moduleScript);
    }


    return {
        load_ipython_extension: load_ipython_extension       
    };

});

The workspace.js redirects to my actual extension:

import './treezjs/src/treezJupyterNotebook.js';

This way, I am able to adapt my code during development without a need to re-execute the install command.

Answered By - Stefan