CODEWITHSUNDEEP
javascriptjquerygoogle-chromegoogle-chrome-extension
Changerrs
Changerrs

Reputation: 273

chrome extensions Uncaught ReferenceError: $ is not defined

I am trying to make a chrome extension that uses an external javascript file that uses jQuery. But I keep getting this silly error.

Screenshot of error in chrome inspector.

Any help is appreciated thanks!

popup.js 

$(document).ready(function() {
  $.ajax({url: "http://www.google.com", success: function(result) {
    $("#report-details").html(result);
  }});
});

popup.html

<!doctype html>
<html>
  <head>
    <title>TEST</title>
    <script src="popup.js"></script>
    <script src='./js/jquery.min.js'></script>
    <script src='./js/jquery.js'></script>
  </head>
  <body>
    <h1>TEST</h1>
    <div id="report-details">
    </div>
  </body>
</html>

manifest.json

{
  "manifest_version": 2,
  "name": "my ext",
  "description": "fun ext",
  "version": "1.0",
  "browser_action": {
   "default_icon": "icon.png",
   "default_popup": "popup.html"
  },
  "permissions": [
   "activeTab"
   ],   
   "content_scripts": [
    {
      "matches": ["http://*/*","https://*/*"],
      "js": ["js/jquery.min.js"]
    }
  ]
}

Any help is greatly appreciated. (I apologize if this is a noob mistake)

Upvotes: 1

Views: 7240

Answers (1)

Balachandran
Balachandran

Reputation: 9637

First Load Jquery Plugin after you can load your popup.js

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

Note: No need to load 2 jquery Plugin

Upvotes: 3

Related Questions