$ is undefined when loading jQuery through javascript

Question

I am making a chrome extension that will take come content from the current selected tab. I am injecting a script file into the current page and that script communicates with the script from the extension. With the javascript injected in the page I am trying to load jQuery so it is easier to find the content I want.

(function() {

var script = document.createElement('script');
script.setAttribute("src", "http://code.jquery.com/jquery-latest.min.js")
script.setAttribute("type","text/javascript")


script.onload = script.onreadystatechange = function(){ 

    var port = chrome.runtime.connect({name: "ext"});   
    port.postMessage({ images: getImages(document)});
    port.onMessage.addListener(function(msg) {
    if (msg.request == "message")
        port.postMessage({ message: getText(document)});
    });

};
document.body.appendChild( script ); 

function getText(doc) {
    var textString =  $("div[id*='message'],div[class*='message']").filter(function() {
        return /[0-9]/.test( $(this).text() );
    }).html();
    var text = textString.match(/\d+/);
    return text; 
}

function getImages(doc){
    var result = "";
    var images = document.getElementsByTagName("IMG");
    for(var i = 0; i < images.length; i++){
        if(images[i].height > 200 && images[i].width > 200){
            result = result + images[i].src + ",";
        }
    }
    return result;
}

})();

The jQuery library gets loaded (I checked the 'Network' tab in the Developer tools) and the code gets into the getText() function, but '$' is undefined.

EDIT:

script.onload = script.onreadystatechange = ...

is the code that is waiting for the jQuery to be loaded. And it is getting in there. But when it gets to

var textString =  $("div[id*='message'],div[class*='message']")

'$' is undefined

It does not look like you are doing a proper jQuery document ready. Here is a link with examples showing 5 different ways to do document ready - (http://www.sitepoint.com/types-document-ready/) — Troy, May 07 '15 at 19:51
@Troy it's not meant to be a jQuery document ready, it's a self-executing anonymous function http://esbueno.noahstokes.com/post/77292606977/self-executing-anonymous-functions-or-how-to-write — CupawnTae, May 07 '15 at 19:55
@SLaks `script.onload = script.onreadystatechange = ...` is waiting for it to load, no? — CupawnTae, May 07 '15 at 19:56
I think this is somehow more to do with the Chrome extension than purely adding a jQuery script tag. Running this in a jsfiddle works fine for me - $ is set to the jQuery object at the start of the onload function.. — Rhumborl, May 07 '15 at 19:56
@Troy but he's loading jQuery dynamically in the script, so he couldn't use jQuery to run the script... There's a hole in that bucket! :-) — CupawnTae, May 07 '15 at 20:02
@CupawnTae - Got it. Was confused when I saw at the bottom of the post that '$' is undefined. I deleted my comment when I saw the dynamic loading for myself. You were too quick and saw it and replied! :-) — Troy, May 07 '15 at 20:02
if you plan to use this on multiple pages/sites should also be checking that jQuery isn't already there `if(typeof jQuery !=='function')` — charlietfl, May 07 '15 at 20:06
Not familiar enough with chrome extensions, but don't you need to load jQuery into both the original document and the extension? Or are you including it statically in the extension? (Is `document` the tab or the extension?) — CupawnTae, May 07 '15 at 20:07
Side note: [You shouldn't be using jquery-latest.min.js anymore](http://blog.jquery.com/2014/07/03/dont-use-jquery-latest-js/). It is not the latest version, it is frozen at version 1.11.1, which is [over a year old](http://blog.jquery.com/2014/05/01/jquery-1-11-1-and-2-1-1-released/). — Useless Code, May 08 '15 at 07:50
@UselessCode even with the latest version, it still doesn't work. — fitz, May 08 '15 at 08:46
@CupawnTae I don't have to load jQuery in the extension. It is enough just to load it in page. — fitz, May 08 '15 at 08:50
@fitz that doesn't appear to be the case - in particular see the the chrome developer documentation I linked to in my answer. "For example, a content script could include JQuery v1 and the page could include JQuery v2" — CupawnTae, May 08 '15 at 13:13

score 0 · Answer 1 · edited May 23 '17 at 11:58

0

Looks like this is a duplicate of Load jQuery with Javascript and use jQuery. It appears that there is an accepted answer in there that meets your needs.

Still new to posting on stackoverflow or I would have tried to mark it as a duplicate which I have seen in other posts.

edited May 23 '17 at 11:58

Community

1
1

answered May 07 '15 at 20:07

Troy

146
4

score 0 · Accepted Answer · edited May 23 '17 at 10:28

0

You are loading jQuery into the main page, but not into your extension's content script.

Your getText() function is running in your content script, not in the page's script, so it's in an "isolated world": https://developer.chrome.com/extensions/content_scripts#execution-environment

Therefore it doesn't have access to the window object of your page, so $ (which is window.$) is not accessible. See also Can the window object be modified from a Chrome extension?

So you'll need to also load jQuery in your extension. See How to use jQuery in chrome extension? and How to use jQuery in Chrome extensions contentscript without conflict and Load JQuery into a Chrome extension?

edited May 23 '17 at 10:28

Community

1
1

answered May 08 '15 at 09:19

CupawnTae

14,192
3
29
60

CupawnTae, thanks for your help. I read about the script not running in the page environment from the link you provided. I actually changed my code so that when I inject my script, I inject jQuery too and that seems to be working. It does not say anymore that '$ is udnefined'. Now, it is saying that textString is undefined here: 'var text = textString.match(/\d+/);'. But that's another problem, for another time. but thanks so much for the links you provided. – fitz May 16 '15 at 14:09

$ is undefined when loading jQuery through javascript

2 Answers2