Rectangle 27 1

How to use jquery in google chrome extension page action 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);
var text = jQuery('h1').text();
alert('inside content! ' + text);

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.

you can still use JQuery to do Ajax calls etc. No necesarily usless to use JQuery on background.js

Note
Rectangle 27 1

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


"background"
...
"background": { "scripts": ["jquery.js","background.js"] },
...
background.js
if (jQuery) {  
    // jQuery loaded
} else {
    // jQuery not loaded
}
jquery.js
manifest.json

in background.js

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

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.

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.

Note
Rectangle 27 1

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


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.

you can still use JQuery to do Ajax calls etc. No necesarily usless to use JQuery on background.js

Note
Rectangle 27 1

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


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

 function doSomething(){
   alert ('do something');
 };
})
<script src="/js/jquery-1.8.1.min.js"></script>
<script src="/js/popup.js"></script>

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

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

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.

Ok then, try @Archer's solution above, that might be a better one for you.

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

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.

ok but for my extension, I don't want a popup.

popup.html is the html content that 'pops up' when you click your extension icon in Chrome.

Note
Rectangle 27 1

How to use jquery in google chrome extension page action 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);
var text = jQuery('h1').text();
alert('inside content! ' + text);

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.

you can still use JQuery to do Ajax calls etc. No necesarily usless to use JQuery on background.js

Note
Rectangle 27 1

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


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

 function doSomething(){
   alert ('do something');
 };
})
<script src="/js/jquery-1.8.1.min.js"></script>
<script src="/js/popup.js"></script>

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

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

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.

Ok then, try @Archer's solution above, that might be a better one for you.

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

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.

ok but for my extension, I don't want a popup.

popup.html is the html content that 'pops up' when you click your extension icon in Chrome.

Note
Rectangle 27 1

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


"background"
...
"background": { "scripts": ["jquery.js","background.js"] },
...
background.js
if (jQuery) {  
    // jQuery loaded
} else {
    // jQuery not loaded
}
jquery.js
manifest.json

in background.js

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

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.

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.

Note