1

Chrome 拡張機能で jQuery と jQuery-UI を使用しようとしています。新しいタブが作成されるたびにコンテンツスクリプトダイアログウィンドウで作成しようとしましたが、取得し続けます:

Property '$' of object [object Window] is not a function

スクリプトの読み込みに何か問題があると思います。ここに私が持っているものがあります:

{
"name":"Sample",
"description":"This is a sample",
"manifest_version":2,
"version":"2",
"background":{
    "scripts":["background.js"]
},
"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["jquery-1.8.3.min.js","jquery-ui.js","client.js","myscript.js"]
      "run_at":"document_end",
      "all_frames": true
    }
  ],
"web_accessible_resources": [
    "client.js","jquery-1.8.3.min.js","jquery-ui.js"
  ],
"permissions": [ 
        "unlimitedStorage",
        "http://*/",
        "<all_urls>",
        "tabs"
   ]
}


myscript.js (コンテンツ スクリプト):

var ss = document.createElement('script');
ss.type = "text/javascript";
ss.src = chrome.extension.getURL('jquery-1.8.3.min.js');
ss.onload = function() {
    ss.parentNode.removeChild(ss);
     console.log("jquery-1.8.3.min.js loaded");

};

var ss_ui = document.createElement('script');
ss_ui.type = "text/javascript";
ss_ui.src = chrome.extension.getURL('jquery-ui.js');
ss_ui.onload = function() {
    ss_ui.parentNode.removeChild(ss_ui);
    console.log("jquery-ui.js loaded");
};


var s = document.createElement('script');
s.type = "text/javascript";
s.src = chrome.extension.getURL('client.js');
s.onload = function() {
    s.parentNode.removeChild(s);
    console.log("client.js loaded");
};

        try{

            (document.head||document.documentElement).appendChild(ss);
            (document.head||document.documentElement).appendChild(ss_ui);
            (document.head||document.documentElement).appendChild(s);

        }catch(e){
          console.log("exception in appendChild");
        }



client.js (ダイアログを作成する場所)

       try{
        console.log("Starting to create tabel");

        var layerNode= document.createElement('div');
            layerNode.setAttribute('id','dialog');
            layerNode.setAttribute('title','Basic dialog');
        var pNode= document.createElement('p');
            pNode.innerHTML = "This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.";

        layerNode.appendChild(pNode);
        document.body.appendChild(layerNode);


        jq162 = jQuery.noConflict(true);
(function($){
    $(document).ready(function() {
       $("#dialog" ).dialog();
    });
})(jq162);

        }
        catch(e){
          console.log("script in page exception in appendChild"+e);
          //alert(e);
        }

コンソールで印刷の順序を確認すると、次のようになります。

Starting to create tabel client.js:2
script in page exception in appendChildTypeError: Cannot call method 'dialog' of null client.js:26
client.js loaded chrome-extension://mmoccjinakdjcmhjdjghhjnihbfkkgkp/myscript.js:24
jquery-1.8.3.min.js loaded chrome-extension://mmoccjinakdjcmhjdjghhjnihbfkkgkp/myscript.js:6
jquery-ui.js loaded

ここで何が間違っていますか？

4

2 に答える 2

5

通常の免責事項、私は実際には JQuery を行いません...しかし、あなたのコードに明らかな問題があったので、試してみました...

client.js を取り除きます。マニフェストのコンテンツ スクリプト部分に挿入するファイルを追加すると、不要になります。それらをマニフェストに追加すると、Chrome がそれらを挿入します。これを行うと、半分の作業が始まります。

その後、ダイアログが表示されたが、グラフィックス/スタイリングがないことに気付いたので、css ファイルをマニフェストのコンテンツ スクリプト部分に追加して挿入する必要があります。現在、いくつかのスタイルがありますが、コンソールは、スタイルに必要なグラフィック ファイルを取得できないと言っていました。

拡張ディレクトリに含まれるグラフィック ファイルを css ファイルから参照する最善の方法がわからないので、すべてのグラフィックを dataurl に変換して css ファイルに入れました。このようなツールを使用できます...
http://dataurl.net/#dataurlmaker
...それを行うには。
これで見栄えの良いダイアログができました。

マニフェスト.json 

{
"name":"JQery UI Dialog",
"description":"https://stackoverflow.com/questions/13669762/chrome-extention-using-jquery-in-content-script-resolve-error-when-creating-dial",
"manifest_version":2,
"version":"2",
"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["jquery-1.8.3.min.js","jquery-ui.js","client.js"],
      "run_at":"document_end",
      "all_frames": true,
      "css":["jquery-ui-base64.css"]
    }
  ],
"web_accessible_resources": [
    "client.js","jquery-1.8.3.min.js","jquery-ui.js"
  ],
"permissions": [ 
        "unlimitedStorage",
        "http://*/",
        "<all_urls>",
        "tabs"
   ]
}

jquery-ui-base64.css
https://gist.github.com/4193693
ここに入れるには少し大きすぎるかもしれないと思いました。

client.js 

try {
  console.log("Starting to create tabel");

  var layerNode = document.createElement('div');
  layerNode.setAttribute('id', 'dialog');
  layerNode.setAttribute('title', 'Basic dialog');
  var pNode = document.createElement('p');
  pNode.innerHTML = "This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.";

  layerNode.appendChild(pNode);
  document.body.appendChild(layerNode);


  jq162 = jQuery.noConflict(true);
  (function($) {
    $(document).ready(function() {
      $("#dialog").dialog();
    });
  })(jq162);



} catch(e) {
  console.log("script in page exception in appendChild" + e);
  //alert(e);
}

編集
Chrome の i18n サポートを使用すると、css 内の画像の URL を変更して、拡張機能内のファイルを指すようにすることができます。
https://stackoverflow.com/a/8864212/189093
したがって、これは...
url(images/ui-bg_flat_0_aaaaaa_40x100.png)
...になり
url(chrome-extension://__MSG_@@extension_id__/images/ui-bg_flat_0_aaaaaa_40x100.png)
、パスは相対ではなくなり、__MSG_@@extension_id__拡張機能のIDに置き換えられます。また、この方法で使用されるすべての画像は、メインフェストの一部で
宣言する必要があります。 したがって、マニフェストのその部分は次のようになります (そこにあった 3 つを取り出したことに注意してください。拡張機能によって注入されたので、もう含める必要はありません)... web_accessible_resources

"web_accessible_resources": [
    "images/ui-bg_flat_75_ffffff_40x100.png","images/ui-icons_222222_256x240.png","images/ui-bg_highlight-soft_75_cccccc_1x100.png"
  ]

..テストを機能させるために必要なファイルのみを含めました。さらに追加する必要があるかもしれません。スクリプトが実行されているページのコンソールを確認すると、追加する必要があるファイルが表示されます。
これは、私のテストで使用されたのと同じ css ファイルへのリンクであり、URL はこのように機能するように更新されています...
https://gist.github.com/4195616

于 2012-12-03T08:49:00.420 に答える
0

呼び出すとjQuery.noConflict、$変数は定義されません。

しかし、script.jsあなたは$(document)の直後に電話をかけていますnoConflict。(function($に電話した後、セリフを忘れたと思いますnoConflict。

コードを次のように変更する必要があります。

jq162 = jQuery.noConflict(true);
(function($){
    $(document).ready(function() {
       $("#dialog" ).dialog();
    });
})(jq162);
于 2012-12-02T13:40:59.157 に答える