Chrome浏览器扩展程序"$ is not defined"错误

Question

我在开发Chrome插件时遇到了一个错误"$ is not defined"。

这是我的清单文件：

   {
      "name": "X",
      "description": "Snip this page",
      "version": "2.0",
      "permissions": [
        "activeTab"
      ],
      "background": {
        "scripts": ["background.js"],
        "persistent": false
      },
      "content_scripts":[{
        "matches" : ["<all_urls>"],
        "js": ["jquery-2.0.2.js","jquery.Jcrop.js"],
        "css": ["jquery.Jcrop.min.css"]
      }],
      "browser_action": {
        "default_title": "Snip this page"
      },
      "manifest_version": 2
    }

这是我的background.js文件：

chrome.browserAction.onClicked.addListener(function(tab){
  // No tabs or host permissions needed!
  chrome.tabs.executeScript({
    file: 'content.js'
  });
});

最后，导致错误的文件是：content.js

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

根据我的理解，这是因为 JQuery 没有被加载。然而，我在清单中正确加载了它，并且 jquery.js 也是清单内容脚本中调用的第一个文件。请帮助我进行调试。谢谢！

- chaitanya.varanasi

Answer 1

当调用jQuery的脚本在jQuery.js之前加载时，就会出现这种情况。在问题提交者给出的示例中，背景在内容脚本之前加载，而内容脚本在背景脚本调用jQuery之后加载jQuery本身。可以通过使背景脚本自己加载jQuery来修复此示例，如下所示：

 "background": {
    "scripts": ["jquery-2.0.2.js", "jquery.Jcrop.js", "background.js"],
    "persistent": false
  },  

记住清单中列出的js文件按照它们的出现顺序进行加载。例如，假设你有一个名为"script.js"的文件，其中包含以下内容：

console.log($('#elementID'));

如果您编写的清单文件如下（错误），则会出现“$未定义”的错误：

"content_scripts": [
    {
        "js": [ 
            "script.js",
            "jquery.js" ]
    } 
]

将清单更改为以下内容（正确），即可修复错误：

"content_scripts": [
    {
        "js": [ 
            "jquery.js",
            "script.js" ]
    } 
]

请注意，"jquery.js"现在在"script.js"之前加载，因此会先被加载。

问题可能看起来不稳定，因为两个脚本几乎同时加载。如果您更改脚本，使得对jQuery的调用在其他一些javascript命令之下，则这些其他命令执行所需的时间可能恰好足够jQuery.js完成加载。例如，如果您像上面错误地编写了清单，您还可以通过像这样更改script.js文件来修复该错误：

var t = setTimeout(function(){
     console.log($('#elementID'));
}, 1000);

1秒的延迟给了jQuery.js足够的加载时间，然而，这显然不是理想的解决方案！

- mattthew

Answer 2

这是因为您在jQuery文件之前调用了脚本。
正确的方式应该是这样的：

{
  "name": "X",
  "description": "Snip this page",
  "version": "2.0",
  "permissions": [
    "activeTab"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts":[{
    "matches" : ["<all_urls>"],
    "js": ["jquery-2.0.2.js","yourscript.js"],
    "css": ["jquery.Jcrop.min.css"]
  }],
  "browser_action": {
    "default_title": "Snip this page"
  },
  "manifest_version": 2
}

- Akap Worldwide

Answer 3

我不知道它是如何工作的，但是当我将JQuery更改为其最小化版本时，它现在可以工作了。

- chaitanya.varanasi

---

我猜你在将jQuery添加到清单文件后没有重新加载扩展程序。内容脚本会自动重新加载。只有在重新加载Chrome扩展程序后，manifest.json的更改才会生效。 - Rob W

你曾解决过这个问题吗？我也遇到了类似的问题，有时候扩展程序可以正常工作，但有时却无法加载jquery.min.js。 - omer schleifer

嘿，抱歉回复晚了，但是是的，我已经解决了。 - chaitanya.varanasi

尝试将jQuery放在文件开头 - chaitanya.varanasi

Answer 4

有一个冲突存在。通过将所有的$实例替换为jQuery来解决它。

- musical_coder

---

没有太大的区别。我收到了错误消息：“jQuery未定义”。 - chaitanya.varanasi

文件content.js被调用了，因为我在Chrome控制台中看到了“1”。 - chaitanya.varanasi

在Chrome控制台中的'1' - 你是指一个错误消息吗？你绝对确定jquery.js已经被加载了吗？至少在jQuery 1.7中，我从来没有用jQuery替代$遇到过问题。 - musical_coder

“1”只是为了调试目的而已。这就是我知道content.js被加载的方式。 - chaitanya.varanasi