Use JQuery in an inject.js file executed under background.js

Question

I am building a chrome extension where my background.js script file will execute inject.js script file on a certain event.

I also have a local jquery.min.js file which I have included in my manifest.json file so that I can use it in my background.js file.

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

However, I am not sure how can use jquery in my inject.js file. I tried using /// <reference path="jquery.min.js" /> but that didn't work.

Any thoughts on how can I use jquery and other js libraries in my inject.js?

Below if my background.js code

chrome.browserAction.onClicked.addListener(function(tab) {
    //To verify if jQuery is working  
    if (jQuery) {
        console.log("Jquery on");
    } else {
        console.log("Jquery off");
    }

    if(activeTabs.length===0){
        chrome.tabs.executeScript(tab.id, {file:"js/inject.js"});
    }
}

How are you using / including / executing `inject.js`? Without this information the question can't be answered — Xan, Apr 15 '19 at 21:05
Have you tried to check this [SO post (How do I include a JavaScript file in another JavaScript file?)](https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file)? And this another [SO post (How to inject jquery to any webpage)](https://stackoverflow.com/questions/26573076/how-to-inject-jquery-to-any-webpage)? — MαπμQμαπkγVπ.0, Apr 16 '19 at 09:58

score 2 · Accepted Answer · answered Apr 16 '19 at 08:07

2

You have to inject jquery.min.js before injecting inject.js. In your case:

if(activeTabs.length===0){
    chrome.tabs.executeScript(tab.id, {file:'jquery.min.js'},function(){
        chrome.tabs.executeScript(tab.id, {file:'js/inject.js'});
    });
}

answered Apr 16 '19 at 08:07

Iván Nokonoko

4,888
2
19
27

Use JQuery in an inject.js file executed under background.js

1 Answers1