Chrome Extension Error Loading Jquery

Question

I am working on a chrome extension and my content script was throwing an error

$/jQuery not being defined.

So I tried embedding jquery using my manifest file and I downloaded jquery in my extension folder but for whatever reason I am receiving this error --

Denying load of chrome-extension://gfdmfdmhnoenciioooikdifmdkechdbl/jquery-1.10.2.min.map. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

I tried a couple of things with my manifest file but nothing seems to work so now Im trying this and its still giving me the error --

{
    "manifest_version": 2,

    "name":    "My Extension",
    "version": "0.0",
    "offline_enabled": false,

    "content_scripts": [{
        "matches":    ["*://*.sitedomain.com/*"],
        "js": [
                "jquery-1.10.2.min.js", 
                "content.js"
            ],
        "run_at":     "document_end",
        "all_frames": false
    }]
}

I am unable to edit the actual site its to be used on so I can't load jquery the old fashion way in the header, thats why Im trying to load with the extension so my content script will work. Any help is appreciated.

Answer 1

Just remove this line from the top of jquery file

//@ sourceMappingURL=jquery-1.10.2.min.map

If you check the source of Jquery 1.10.2, it has included source map line on the top. I hope you are not using Source Maps. For more details just check these links:

1. http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
2. jQuery's jquery-1.10.2.min.map is triggering a 404 (Not Found)

Alternate approach

1. Download the source map file from jquery downloads page and put jquery-1.10.2.min.map in the extension directory.
2. Download uncompressed source code as well and put in the extension directory.
3. Basically you need three files [SourceMap, Compressed, Uncompressed].
4. Add these map file path and uncompressed file paths to web_accesible resources.