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.

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.

• javascript
• jquery
• google-chrome-extension

• Can you post something that tells us the order in which the scripts are loaded? In which context do you use this snipplet? – Individumm Commented Mar 23, 2014 at 18:48
• I've added more let me know if you need anything else. – d9120 Commented Mar 23, 2014 at 19:00
• Did you load JQuery before on your site? – Individumm Commented Mar 23, 2014 at 19:05
• Nope The site doesn't have JQuery. – d9120 Commented Mar 23, 2014 at 19:13
• Okay, so the problem is that you cannot use JQuery and you're not wondering why it is not working without it, right? – Individumm Commented Mar 23, 2014 at 19:38

2 Answers 2

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.

As berrberr pointed out, you have to load jquery before your content.js script as follows

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

or you can achieve the same in Pure JS using appendChild().

Also a note: If you are manipulating DOM elements, try injecting your script at document_end