Question

I’m using the Firefox Add-On SDK to port a Chrome extension to Firefox. In Chrome, it’s trivial to load third-party libraries like Underscore or Backbone. In my particular case, I’m using jQuery, Underscore and Backbone to define models that communicate with cross-domain REST APIs.

It’s unclear to me how you might do something similar in Firefox. From what I can see main.js corresponds directly to Chrome’s background pages, but it doesn’t appear there’s a way to load js files.

Am I missing something?

Answer 1

Add-on SDK supports CommonJS modules sysem, same modules that are also used by nodejs
https://github.com/mozilla/addon-sdk/tree/master/app-extension

Underscore has a support for commonjs module format & there for can be loaded easily
https://github.com/documentcloud/underscore/blob/master/underscore.js#L54-L65

All you need is drop underscore in next to main.js and loaded it as follows:

var _ = require("./underscore")

I do believe backbone can also be loaded in a similar way as people have being using it
on nodejs.

It’s won’t work for the jQuery though, that’s because context where add-on SDK modules
run is different from typical web page context with DOM, which is what jQuery is designed
to work with.

Now if you want to do cross domain requests there SDK comes with a module to do that:
https://addons.mozilla.org/en-US/developers/docs/sdk/latest/packages/addon-kit/request.html
There is also another low level XHR module, that you could use instead:
https://addons.mozilla.org/en-US/developers/docs/sdk/latest/packages/api-utils/xhr.html

So if you just want to write models and talk to REST API it should be pretty trivial, I’m
not sure what’s the role of jQuery in your use case. It implies DOM and UI you want to
display. If so there is several modules in SDK that would let you add custom UI for the
firefox and you can probably find useful tutorial on that subject:
https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/index.html