Chrome 扩展“$ 未定义”错误

Question

我在处理 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
    }

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

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
}

Answer 3

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

Answer 4

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