Chrome扩展程序"$未定义"错误

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也是在清单内容脚本中调用的第一个文件.请帮我调试.谢谢!

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 更改为最小化版本时，它现在可以工作了。