Chrome extension - not specified ReferenceError: $ not defined

Question

I use the chrome.tabs API to run the script every time the tab is updated. The script searches for a keyword on the page, and if it finds it, it notifies you, but if it does not, it refreshes the page. Whenever I check for an extension, the console tells me:

manifest.json

{
  "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": [
    "<all_urls>",
    "tabs"
  ]
}

background.html

<script src="jquery.js"></script>
<script src="background.js"></script>

background.js

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
  if(changeInfo && changeInfo.status == "complete"){
    chrome.tabs.executeScript(tabId, {file: "script.js"});
  }
});

script.js

if ($("div#wrap").is(":contains('comme')")) {
    alert('page contains keyword!');
  } else {
    window.location.reload(true);
  }
}

What am I doing wrong here? Any help is appreciated. I have included jquery in the root of the extension.

Answer 1

jQuery . jQuery , script.js on.

, jquery.js, script.js:

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
    if(changeInfo && changeInfo.status == "complete"){
        chrome.tabs.executeScript(tabId, {file: "jquery.js"}, function(){
            chrome.tabs.executeScript(tabId, {file: "script.js"});
        });
    }
});