title: How do I fix "ReferenceError: $ is not defined" in Chrome extension related to jQuery loading? (jQuery script listed first)
body: <p>I am working on a simple Chrome extension that blocks content on YouTube from displaying when enabled and I am using jQuery for DOM manipulation. Here is the error that is being thrown when I run my code using node.js directly in VS Code:</p>
  <p><em>EDIT 1</em>: I forgot to mention that the functionality of the app works in the browser (i.e., blocks the desired content, displays the specified image and text instead), but in the editor throws this error and prevents other code further down the thread of execution from running (e.g., logging 'test' to the console after line 1 where the first unrecognized &quot;$&quot; is encountered)</p>
  <pre><code>ReferenceError: $ is not defined
      at Object.&lt;anonymous&gt; (C:\Users\s0cpl\Dropbox\PC\Desktop\repos\Chrome-Extension\main.js:1:16)
      at Module._compile (node:internal/modules/cjs/loader:1105:14)
      at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
      at Module.load (node:internal/modules/cjs/loader:981:32)
      at Function.Module._load (node:internal/modules/cjs/loader:822:12)
      at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
      at node:internal/main/run_main_module:17:47
  </code></pre>
  <p>Here is my manifest.json file:</p>
  <pre><code>{
      &quot;manifest_version&quot;: 2,
      &quot;name&quot;: &quot;Focus&quot;,
      &quot;version&quot;: &quot;1.0&quot;,
      &quot;description&quot;: &quot;Block YouTube videos from displaying to increase productivity.&quot;,
      &quot;content_scripts&quot;: [
          {
              &quot;js&quot;: [&quot;jquery.min.js&quot;, &quot;./main.js&quot;],
              &quot;matches&quot;: [&quot;https://www.youtube.com/*&quot;],
              &quot;css&quot;: [&quot;index.css&quot;]
          }
      ],
      &quot;icons&quot;: {
          &quot;16&quot;: &quot;focus.png&quot;,
          &quot;48&quot;: &quot;focus.png&quot;,
          &quot;128&quot;: &quot;focus.png&quot;
      }
  }
  </code></pre>
  <p>And finally, here is my main.js file:</p>
  <pre><code>var contents = $('#contents');
  var contentsParent = contents.parent();
  contents.remove();
  contentsParent.prepend('&lt;img src=&quot;https://thumbs.dreamstime.com/b/life-inspirational-quotes-be-stronger-than-your-excuses-blurry-background-motivational-170115740.jpg&quot;/&gt;');
  contentsParent.prepend('&lt;p class=&quot;beautText&quot;&gt;Imagine how productive you can be without watching YouTube videos!&lt;/p&gt;');
  $.ajax({
      method: 'GET',
      url: 'https://unsplash.it/list',
      success: function(result) {
          // this is where the picture coming back from the AJAX request can be manipulated
          console.log(result);
      },
      error: function(err) {
          // if any errors occur during the process you can check out the error by logging the 'err' argument
      }
  });
  </code></pre>
  <p>So far, I have read lots of SO posts about people experiencing similar issues and I understand that the error is likely the result of main.js running before jQuery is loaded (due to not recognizing $).</p>
  <p>I have tried including a &quot;background&quot; key with my jquery.min.js script as a value, using &quot;jquery&quot; instead of &quot;$&quot; in my main.js file, using manifest version 3 instead of version 2, and generally following suggestions posed to other people who were experiencing similar jquery issues. My understanding is that having &quot;jquery.min.js&quot; listed first in the value array for &quot;js&quot; within &quot;content_scripts&quot; should mitigate this issue, but so far I have not been able to squash the bug despite trying to the last few hours.</p>
  <p>Any help would be greatly appreciated!</p>