title: chrome extensions Uncaught ReferenceError: $ is not defined
body: <p>I am trying to make a chrome extension that uses an external javascript file that uses jQuery. But I keep getting this silly error.</p>
  
  <p><a href="https://i.imgur.com/lUqLZJs.png" rel="nofollow noreferrer">Screenshot of error in chrome inspector.</a></p>
  
  <p>Any help is appreciated thanks!</p>
  
  <p><strong>popup.js</strong>  </p>
  
  <pre><code>$(document).ready(function() {
    $.ajax({url: "http://www.google.com", success: function(result) {
      $("#report-details").html(result);
    }});
  });
  </code></pre>
  
  <p><strong>popup.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;TEST&lt;/title&gt;
      &lt;script src="popup.js"&gt;&lt;/script&gt;
      &lt;script src='./js/jquery.min.js'&gt;&lt;/script&gt;
      &lt;script src='./js/jquery.js'&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;TEST&lt;/h1&gt;
      &lt;div id="report-details"&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>manifest.json</strong></p>
  
  <pre><code>{
    "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"]
      }
    ]
  }
  </code></pre>
  
  <p>Any help is greatly appreciated. 
  (I apologize if this is a noob mistake)</p>