How to Use Jquery in Firefox Extension

How to use jQuery in Firefox Extension

I use the following example.xul:

<?xml version="1.0"?>
<overlay id="example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<head></head>
<script type="application/x-javascript" src="jquery.js"></script>
<script type="application/x-javascript" src="example.js"></script>
</overlay>

And here is an example.js

(function() {
    jQuery.noConflict();
    $ = function(selector,context) { 
        return new jQuery.fn.init(selector,context||example.doc); 
    };
    $.fn = $.prototype = jQuery.fn;

    example = new function(){};
    example.log = function() { 
        Firebug.Console.logFormatted(arguments,null,"log"); 
    };
    example.run = function(doc,aEvent) {
        // Check for website
        if (!doc.location.href.match(/^http:\/\/(.*\.)?stackoverflow\.com(\/.*)?$/i))  
            return;

        // Check if already loaded
        if (doc.getElementById("plugin-example")) return;

        // Setup
        this.win = aEvent.target.defaultView.wrappedJSObject;
        this.doc = doc;

        // Hello World
        this.main = main = $('<div id="plugin-example">').appendTo(doc.body).html('Example Loaded!');
        main.css({ 
            background:'#FFF',color:'#000',position:'absolute',top:0,left:0,padding:8
        });
        main.html(main.html() + ' - jQuery <b>' + $.fn.jquery + '</b>');
    };

    // Bind Plugin
    var delay = function(aEvent) { 
        var doc = aEvent.originalTarget; setTimeout(function() { 
            example.run(doc,aEvent); 
        }, 1); 
     };
    var load = function() { 
        gBrowser.addEventListener("DOMContentLoaded", delay, true); 
    };
    window.addEventListener("pageshow", load, false);

})();

adding jquery to firefox extension

but I need to use jquery for ajax

No, ajax requests can actually be issued without jquery. After all jquery just provides convenience wrappers around standard browser APIs.

The XMLHttpRequest constuctor is available in content scripts and as net/xhr module in the addon main.

For transforming the result into HTML, mozilla does support xhr.responseType = "document" which turns the response into a html document whose nodes can be inserted into the target document.

How do I use jQuery in firefox addon?

When you include other libraries like prototype, mootools, YUI etc, The problem comes when one or more of those libraries are used with jQuery as they also use $() as their global function and to define variables. This situation creates conflict as $() is used by jQuery and other library as their global function. To overcome from such situations, jQuery has introduced jQuery.noConflict().

So you can basically do

 var $j = jQuery.noConflict();

Now you can write jQuery command using $j() instead of $()

As for the firefox plugin, I'm assuming you are referring to firebug. The area where you type in your jquery is called console. You can read more at http://getfirebug.com/commandline

Sample Image

Using jQuery in a firefox extension

Starting with Firefox 3, chrome resources can no longer be referenced from within <img>, <script>, or other elements contained in, or added to, content that was loaded from an untrusted source. This restriction applies to both elements defined by the untrusted source and to elements added by trusted extensions. If such references need to be explicitly allowed, set the contentaccessible flag to yes to obtain the behaviour found in older versions of Firefox.

jQuery in Firefox extension

Write this to your *.xul file to include jQuery.

<script type="application/x-javascript" src="toolbar.js"></script>

How to use jQuery in Firefox plugins?

In your overlay.xul file, just include it as if you were including any other Javascript file:

<script type="application/x-javascript" src="chrome://my-firefox-extension/content/path/to/jquery.js" />

JQuery on Web Extensions APIs

According to this page: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_Security_Policy, inline javascript will not be executed, try putting your Javascript in a file, and linking it in your html, like what you did with jQuery.

Placing jQuery inside your manifest under background scripts doesn't work either, as the background page and the browser action page is separated.

This also extend to any Javascript placed inside strings like

<button onclick="test()">example</button>

test() will not run when the button is clicked.

How to Use Jquery in Firefox Extension