Not working loaded jquery file in the content_script in chrome extension

Question

I am new to this chrome extension plugin development. I am developing a new new plugin using this chrome extension.

My requirement is load jquery.js file into the content script when it is not having that js file(For Ex: I am checking for jquery.js file,fancybox.js file and if it is not there load these files. )

When i implement this logic in content script it is loading the jquery.js file. After that it is not working in content script . It is showing $(or) jQuery is undefined. For every time it is loading,but not executing in the content script.

Here is the code what i implemented.

document.getElementById('someid').onclick = loadJs();

function loadJS() {
if(tyof jQuery == undefined || tyof jQuery != 'function' )
  {
var jqscript = document.createElement('script');
jqscript.type = 'text/javascript';
jqscript.async = true;
// Src of the script
jqscript.src = "......url to jquery.js file..............";

// Check whether script is loaded or not
        jqscript.onload=function(){
            if ((!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
                    console.log("Script loaded - ");
                                   // It is showing error here
                                        alert(typeof jQuery);

            }
        };

// Get the document header
var head = document.getElementsByTagName('head')[0];
// Add script to header - otherwise IE complains
head.appendChild(jqscript);

}
}

Please suggest on this.

Thanks.

If you want people answering you question you should put some effort in formatting your question and code properly. — Felix Kling, Jan 11 '11 at 13:42
You are calling "content script" many different things there. From your code it looks like you are trying to inject jquery to a parent document from a content script. If you want it to work in a content script as well after that then it won't, as a content script doesn't have access to parent document variables. Can you maybe rewrite your question and separate content script from parent document concepts? (also what's up with that 0% ratio?) — serg, Jan 11 '11 at 20:09

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

Chrome Extensions do not have access to the scripts the web page loads and uses.

Google calls this isolated worlds:

http://code.google.com/chrome/extensions/content_scripts.html

You cannot...

Use variables or functions defined by their extension's pages

Use variables or functions defined by web pages or by other content scripts

So, it doesn't matter what scripts are there. What matters is that you include the scripts you need in your manifest:

"content_scripts": ['jquery.js', 'myScript.js', 'optionsScript.js'],

The order of the list matters so if your script uses jquery then jquery.js should precede it.

Thank you Harry. It is much clearer/cleaner with your edit :) — Darin, Jun 05 '13 at 21:29

Not working loaded jquery file in the content_script in chrome extension

1 Answers1

Linked