Ошибка расширения Chrome "$ не определено"

Я получаю сообщение об ошибке "$ is notfined", когда я работаю над расширением 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 также является первым файлом, который вызывается в скрипте содержимого манифеста. Пожалуйста, помогите мне в отладке. Благодарю вас!

Источник

3 ответа

Решение

Я понятия не имею, как это работает, но почему-то, когда я изменил 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": [ 
            "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 достаточно времени для загрузки, однако это, очевидно, не идеальное решение!

Источник

Это происходит потому, что вы вызываете свой сценарий перед файлом 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
}
Источник

Там где-то конфликт. Решите это, заменив все экземпляры $ с jQuery,

Источник
Другие вопросы по тегам