CODEWITHSUNDEEP
jquerygoogle-chrome-extensioncontent-script
User
User

Reputation: 66081

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

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?

Upvotes: 37

Views: 36305

Answers (4)

Jaydeep Solanki
Jaydeep Solanki

Reputation: 2945

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
}

Upvotes: 72

User
User

Reputation: 66081

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);

Upvotes: 10

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26163

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.

Upvotes: 0

robertp
robertp

Reputation: 3662

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

Upvotes: 1

Related Questions