javascript Chrome 扩展程序“$ 未定义”错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19199956/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chrome extension "$ is not defined" error
提问by chaitanya.varanasi
I am getting an error "$ is not defined" when I am working on my chrome extension.
我在处理 chrome 扩展时收到错误“$ 未定义”。
This is my manifest file:
这是我的清单文件：
{
"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
}
This is my background.js file:
这是我的 background.js 文件：
chrome.browserAction.onClicked.addListener(function(tab){
// No tabs or host permissions needed!
chrome.tabs.executeScript({
file: 'content.js'
});
});
Lastly, the file where the error is triggered: 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');
}
};
});
From my understanding, this happends because JQuery does not get loaded. However, I am loading it properly in the manifest, and jquery.js is also the first file that gets called in the manifest content script. Please help me in debugging. Thank You!
根据我的理解，这是因为 JQuery 没有被加载。但是，我在清单中正确加载了它，并且 jquery.js 也是清单内容脚本中调用的第一个文件。请帮我调试。谢谢！
采纳答案by chaitanya.varanasi
I have no idea how it works, but somehow, when I changed JQuery to its minimized version and it works now.
我不知道它是如何工作的，但不知何故，当我将 JQuery 更改为最小化版本并且现在可以工作时。
回答by mattthew
This happens when the script that calls for jQuery loads prior to jQuery.js loading. In the example given by the question submitter, the background loads prior to the content script, and the content script loads jQuery itself after the background script calls for jQuery. This example can be fixed by having the background script load jQuery itself, like so:
当调用 jQuery 的脚本在 jQuery.js 加载之前加载时，就会发生这种情况。在问题提交者给出的示例中，后台在内容脚本之前加载，内容脚本在后台脚本调用 jQuery 之后加载 jQuery 本身。这个例子可以通过让后台脚本加载 jQuery 本身来修复，如下所示：
"background": {
"scripts": ["jquery-2.0.2.js", "jquery.Jcrop.js", "background.js"],
"persistent": false
},
Keep in mind also that js files listed in the manifest are loaded in the order they appear. For example, let's say that you have a file, "script.js", that contains:
还要记住，清单中列出的 js 文件是按照它们出现的顺序加载的。例如，假设您有一个文件“script.js”，其中包含：
console.log($('#elementID'));
If you write your manifest like this (WRONG), you'll get the error "$ is not defined":
如果您像这样（错误）编写清单，您将收到错误“$ 未定义”：
"content_scripts": [
{
"js": [
"script.js",
"jquery.js" ]
}
]
Changing the manifest to this (RIGHT) will fix the error:
将清单更改为此（右侧）将修复错误：
"content_scripts": [
{
"js": [
"jquery.js",
"script.js" ]
}
]
Note that "jquery.js" now precedes "script.js" and is therefore loaded first.
请注意，“jquery.js”现在位于“script.js”之前，因此首先加载。
The problem can be seem intermittent because both scripts are loaded almost at the same time. If you change the script so that the call to jQuery is below some other javascript commands, the time it takes for those other commands to execute may be just enough time for jQuery.js to finish loading. So for example, if you wrote the manifest the wrong way above, you could also technically fix the error by changing the script.js file like so:
该问题似乎是间歇性的，因为两个脚本几乎同时加载。如果您更改脚本以使对 jQuery 的调用低于其他一些 javascript 命令，则执行这些其他命令所需的时间可能刚好足以让 jQuery.js 完成加载。因此，例如，如果您以上面错误的方式编写清单，您还可以通过像这样更改 script.js 文件来从技术上修复错误：
var t = setTimeout(function(){
console.log($('#elementID'));
}, 1000);
The 1 second delay gives jQuery.js enough time to load, however, this is obviously not the ideal solution!
1 秒的延迟为 jQuery.js 提供了足够的加载时间，但是，这显然不是理想的解决方案！
回答by musical_coder
There's a conflict somewhere. Resolve it by replacing all instances of $with jQuery.
某处有冲突。通过替换$with 的所有实例来解决它jQuery。
