How to load jQuery in Google Chrome Extensions

Question

I can't get my jQuery in my simple google chrome extension to be picked up when I click on the extension icon. I've searched quite a bit for how to do this, but I can't figure out why its not working for me.

I think the jQuery is sound because it works without the onClicked function, but I would prefer for it to only work once the icon has been clicked.

EDIT: I have jquery included in my project as a file called "jquery.js"

My manifest.json looks like this:

{
"name": "test",
"description": "test",
"version": "1.0",
"permissions": [
    "activeTab", 
    "http://*/*", 
    "https://*/*",
    "https://ajax.googleapis.com/"
],


"content_scripts": [
    {
      "matches": ["*://*/"],
      "js": ["scripts/jquery.js", "scripts/script.js", "scripts/background.js"]
    }
  ],



"background": { 
        "scripts": ["scripts/jquery.js","scripts/script.js", "scripts/background.js"]
    },


"browser_action": {
    "default_title": "test",
    "default_icon": "image.png"
},

"manifest_version": 2

}

Background.js like this:

chrome.browserAction.onClicked.addListener(function(tab) {

    chrome.tabs.executeScript(tab.id, {
        file: "scripts/jquery.js",
        allFrames: true,
        runAt: "document_idle"
    });

    chrome.tabs.executeScript(tab.id, {
        file: "scripts/script.js",
        allFrames: true,
        runAt: "document_idle"
    });
});

And script.js like this:

chrome.browserAction.onClicked.addListener(function(tab) {


 alert("hey!");


$('html *:not(script, style, noscript)').each(function() {
$(this).css("background", "pink");

    });

});

I know the function is being called by the browser because the alert gets picked up when the icon is clicked, but none of the jQuery. Any suggestions as to how to fix this/what may be wrong with my code?

Thanks

i'm using it as a file called "jquery.js", i've edited my original post to include that — tweb, Jan 16 '16 at 19:46

score 0 · Answer 1 · answered Jan 18 '16 at 06:35

0

According to the manifest file you provided, background.js and jquery.js are in the same folder, so you should import jquery.js with right path in background.js:

chrome.tabs.executeScript(tab.id, {
    file: "jquery.js",
    allFrames: true,
    runAt: "document_idle"
});

chrome.tabs.executeScript(tab.id, {
    file: "script.js",
    allFrames: true,
    runAt: "document_idle"
});
});

answered Jan 18 '16 at 06:35

Haibara Ai

10,703
2
31
47

hey, thanks for the reply, but this isn't helping my problem of jQuery not loading. My issue is that I can't get the chrome extension to read the jQuery part of my script.js. It reads the JavaScript alert just fine, though. – tweb Jan 19 '16 at 03:01

How to load jQuery in Google Chrome Extensions

1 Answers1

Linked