jQuery not loading in Google Chrome content_script extension

Question

I can't manage to load jQuery in a Google Chrome userscript.

This is how my manifest.json looks:

{
    //...
    "content_scripts" : [{
        "js" : ["http://code.jquery.com/jquery-1.7.1.js", "code.js"],
        //...
    }],
    //...
}

But in code.js, $ is undefined.

code.js otherwise works, and actually I have a bookmarklet working (that uses the site's version of jQuery).

I've tried minified and unminified versions of jQuery, hosted or local.

I've also tried embedding a minified jQuery at the top of my code.js, but if I do that the code does not even run, actually the whole file does not run (even an alert before the chunk of minified jQuery).

If you want to look at it, here it is.

I definitely would use a local file, but if you've tried that and it works then I'm at a loss. This is a copy from a manifest file I have in a working extension... "content_scripts": [{ "js": ["jquery-1.7.min.js"], }] — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Jan 23, 2012 at 14:26
@Archer It did work, but only after uninstalling and reinstalling the (developer mode) extension. It's very weird, but at least I know I'll do that if I ever face the same issue :) — Camilo Martin
– Camilo Martin, Commented Jan 23, 2012 at 15:43

Elia Weiss · Accepted Answer · 2017-08-07 06:57:11Z

4

From the manifest.json provided in your zip, Chrome sends me two errors when unpacking.

Invalid value for 'content_script[0].matches[0]': Missing scheme seperator.

Could not load javascript 'http://code.jquery.com/jquery-1.7.1.js' for content script.

The first one says your matches statement isn't correctly formatted. After your * you should add :// like so:

"matches" : ["*://my.deviantart.com/messages/*"]

The second one is about you trying to load the jquery from an external recource. If you change the path to your local file it should work.

"js" : ["jquery.js", "code.js"],

When I console.log($) in your code.js file after these adjustments jquery seems to work just fine.

EDIT: Note that you need to add to your html (in <head> section) the following:

<script src='./jquery.js'></script>

edited Aug 7, 2017 at 6:57

Elia Weiss

10.3k13 gold badges82 silver badges122 bronze badges

answered Jan 23, 2012 at 14:40

Humble Hedgehog

2,0651 gold badge12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Camilo Martin Over a year ago

I'll try it again with a local resource, altough the code.js script does run in the intended URL.

Camilo Martin Over a year ago

Ok, now it does work (after uninstalling and reinstalling the extension). Weird thing to fix it, but I'm glad it's over. Now I have other bizarre issues, but that's for another question I guess. As you said, those two things were wrong, and the script does load jQuery.

Mohammad Hani Over a year ago

Hey Camilo, Can you please share your solution because I'm also facing the same issue for more than 3 weeks but I can't load script from a remote server.

Collectives™ on Stack Overflow

jQuery not loading in Google Chrome content_script extension

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related