title: Chrome Extension - Uncaught ReferenceError: $ is not defined
body: <p>I am using the chrome.tabs API to run a script every time a tab is updated. The script searches for a keyword in the page and if it finds it, it alerts you, but if it doesnt, it refreshes the page. Whenever I test the extension, the console tells me:</p>
  
  <p><img src="https://i.stack.imgur.com/fl32Y.png" alt="console error"></p>
  
  <p><strong><em>manifest.json</em></strong></p>
  
  <pre><code>{
    "name": "keyword checker",
    "version": "1.0.0",
    "manifest_version": 2,
    "background": {
        "persistent":true,
        "page":"background.html"
    },
    "icons": {
      "16": "icon-16.png",
      "128": "icon-128.png"
    },
    "page_action": {
        "default_icon": "icon-128.png"
    },
    "permissions": [
      "&lt;all_urls&gt;",
      "tabs"
    ]
  }
  </code></pre>
  
  <p><strong><em>background.html</em></strong></p>
  
  <pre><code>&lt;script src="jquery.js"&gt;&lt;/script&gt;
  &lt;script src="background.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong><em>background.js</em></strong></p>
  
  <pre><code>chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
    if(changeInfo &amp;&amp; changeInfo.status == "complete"){
      chrome.tabs.executeScript(tabId, {file: "script.js"});
    }
  });
  </code></pre>
  
  <p><strong><em>script.js</em></strong></p>
  
  <pre><code>if ($("div#wrap").is(":contains('comme')")) {
      alert('page contains keyword!');
    } else {
      window.location.reload(true);
    }
  }
  </code></pre>
  
  <p>What am I doing wrong here? Any help is appreciated. I <em>have</em> included jquery in the root of the extension.</p>