Google Chrome Extension: jQuery doesn't work in background.js

Question

For some reason, jQuery doesn't work in my background.js in my Google Chrome extension.

Suppose my plugin tells me all the images on the page. I verified that it gets to the below method OK, but it stops at the jQuery loop.

First, manifest.json: note I'm including jQuery, the file exists:

{
    "name": "Gallery",
    "version": "0.0.1",
    "manifest_version": 2,
    "description": "Gallery", 
    "browser_action": {
        "default_icon": "G.png" 
    },  
    "background": {
        "persistent": true,
        "scripts": ["jquery-1.11.2.min.js", "background.js"]  
    },     
    "permissions": [
        "tabs", "contextMenus", "http://*/*", "https://*/*"
    ], 
    "content_scripts": [
        {
            "matches": [
                "http://*/*",
                "https://*/*"
            ],
            "css": ["contentstyle.css"],
        "js": ["jquery-1.11.2.min.js", "contentscript.js"]
        }
    ], 
    "icons": {
              "32": "G.png" 
  }
}

background.js uses the jQuery syntax:

chrome.browserAction.onClicked.addListener(scanImages);

function scanImages()
{
    // IT GETS HERE - THIS IS OK
    alert('Clicked plugin button, about to start looping thru IMG...'); 

    // BUT STOPS HERE: JQUERY DOESN'T EXECUTE
    $("img").each(function() {
        alert($(this).prop("src"));
    });

    // ANOTHER JQUERY THAT DOESN'T WORK
    alert('Page title = ' + $(document).find("title").text());
}

An example with code: [JQuery and Chrome Extension](http://stackoverflow.com/a/19477655) For more examples simply google `stackoverflow chrome extension access web page from popup or background page` — wOxxOm, Nov 30 '15 at 23:11
Another example: [Chrome's tabs.executeScript - passing parameters and using libraries?](http://stackoverflow.com/a/4979785) — wOxxOm, Nov 30 '15 at 23:22

Nikhil Sharma · Accepted Answer · 2015-12-01T16:04:36.700

2

To access the DOM of any page you need to use content scripts as explained in the comments. Though there is another way of accessing more than one scripts in your background.js.

Add the jquery-1.11.2.min.js in your background.html file.

....
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="background.js"></script>
....

manifest.json -->

"background": {
    "page": "path/to/background.html",
    "persistent": true
}

You don't have to define the scripts key also, just define your background.html page and the scripts you want in the head section of the html file. I Hope it helps.

edited Dec 01 '15 at 16:04

answered Dec 01 '15 at 04:11

Nikhil Sharma

891
1
8
11

this answer is incorrect. yes it will make jquery work on background, but the actual issue is that the op needs to understand extension arquitecture. the code will never work even with the library included. – Zig Mandel Dec 01 '15 at 14:17
1

Oh Yes, my bad, he is trying to access DOM from the background.js script which don't have access to web page. Yes the code will go in a content script. – Nikhil Sharma Dec 01 '15 at 14:24
@ZigMandel Updated my answer, thanks for pointing out. – Nikhil Sharma Dec 01 '15 at 16:06
Downvoting for using an old mechanism when `scripts` key is just fine, and only answering the actual answer in a vague comment. – Xan Dec 02 '15 at 12:27

Google Chrome Extension: jQuery doesn't work in background.js

1 Answers1