Import external JS scripts in Google Colab html

Question

I am having a hard time importing my custom external JS files to Google Colab. I work with html + js, following this workflow:

1 / imports

from IPython.display import HTML, SVG
from IPython.core.magic import register_cell_magic

2 / mount drive

from google.colab import drive
drive.mount('/content/drive')

3 / html

@register_cell_magic
def dojs(line, src):
  return HTML(f"""
  <canvas id="renderCanvas" touch-action="none" width="1280px" height="720px"></canvas> 
  <script src="content/drive/My Drive/Colab Notebooks/files/testJavascript.js"></script>
  <script>
  {src} 
  </script>
  """)

4 / js

%%dojs
//...trying to use functions from testJavascript.js

Maybe it's really trivial how to do this but I'm new at Colab. I get "Failed to load resource: the server responded with a status of 500 ()".

Answer 1

You need to put your JS file in here:

/usr/local/share/jupyter/nbextensions/google.colab/

Then it can be access through the path

/nbextensions/google.colab/

In your case, you need to copy your js file there:

!cp /content/drive/My\ Drive/Colab\ Notebooks/files/testJavascript.js \
    /usr/local/share/jupyter/nbextensions/google.colab/

Then change dojs() to be

@register_cell_magic
def dojs(line, src):
  return HTML(f"""
  <canvas id="renderCanvas" touch-action="none" width="1280px" height="720px"></canvas> 
  <script src="/nbextensions/google.colab/testJavascript.js"></script>
  <script>
  {src} 
  </script>
  """)