Javascript Chrome扩展“$“未定义”；错误

我在处理chrome扩展时遇到错误“$未定义”

这是我的清单文件：

   {
      "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
    }

最后，触发错误的文件：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也是清单内容脚本中调用的第一个文件。请帮我调试一下。谢谢大家!

某个地方有冲突。通过将

$

的所有实例替换为

jQuery

来解决此问题。在某个地方存在冲突。通过将

$

的所有实例替换为

jQuery

来解决它，我不知道它是如何工作的，但不知为什么，当我将jQuery更改为它的最小化版本时，它现在可以工作了。

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

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

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

发生这种情况是因为您在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
}

{
“名称”：“X”，
“说明”：“剪下此页”，
“版本”：“2.0”，
“权限”：[
“活动选项卡”
],
“背景”：{
“脚本”：[“background.js”]，
“持续”：假
},
“内容脚本”：[{
“匹配项”：[“”]，
“js”：[“jquery-2.0.2.js”，“yourscript.js”]，
“css”：[“jquery.Jcrop.min.css”]
}],
“浏览器操作”：{
“默认标题”：“剪下此页”
},
“清单版本”：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
}

{
“名称”：“X”，
“说明”：“剪下此页”，
“版本”：“2.0”，
“权限”：[
“活动选项卡”
],
“背景”：{
“脚本”：[“background.js”]，
“持续”：假
},
“内容脚本”：[{
“匹配项”：[“”]，
“js”：[“jquery-2.0.2.js”，“yourscript.js”]，
“css”：[“jquery.Jcrop.min.css”]
}],
“浏览器操作”：{
“默认标题”：“剪下此页”
},
“清单版本”：2
}

差别不大。我得到一个错误：“jQuery未定义”调用文件：content.js是因为我在chrome控制台中看到“1”在chrome控制台中看到“1”-你是说一条错误消息吗？你绝对确定jquery.js正在加载吗？我从来没有遇到过用

jQuery

替换

$

（至少在jquery1.7中是这样）的问题。“1”只是为了调试而已。这就是我如何知道content.js被加载的原因，差别不大。我得到一个错误：“jQuery未定义”调用文件：content.js是因为我在chrome控制台中看到“1”在chrome控制台中看到“1”-你是说一条错误消息吗？你绝对确定jquery.js正在加载吗？我从来没有遇到过用

jQuery

替换

$

（至少在jquery1.7中是这样）的问题。“1”只是为了调试而已。这就是我知道content.js被加载的原因。我猜您在清单文件中添加jQuery后没有重新加载扩展名。内容脚本将自动重新加载。对manifest.json的更改只有在重新加载您的Chrome扩展后才会生效。您解决过这个问题吗？我遇到了一个类似的问题，有时候扩展可以工作，有时候它无法加载jquery.min.jsh