JQuery is not loading in chrome extension content script

Question

I am trying to create a chrome extension that interacts with and changes the content of my University's Job Board in order to add ratings from glassdoor. This is my first extension, so please forgive any obvious errors.

manifest.json:

{
  "manifest_version": 2,
  "name": "My Cool Extension",
  "version": "0.1",
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": [
        "https://lehigh-csm.symplicity.com/students/*",
        "https://api.glassdoor.com/api/*"
      ],
      "js": ["jquery.min.js", "content.js"]
    }
  ],
}

content.js:

var jsonFile = "https://api.glassdoor.com/api/api.htm?t.p=51863&t.k=kPRnCOceJPO&userip=0.0.0.0&useragent=&format=json&v=1&action=employers&q=test";
$.getJSON(jsonFile, function(data) {
    var items = [];
    console.log(data);
});

However I am getting the error: Uncaught ReferenceError: $ is not defined

Any clue what I could be doing wrong? I tried browsing some of the similar questions but cannot get their solutions to work.

Thanks!

Excuse asking the obvious, but do you have `jquery.min.js` file where `manifest.json` is? — Sasindu Mendis, Jan 17 '16 at 07:44
First thing you should try is moving the api out of `matches` into `permissions` because you are mixing those two concepts. — minj, Jan 17 '16 at 14:11

score 2 · Answer 1 · edited May 23 '17 at 12:08

2

Well the answer is obvious, you haven't imported a jQuery file. How to do this is beyond my knowledge unless you're putting it into a web page but you can download the jQuery files here: https://jquery.org/

If this isn't possible to put jQuery into an extension then try changing your code to just plain JavaScript. All jQuery does is it makes JavaScript shorter, more simple, or easier to use. You can translate jQuery to JavaScript with a few quick Google searches...

This MAY help. I dunno. http://api.jquery.com/jquery.getjson/

Edit: Load JQuery into a Chrome extension?

How to use jQuery in chrome extension?

Google Chrome Extensions: How to include jQuery in programmatically injected content script?

Try these

edited May 23 '17 at 12:08

Community

1
1

answered Jan 17 '16 at 07:37

insanewolfhd

81
1
11

I read here (https://robots.thoughtbot.com/how-to-make-a-chrome-extension) that all you need to do is include it first in the "js" portion of your manifest file – wakey Jan 17 '16 at 07:39
Then try it and let me know if it worked. Also, feel free to up vote if I helped :). – insanewolfhd Jan 17 '16 at 07:41
Doesn't `"js": ["jquery.min.js", "content.js"]' do what I am trying to achieve? – wakey Jan 17 '16 at 08:34
JavaScript does what you're trying to achieve yes but jQuery is a plugin for JavaScript that allows you to use that little "$" before your code. jQuery makes "js" work the way you want it to and are expecting it to. Basically, JavaScript was never built to use "$" or $.getJSON, that's a jQuery function. I'd recommend reading more up on it at http://www.jquery.com/ – insanewolfhd Jan 17 '16 at 08:57

JQuery is not loading in chrome extension content script

1 Answers1