title: Chrome extension "$ is not defined" error
body: <p>I am getting an error "$ is not defined" when I am working on my chrome extension. </p>
  
  <p>This is my manifest file:</p>
  
  <pre><code>   {
        "name": "X",
        "description": "Snip this page",
        "version": "2.0",
        "permissions": [
          "activeTab"
        ],
        "background": {
          "scripts": ["background.js"],
          "persistent": false
        },
        "content_scripts":[{
          "matches" : ["&lt;all_urls&gt;"],
          "js": ["jquery-2.0.2.js","jquery.Jcrop.js"],
          "css": ["jquery.Jcrop.min.css"]
        }],
        "browser_action": {
          "default_title": "Snip this page"
        },
        "manifest_version": 2
      }
  </code></pre>
  
  <p>This is my background.js file:</p>
  
  <pre><code>chrome.browserAction.onClicked.addListener(function(tab){
    // No tabs or host permissions needed!
    chrome.tabs.executeScript({
      file: 'content.js'
    });
  });
  </code></pre>
  
  <p>Lastly, the file where the error is triggered: content.js</p>
  
  <pre><code>console.log('1');
  var jcropapi, boundx, boundy;
  $('body').attr('id', 'target');
  $(document).ready(function(){
      $('target').Jcrop();
      console.log('4');
      document.onkeydown = function(){
          if(window.event.keyCode==13){
              console.log('enter');
          }
      };
  });
  </code></pre>
  
  <p>From my understanding, this happends because JQuery does not get loaded. However, I am loading it properly in the manifest, and jquery.js is also the first file that gets called in the manifest content script. Please help me in debugging. Thank You!</p>