<div dir="ltr"><div>Follow-ups (suggestions, options, overall betterness) available in the associated issue tracker:</div><div><br></div><a href="https://github.com/ipython/ipython/issues/6229">https://github.com/ipython/ipython/issues/6229</a><br>
<div><br></div><div>Hopefully will lead to good documentation.</div><div><br></div><div>-Doug</div></div><div class="gmail_extra"><br><br><div class="gmail_quote">On Sun, Jul 27, 2014 at 1:24 PM, Doug Blank <span dir="ltr"><<a href="mailto:doug.blank@gmail.com" target="_blank">doug.blank@gmail.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><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><span class="HOEnZb"><font color="#888888"><div><br></div><div>-Doug</div><div><br></div></font></span></div>
</blockquote></div><br></div>