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?

score 3 · Accepted Answer · answered Feb 06 '11 at 12:07

3

jQuery.noConflict()

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

answered Feb 06 '11 at 12:07

atp

30,132
47
125
187

score 1 · Answer 2 · answered Feb 06 '11 at 12:19

1

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.

answered Feb 06 '11 at 12:19

Manish

1,985
2
20
29

This is because I was using jQuery from the javascript console. I initially thought it would load the files for the whole page and not just for the content script – Noam Feb 06 '11 at 12:23
1

I guess gmail login doesn't use JQuery. Using $() on JavaScript console uses built-in browser function that replaces it with document.getElementById(). – Manish Feb 06 '11 at 12:31
That's not built-in browser function, but something the website defined itself (though essentially you're right). – Marcel Korpel Feb 06 '11 at 12:45
@Marcel: Thanks for the info. I thought it was built in Chrome. – Manish Feb 06 '11 at 12:51

score 0 · Answer 3 · answered Feb 06 '11 at 12:09

0

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.

answered Feb 06 '11 at 12:09

Aatch

1,846
10
19

No, they apparently don't use jQuery there, the `$` function is just a minimal shortened version of `document.getElementById`. – Marcel Korpel Feb 06 '11 at 12:11
Ok, well all I did was a text search for '$(' so I'm not surprised. Still it would still affect it. – Aatch Feb 06 '11 at 12:13

score 0 · Answer 4 · answered Feb 06 '11 at 12:19

0

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

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

answered Feb 06 '11 at 12:19

xzyfer

13,937
5
35
46

Using jQuery on sites like Gmail or Facebook

4 Answers4