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.

Can you post something that tells us the order in which the scripts are loaded? In which context do you use this snipplet? — Individumm
– Individumm, Commented Mar 23, 2014 at 18:48
Okay, so the problem is that you cannot use JQuery and you're not wondering why it is not working without it, right? — Individumm
– Individumm, Commented Mar 23, 2014 at 19:38

berrberr · Accepted Answer · 2014-03-24 13:52:03Z

3

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.

answered Mar 24, 2014 at 13:52

berrberr

1,96011 silver badges16 bronze badges

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

1 Comment

Gobi Dasu Over a year ago

I'm facing this issue even with them in the right order: Uncaught TypeError: Cannot read property 'ready' of undefined

raghav · Accepted Answer · 2014-03-24 14:20:05Z

2

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

answered Mar 24, 2014 at 14:20

raghav

2853 silver badges12 bronze badges

Collectives™ on Stack Overflow

Using JQuery in a content script

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related