4

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?

Stefan
  • 10,010
  • 7
  • 61
  • 117

1 Answers1

1

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.

Stefan
  • 10,010
  • 7
  • 61
  • 117
  • Hey @Stefan does this work for when your _python_ code updates as well? Thanks! – yifanwu Jul 22 '19 at 22:44
  • I use it for a JavaScript based client extension. If you define/update some python code on the client and execute it using the notebook API, that python code should work fine. I did not work with server-side python code for notebook extensions if that is your question. – Stefan Jul 23 '19 at 07:04
  • Yeah I was asking about server-side python. Thanks for the clarification. – yifanwu Jul 23 '19 at 19:48
  • Now there is also following "official" extension, that might be more comfortable: https://github.com/jupyterlab/jupyterlab-plugin-playground – Stefan Oct 25 '21 at 13:17