Chrome扩展程序“$未定义”错误

当我处理我的chrome扩展时，我收到错误“$ is not defined”。

这是我的清单文件：

{ "name": "X", "description": "Snip this page", "version": "2.0", "permissions": [ "activeTab" ], "background": { "scripts": ["background.js"], "persistent": false }, "content_scripts":[{ "matches" : [""], "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也是在清单内容脚本中调用的第一个文件。 请帮我调试。 谢谢！

Answer 1

当jQuery.js加载之前调用jQuery的脚本加载时会发生这种情况。 在问题提交者给出的示例中，后台在内容脚本之前加载，内容脚本在后台脚本调用jQuery之后加载jQuery。 这个例子可以通过让后台脚本加载jQuery本身来修复，如下所示：

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

还要记住清单中列出的js文件按它们出现的顺序加载。 例如，假设您有一个文件“script.js”，其中包含：

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

如果您像这样（错误）编写清单，您将收到错误“$ is not defined”：

 "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有足够的时间加载，但是，这显然不是理想的解决方案！

Answer 2

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

Answer 3

某处发生了冲突。 通过用jQuery替换$所有实例来解决它。