Using jQuery on sites like Gmail or Facebook

Question

I'm trying to login users to websites automatically, given their username and password. To do this I'm using a Chrome extension, where every page would load my content script that will try and find out where the username and password boxes are and then submit.

The content script loads jQuery and to find boxes I do something along these lines:

$("input[type=password]") OR $(".password") OR $("#password")

This usually works but on sites like Facebook or Gmail it fails (even though it shouldn't). I suspect this is because they are already using some internal version of jQuery that doesn't do exactly the same.

How do I fix this? Maybe changing the dollar sign of the jQuery I'm loading to something else would fix this since then it won't conflict with the internal version of jQuery. Is that possible?

Answer 1

jQuery.noConflict()

var $j = jQuery.noConflict();
// Use jQuery via $j(...)
$j(document).ready(function(){
   $j("div").hide();
});

Answer 2

Check http://code.google.com/chrome/extensions/content_scripts.html#execution-environment .

Isolated worlds allow each content script to make changes to its JavaScript environment without worrying about conflicting with the page or with other content scripts. For example, a content script could include JQuery v1 and the page could include JQuery v2, and they wouldn't conflict with each other.

I've used JQuery on gmail and yahoo login page via content script without any problems. In gmail, password id is "Passwd". So, $("#Passwd") should work. Wonder why $("input[type=password]") is not working. It should also work.

Answer 3

A quick glance through Facebook's primary (minified) script seems to suggest that they are using jQuery internally. At the very least there is a function in the script that has the name '$' so, yes using a different name for your particulary jQuery object would be a good idea. It will also prevent this kind of problem in the future.

Jasie's post shows how to change the jQuery variable.

Answer 4

In jQuery 1.5 you could use the new sub() function.

$$ = jQuery.sub();
$$("input[type=password]") ..... your code here ...