Injecting jQuery into your Firefox Extension

Took me all morning, but I finally figured out the syntax for including jQuery (local file) in your Firefox extension.

The background is, I’m making a firefox extension for work and I need to be able to update the html on a page. Loading jQuery in an extension is normal just as simple as a another data include, but with contentScripts you load files to be injected directly into a users page on their current tab.

It’s simple enough, make sure you download a copy of jquery and store it in your “data” folder of your addon. Then in main.js it goes something like this:

var widgets = require("widget");
var tabs = require("tabs");
var self = require('self');

var widget = widgets.Widget({
    id: 'modify-page',
    label: 'Modifies a Page',
    contentURL: 'http://www.mozilla.org/favicon.ico',
    onClick: function() {
        tabs.activeTab.attach({
            contentScriptFile: [self.data.url('jquery.js'), self.data.url('app.js')]
        });
    }
});

The key here is loading items in array form into “contentScriptFile”. It’s not obvious, nor is it intuitive but that’s the way it was built… Hurray Firefox!