[IPython-dev] How to make a notebook extension

Doug Blank doug.blank at gmail.com
Sun Jul 27 13:24:46 EDT 2014

Ok, I think I have this figured out, and if the following is right, and
best practice, I'd be glad to put in the docs.

First, write your JavaScript programs. There should be a main JS file. The
JavaScript file should generally take the form:

define( function () {
    var load_ipython_extension = function () {

    return {
        load_ipython_extension : load_ipython_extension,

This function will return a JS object with "load_ipython_extension" defined
to be a function that is called when loading the extension.

Name this JS file with a unique name that won't collide with other
extensions. For example, use "jones-feature-name.js" where "jones" is the
name of your group, and "feature-name" is the name of what the feature you
are adding/enhancing.

If there is only the single .js file, then you can easily make a download
for it.

If more than one file is needed for your extension (additional libraries,
css, etc) it is advised to make a zip file for easy install. The zip file
should have your main JS file in the root.

To install the zip or js file, use:

ipython install-nbextension URL

The files are saved to $(ipython locale)/nbextensions/

At this point, you can use your extension by interactively loading it in a
notebook (regardless of kernel, as long as your kernel supports running
javascript); in the native kernel, that is:


Your feature is now active, and will be loaded automatically each time you
open this notebook if you leave this cell in the notebook. [Is that right?
How does it work?]

What if you have an associated CSS file? It is not loaded automatically.

Add this to your defined JS object:

    var load_css = function () {
        var link = document.createElement("link");
        link.type = "text/css";
        link.rel = "stylesheet";
        link.href = require.toUrl("/nbextensions/jones-feature-name.css");

and call it in load_ipython_extension.

Finally, if you want to load your extension automatically (or need to have
your script loaded earlier to handle opening functions) then you can add
this single line to your $(ipython


There are more options (having things execute on notebook open, adding
toolbar buttons, menu items), and those are explain here ...

How does that sound? Did I miss anything?

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.python.org/pipermail/ipython-dev/attachments/20140727/3859348d/attachment.html>

More information about the IPython-dev mailing list