Chrome扩展程序 - 未捕获的ReferenceError:$未定义

时间:2014-03-20 20:25:38

标签: javascript jquery google-chrome-extension

我每次更新标签时都使用chrome.tabs API来运行脚本。脚本在页面中搜索关键字,如果找到它,它会提醒您,但如果没有,则会刷新页面。每当我测试扩展时,控制台都会告诉我:

console error

的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);
  }
}

我在这里做错了什么?任何帮助表示赞赏。我在扩展的根目录中包含了 jquery。

1 个答案:

答案 0 :(得分:7)

您的背景页面上只包含了jQuery。您应该将jQuery注入到正在执行script.js的选项卡上。

以下是首先加载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"});
        });
    }
});