Extension Chrome “$ n'est pas défini” erreur

J'obtiens une erreur "$ n'est pas défini" quand je travaille sur mon extension chrome.

C'est mon fichier manifeste:

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

C'est mon background.js fichier:

chrome.browserAction.onClicked.addListener(function(tab){
  //No tabs or host permissions needed!
  chrome.tabs.executeScript({
    file: 'content.js'
  });
});

Enfin, le fichier dans lequel l'erreur est déclenchée: 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');
        }
    };
});

À partir de ma compréhension, cela se fait parce que JQuery n'est pas chargé. Cependant, je suis charger correctement dans le manifeste, et jquery.js est également le premier fichier qui est appelé dans le contenu manifeste du script. Merci de m'aider au débogage. Merci!!!!

OriginalL'auteur chaitanya.varanasi | 2013-10-05

  1. 13

    Ce qui se passe lorsque le script qui appelle pour jQuery charges avant jQuery.js le chargement. Dans l'exemple donné par la question demandeur, l'arrière-plan des charges avant le contenu du script, et le contenu du script charge jQuery lui-même après l'arrière-plan des appels de script jQuery. Cet exemple peut être fixé par le fait d'avoir l'arrière-plan de script de chargement de jQuery, comme suit:

     "background": {
    "scripts": ["jquery-2.0.2.js", "jquery.Jcrop.js", "background.js"],
    "persistent": false
  },

    Gardez également à l'esprit que js fichiers répertoriés dans le manifeste sont chargés dans l'ordre où ils apparaissent. Par exemple, disons que vous avez un fichier "script.js", qui contient:

    console.log($('#elementID'));

    Si vous écrivez votre manifeste, comme cette (MAUVAISE), vous obtiendrez le message d'erreur "$ n'est pas défini":

    "content_scripts": [
    {
        "js": [ 
            "script.js",
            "jquery.js" ]
    } 
]

    Changer le manifeste (à DROITE) va corriger l'erreur:

    "content_scripts": [
    {
        "js": [ 
            "jquery.js",
            "script.js" ]
    } 
]

    Note que "jquery.js" maintenant précède "script.js" et est donc chargé en premier.

    Le problème peut être paraître intermittent parce que les deux scripts sont chargés presque en même temps. Si vous modifiez le script, de sorte que l'appel à jQuery est en dessous de certains autres commandes javascript, le temps qu'il faut pour les autres commandes à exécuter peut être juste assez de temps pour jQuery.js à la fin du chargement. Ainsi, par exemple, si vous avez écrit le manifeste de la mauvaise façon ci-dessus, vous pouvez aussi techniquement corriger l'erreur en la modification de la script.js fichier comme ceci:

    var t = setTimeout(function(){
     console.log($('#elementID'));
}, 1000);

    L'1 seconde de retard donne jQuery.js assez de temps pour charger, cependant, ce n'est évidemment pas la solution idéale!

    OriginalL'auteur mattthew

  2. 1

    Je n'ai aucune idée de comment cela fonctionne, mais de toute façon, quand j'ai changé de JQuery pour sa version réduite et cela fonctionne maintenant.

    Je suppose que vous n'avez pas de recharger votre extension après l'ajout de jQuery dans votre fichier manifeste. Le contenu des scripts sont automatiquement rechargées. Les changements de manifester.json ne devient effective qu'après le rechargement de votre extension Chrome.
    il fonctionne avec le signe'$'.
    ses vraiment erratique pour une raison quelconque. Il a cessé de travailler à nouveau
    avez-vous jamais résoudre ce problème? Je vais avoir un problème similaire, parfois, les travaux d'extension, d'autres fois il ne parvient pas à charger jquery.min.js
    hey désolé pour la fin du message, mais oui j'ai fait le résoudre.

    OriginalL'auteur chaitanya.varanasi

  3. -3

    Il y a un conflit quelque part. Résoudre le problème en remplaçant toutes les occurrences de $ avec jQuery.

    pas beaucoup de différence. J'obtiens l'erreur: "jQuery n'est pas défini "
    le fichier: content.js est appelée, parce que je vois " 1 " dans la console chromée
    ""1" dans la console Chromée"- entendez-vous un message d'erreur? Êtes-vous absolument sûr que jquery.js devient chargé? Je n'ai jamais eu un problème avec la substitution jQuery pour $ (au moins avec jQuery 1.7).
    le " 1 " pour les fins de débogage, c'est tout. C'est comment je le sais content.js est chargé

    OriginalL'auteur musical_coder