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

Question

我正在使用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包含在扩展程序的根目录下了。

- user3376905

---

你知道 $ 是 jQuery 的函数名吗？它是最先加载的吗？ - Rob Sedgwick

好像在引入jQuery之前调用了这段代码。 - A. Wolff

@A.Wolff 我在 background.html 文件中将 jQuery 放在 background.js 之前。为什么会这样做？ - user3376905

Answer 1

您只在后台页面中包含了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"});
        });
    }
});

- nderscore

---

另一个问题，如何在background.js中包含一个jquery插件？原理是一样的吗？ - user3376905

@user3376905 只需以相同的方式在回调中加载Jquery后加载插件脚本。 - nderscore

我需要每次调用 chrome.tabs.executeScript 都注入它吗？还是可以全局加载它？我尝试将其包含在我的 manifest.json 中，但没有成功： "js": ["content.js", "vendor/jquery-2.1.4.js"]。 - Andi Giga

Answer 2

在我的情况下，问题是文件路径。

    {
    "name": "XYZ",
    "description" : "XYZ",
    "version": "1.0",
    "manifest_version": 3,
    "background": {
        "service_worker": "background.js"
    },
    "permissions": [
        "storage",
        "tabs"
    ],
    "action" : {
        "default_popup": "popup.html"
    },
    "content_scripts": [
        {
            "matches": ["*://*/*"],
            "js": ["./jquery.js", "./popup.js" ]
        } 
    ],
    "icons" : {
        "16": "/images/favicon-16x16.png",
        "32": "/images/favicon-32x32.png",
        "48": "/images/android-icon-48x48.png"
    }
}

- Aman Gupta