14

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 はマニフェスト コンテンツ スクリプトで呼び出される最初のファイルでもあります。デバッグで私を助けてください。ありがとう！

4

4 に答える 4

21

これは、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'));

マニフェストを次のように (間違って) 記述すると、「$ が定義されていません」というエラーが表示されます。

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

マニフェストをこれ (RIGHT) に変更すると、エラーが修正されます。

"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 の読み込みに十分な時間が与えられますが、これは明らかに理想的なソリューションではありません!

于 2014-10-30T08:08:02.127 に答える
0

どのように機能するのかわかりませんが、どういうわけか、JQuery を最小化されたバージョンに変更したところ、現在は機能しています。

于 2013-10-05T17:42:42.827 に答える
-3

どこかで争いが起きています。のすべてのインスタンスを に置き換えて解決し$ますjQuery。

于 2013-10-05T16:26:29.680 に答える