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!

One thought on “Injecting jQuery into your Firefox Extension

  1. I tried that method and it does not work for me I have chrome extension I want to change to firefox extension
    so far, have this widget
    // This is an active module of the iharper (35) Add-on
    exports.main = function() {};
    var tabs = require(“tabs”);
    var widget = require(“widget”);
    var data = require(“self”).data;
    var data = require(“sdk/self”).data;

    widget.Widget({
    id: “mozilla-icon”,
    label: “My Mozilla Widget”,
    contentURL: data.url(“zmc-icon.png”),
    onClick: function() {
    tabs.open(data.url(“zmc.html”));
    }
    });
    how on earth do I get the jquery.min.js in this addon

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.