ansaurus

Question

How to use jQuery in Firefox Extension

Answer 1

A:

It may be bad practice, but have you considered including it inline?

Eric Wendelin 2009-01-29 17:04:05

I didn't try this but I don't think it is different from including it in the script tag.I will try anyway

Marwan Aouida 2009-01-30 18:39:13

Answer 2

+2 A:

I think this is what Eric was saying, but you can load Javascript from the URL directly.

javascript:var%20s=document.createElement('script');s.setAttribute('src','http://YOURJAVASCRIPTFILE.js');document.getElementsByTagName('body')[0].appendChild(s);void(s);

Im assuming you want your extension to load JQuery so you can manipulate the page elements easily? My company's labs has something that does this using Javascript directly here: http://parkerfox.co.uk/labs/pixelperfect

ThePaddedCell 2009-01-30 10:15:11

I know how to inject the library to the DOM of the page, but the problem is that I can't inject all the function of my extension to the DOM Whenever a page is loaded. that is why I want all the function to be on the extension folder

Marwan Aouida 2009-01-30 18:39:55

Answer 3

+14 A:

I use the following example.xul:

<?xml version="1.0"?>
<overlay id="example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
<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);

})();

sunsean 2009-01-30 19:53:29

that doesn't work also,please if you know any extension that use jQuery give me its name to check the code.

Marwan Aouida 2009-01-30 20:48:43

I've added a more complete example. Check and see if that works for you.

sunsean 2009-02-02 22:02:07

This method is absolutely inappropriate as when you load jquery from overflow then the 2 objects jQuery and $ are defined for the entire window and might cause conflict with other extensions. Though you can use jquery.noconflict and function scope to hide it but overlays can be loaded asynchronously. There is still a possibility that another firefox's extensions has been already defined and used jQuery and $ on the window before I can use jquery.noconflict

Meher Ranjan 2010-10-25 13:27:08

Answer 4

A:

hi -

i tried out sunsean's approach:

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

this works great.

i'm now fiddling with extending to jqueryui, so far i'm not getting it.

sunsean (or whoever)... could you perhaps tell me what's wrong with simply adding the line:

$.ui = jQuery.ui;

thanks!

martin.

2009-04-05 18:49:29

Don't add "hi" and "bye" headers and footers to your messages! If you have related but different problems such as this, write it in a new question (press "Ask Question") and provide a link back to this one. Or you could directly link to sunsean's answer by copying the URL of the "link" button at the end of that answer.

Jenko 2009-07-03 12:37:44

Answer 5

+1 A:

Have you tried adding a node/element to the DOM using jQuery. I tried adding a div to the DOM and the code stopped working. "Error Console" shows this error:

Error: div is null Source File: chrome://example/content/jquery-1.3.2.js Line: 940

Code was: var body = $(content.document.getElementsByTagName('body')[0]); var t = $("<div>test</div>"); body.prepend(t);

Any suggestions?

Thanks, Jai

Jai 2009-11-15 18:28:51

still an issue with 1.4.2 but with line number 4481

Paul Tarjan 2010-04-13 10:16:26

ansaurus

tags:

views:

answers:

How to use jQuery in Firefox Extension

related questions