<div dir="ltr">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.<div><br></div><div>First, write your JavaScript programs. There should be a main JS file. The JavaScript file should generally take the form:</div>
<div><br></div><div>```</div><div><div>define( function () {</div></div><div>    var load_ipython_extension = function () {<br></div><div>        ...</div><div>    };</div><div><br></div><div><div>    return {</div><div>        load_ipython_extension : load_ipython_extension,</div>
<div>    };</div><div>});</div></div><div>```</div><div><br></div><div>This function will return a JS object with "load_ipython_extension" defined to be a function that is called when loading the extension.</div>
<div><br></div><div>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.</div>
<div><br></div><div>If there is only the single .js file, then you can easily make a download for it. </div><div><br></div><div>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.</div>
<div><br></div><div>To install the zip or js file, use:</div><div><br></div><div>ipython install-nbextension URL</div><div><br></div><div>The files are saved to $(ipython locale)/nbextensions/</div><div><br></div><div>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:</div>
<div><br></div><div>```</div><div>%%javascript</div><div>IPython.load_extensions("jones-feature-name")</div><div>```</div><div><br></div><div>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?]</div>
<div><br></div><div>What if you have an associated CSS file? It is not loaded automatically.</div><div><br></div><div>Add this to your defined JS object:</div><div><br></div><div>```</div><div><div>    var load_css = function () {</div>
<div>        var link = document.createElement("link");</div><div>        link.type = "text/css";</div><div>        link.rel = "stylesheet";</div><div>        link.href = require.toUrl("/nbextensions/jones-feature-name.css");</div>
<div>        console.log(link);</div><div>        document.getElementsByTagName("head")[0].appendChild(link);</div><div>    };</div></div><div>```</div><div><br></div><div>and call it in load_ipython_extension. </div>
<div><br></div><div>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 locale)/profile_XXX/static/custom/custom.js:</div>
<div><br></div><div><div>IPython.load_extensions("jones-feature-name");</div></div><div><br></div><div>There are more options (having things execute on notebook open, adding toolbar buttons, menu items), and those are explain here ...</div>
<div><br></div><div>How does that sound? Did I miss anything?</div><div><br></div><div>-Doug</div><div><br></div></div>