jQuery not loading in Google Chrome content_script extension

StackOverflow https://stackoverflow.com/questions/8973005

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.

Was it helpful?

Solution

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

  1. Invalid value for 'content_script[0].matches[0]': Missing scheme seperator.
  2. 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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top