Zero Soup

 

Dynamic Javascript source includes in XUL Applications and Firefox Extenstions

Friday, February 29, 2008

So you want to load a snippet of JavaScript code dynamically from the context of a script executing in your FireFox Application.

The cleanest way to achieve this is to use the rather little known mozIJSSubScriptLoader interface. You can see the documentation for the interface here.

The beauty of this method is that you can load the snippet or code block of JavaScript into a defined scope. Neat! no messy globals or eval() calls.

For example:
Lets say that you have a file test.js that can be accessed at the Chrome path chrome://yourextensionname/content/test.js and it contains the following:

function Foo () {
this.baz = "deep value";
}

Foo.protoype = {
readBaz : function () {
   alert(this.baz);
}
}

Lets say you want to load this test.js file into your application. I suggest creating a function that can load this code into a defined scope as below:

function includeJS(chromeFilePath, NameSpaceContainer) {
var scriptLoader = Components.classes["@mozilla.org/moz/jssubscript-loader;1"]
  .getService(Components.interfaces.mozIJSSubScriptLoader);
scriptLoader.loadSubScript(chromeFilePath, NameSpaceContainer);
}

You could then use this includeJS() as show below:

var baseURI = "chrome://yourextensionname/";
var MyApplicationNameSpace = {};

try {
 includeJS(baseURI+"content/test.js",MyApplicationNameSpace);
} catch (e) {
 alert("Could not load Namespace: Encountered excpetion "+e);
}

var myFooObj = new MyApplicationNameSpace.Foo();
myFooObj.readBaz();    // will alert "deep value"

As great as this method of loading Javascript is, there are other ways you could consider. You could for instance use Mozilla's io-service coupled with an eval() as below:

function includeJS(chromeFilePath, NameSpaceContainer) {

var IOService = Components.classes["@mozilla.org/network/io-service;1"]
  .getService(Components.interfaces.nsIIOService);
var IOStream = Components.classes["@mozilla.org/scriptableinputstream;1"]
  .getService(Components.interfaces.nsIScriptableInputStream);
var data = IOService.newChannel(chromeFilePath, null, null).open();
IOStream.init(data);
var dataStr = IOStream.read(data.available());
IOStream.close();
data.close();
eval(dataStr, NameSpaceContainer);
}

The problem with both these two methods is that they break when you try to load a Javascript source file which contains special Unicode characters. As a work around for this I suggest using a
technique borrowed from buzzword technology AJAX ;-) , and do a XmlHttpRequest call to a Chrome URL.

For example you could use the following code as replacement to the two previous includeJS() methods:

function includeJS(chromeFilePath, NameSpaceContainer) {
 var httpRequest = new XMLHttpRequest();
 httpRequest.onload = function() {
    eval(this.responseText,NameSpaceContainer);
 };
 httpRequest.open("GET",chromeFilePath, true);
 httpRequest.send(null);
}

This seems to work even for source files that contain funky Unicode characters. You could replace the Chrome URl with file paths relative to your system, but I'd recommend always using a Chrome URL where possible. Its a better, more file system agnostic approach.

Labels: Javascript, Javascript quality, Mozilla, XUL