Using JQuery in a content script

Question

I am trying to use JQuery in my content script but The chrome console spits this out "Uncaught ReferenceError: $ is not defined ". I can successfully use JQuery in my background script so I'm not exactly sure whats up.

Here's the manifest file:

{
    "name": "Something",
    "version": "1.0",
    "description": "SOmething",
    "background": {
        "scripts": ["background.js", "jquery.js"],
        "persistent": true
    },
    "browser_action": {
        "default_icon": "favicon.png",
        "default_popup": "popup.html"
    },
    "permissions": [
        "declarativeContent",
        "http://localhost/",
        "http://*/*",
        "https://localhost/",
        "https://*/*",
        "tabs"
    ],
    "icons": {
        "48": "icon-48p.png"
    },

    "content_scripts": [{
        "matches": [
            "http://*/*",
            "https://*/*"
        ],
        "js": ["content.js", "jquery.js"]
    }],
    "web_accessible_resources": ["button.PNG", "jquery.js"],
    "manifest_version": 2
}

Here's the content script:

var btn = document.createElement("input");
btn.id = "btn";
btn.type = "image";
btn.setAttribute("src", chrome.extension.getURL("button.PNG"));
btn.onclick = function() {
    alert("Currently under development");
};
btn.className = "";


if (window.location.href.indexOf("mysite") > -1) {
    $('#pageContainer').append('<ol><li>CATS</li><ol>'); //Fails here

}


if (window.location.href.indexOf("myother") > -1) {
    document.getElementById("maindiv").appendChild(btn); //works
}

Edit: JQuery is in the project and it does work in background.js. The question is how do I get it working within my content script? I've specified in the manifest that I want jquery injected along with content.js.

Answer 1

Make jQuery the first content script listed in thecontent_scripts -> js array. Like:

"content_scripts": [{
    "matches": [
        "http://*/*",
        "https://*/*"
    ],
    "js": ["jquery.js", "content.js"]
}],

Your content script is trying to access jquery before it's loaded. The way your manifest is set up now, jQuery still should be loaded however. To verify this, type something like window.jQuery into the console on the content script page and make sure that it is defined.