Using D3 and MathJax in a Chrome Packaged App

This is a short note on a quick morning project, wrapping a web app within a Chrome packaged app. The app itself is for exploring the lognormal distribution, and is described here.

The app is freshly on the Chrome app store here.

Woohoo - a D3/MathJax visualization wrapped in a Chrome packaged app
Available on the Chrome App Store here

The app uses D3 and MathJax. Mathjax is a cool mathematics typesetting javascript library that creates beautifully formatted formulas.

In the web app, I had referenced the cdn for MathJax, but you can't do this in a Chrome packaged app. Instead, you have to include all of your needed libraries with the app. This is a bit of a pain with MathJax, since the default download for MathJax is huge (~120MB!). Note that getting MathJax is easy on a Mac/*nix via bower: just type bower install MathJax at the commandline.

I roughly followed this post on the MathJax guthub wiki to help decide which things I could definitely strip out of the MathJax directory. Then I checked via ChromeDev tools to see what it was really being used to strip out other stuff. It boiled down to keeping about 3MB of files, and I'm sure another pass or two would get it down further.

As it is needed to run D3 in a packaged app anyway, you need to configure your manifest to run the main page in a sandbox; here's my full manifest.json:

{
 "manifest_version": 2,
 "name": "Exploring the Lognormal Distribution",
  "description": "This is an educational interactive visualization for learning more about the lognormal distribution.",
  "version": "0.1",
 "sandbox": {
   "pages": ["index.html"]
 },
  "app": {
      "background": {
 "scripts": ["background.js"]
      }
  }
}
Contents of the manifest.json file for the Chrome packaged app
and here's the contents of my background.js file:
  chrome.app.runtime.onLaunched.addListener(function() {
    chrome.app.window.create('index.html', {
      'bounds': {
        'width': 1280,
        'height': 800
      }
    });
  });
Contents of the background.js file for the Chrome packaged app

I used those particular dimensions of 1280x800 because that's one of the sizes for the required screenshot, and this simplifies creating it for the purpose of this little project. Google requires an icon and small image as well before you can publish your app.

One of the next steps is to now wrap this packaged app inside a PhoneGap app so that it can run on mobile devices. I have done this once before for another web app, as described here. This will certainly force the issue on some design tweaks.

Popular Posts