How to use jquery in google chrome extension page action background.js?

Question

I'm developing a "page action" google chrome extension. My manifest has:

...
"background": { "scripts": ["background.js"] },
...

In my background.js file I have:

function doSomething() {
     alert("I was clicked!");
}

chrome.pageAction.onClicked.addListener(doSomething);

This works. Now in my doSomething function I want to read some data on the current page. It will be a lot easier for me to use jquery to read the data so I can easily target the exact data I want. How can I incorporate jquery (preferrably served from google's CDN) so that it's accessible to my doSomething function?

score 72 · Answer 1 · edited Apr 15 '16 at 17:53

72

The "background" specification in manifest.json should specify jquery.js so that it is loaded before background.js:

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

This should do the job.
Remember the js files are loaded in the order they are specified.

test if jquery is loaded.

in background.js

if (jQuery) {  
    // jQuery loaded
} else {
    // jQuery not loaded
}

edited Apr 15 '16 at 17:53

PMorganCA

730
6
24

answered Jan 02 '13 at 12:39

Jaydeep Solanki

2,895
5
36
50

http://stackoverflow.com/questions/27542186/connect-external-js-lib-to-chrome-event-page Can you please tell me what I doing wrong? – Deadcow Dec 18 '14 at 08:39
2

this tells you how to get JQuery loaded with your background script, but note the other answers... you can't access the DOM of the active web page. You can access $(document), but that's the background HTML page. – PMorganCA Apr 15 '16 at 20:14
When I used your test in my content_script (not background), I would get an exception saying that jQuery isn't defined. I had to change to `if (typeof jQuery !== 'undefined')` to actually check if jQuery was defined. – Chip Thien Dec 28 '16 at 19:29
why isn't your answer on the top? – Anwar Hossain Aug 10 '19 at 16:20
the funny thing is i also used jquery inside background.js but seems $.get() not working as expected as content.js – gumuruh Sep 17 '19 at 07:30
@gumuruh of course their location are different, background is generated in chrome locally, while content is executed in current webpage – Taufik Nur Rahmanda Jul 25 '20 at 03:36

score 10 · Answer 2 · edited May 23 '17 at 12:09

I don't know if this is the ideal way, but I was able to get it working using help from this question: Google Chrome Extensions: How to include jQuery in programatically injected content script?.

Apparently a "background" javascript page can't access the DOM of a webpage in the browser so loading jquery doesn't really make sense in the background script. Instead I have the background script programmatically inject the jQuery library and then the content script into the current webpage. The content script (unlike the background script) can access info on the webpage.

background.js:

function handleClick(tab) {
    chrome.tabs.executeScript(null, { file: "jquery-1.8.2.min.js" }, function() {
        chrome.tabs.executeScript(null, { file: "content.js" });
    });
}

chrome.pageAction.onClicked.addListener(handleClick);

content.js

var text = jQuery('h1').text();
alert('inside content! ' + text);

you can still use JQuery to do Ajax calls etc. No necesarily usless to use JQuery on background.js — nullwriter, May 07 '15 at 19:34

score 1 · Answer 3 · answered Oct 25 '12 at 09:03

1

My understanding is that it's not necessary to use background.js. You can have your code in popup.js instead. Therefore you won't need to include anything in the manifest file either.

I'd suggest to include the jQuery JS and your popup.js in your popup.html:

<script src="/js/jquery-1.8.1.min.js"></script>
<script src="/js/popup.js"></script>

Then in popup.js you should be able to access jQuery, so your eventHandler would look like this:

$(document).ready(function(){
 $('#anyelement').on('click', doSomething);

 function doSomething(){
   alert ('do something');
 };
})

I don't think why you want CDN for jQuery, all the files will be hosted on the user's machine.

I hope it helps, Rob

answered Oct 25 '12 at 09:03

robertp

3,557
1
20
13

good point about not needing CDN. What is popup.html? I don't know what that is. To clarify, the onclick is triggered when the user clicks on the page action's icon. – User Oct 25 '12 at 09:07
popup.html is the html content that 'pops up' when you click your extension icon in Chrome. – robertp Oct 25 '12 at 09:19
1

Ok then, try @Archer's solution above, that might be a better one for you. – robertp Oct 25 '12 at 09:33
This is not allowed in chrome extension. – Shiva Jul 14 '21 at 09:19

score 0 · Answer 4 · answered Oct 25 '12 at 09:18

In the manifest file, make sure you reference your local jquery.js file (whatever it's called) in the content_scripts block:

"content_scripts": [{
    "js": ["jquery.js"]
}]

That will ensure that it's embedded in the crx file and will be accessible to your other scripts.

How to use jquery in google chrome extension page action background.js?

4 Answers4