How can I use jquery in a chrome extension content script when an older version is already on the page

Question

I'm writing a chrome extension that fiddles around with the layout of a page. I want to use the latest version of jQuery to do this.

The page in question already includes version 1.4.4 of jQuery as part of one of their scripts.

If I include the newer version of jQuery, the page hangs. How can I include the newest version of jQuery so that it is only available to my content script, and doesn't affect scripts already on the page?

Answer 1

If you inject your jquery as a content script it will be sandboxed, you won't be having any conflicts no matter what a parent page is using.

Answer 2

You can essentially namespace differing jQuery versions by using its No Conflict mode and executing your code in a closure. For instance:

<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    jq162 = jQuery.noConflict(true);
    (function ($) {
        $(function () {
            // Your document ready code here
        });
    })(jq162);
</script>

Please note this declaration makes jq162 available to the global scope so it can be reused elsewhere. If you'd prefer to scope the instance of jQuery locally, make it a var.