鉻extention創建對話框窗口

Question

我嘗試使用jQuery和jQuery的UI在我的Chrome擴展程序時使用jQuery的內容腳本解析錯誤。 我嘗試在每次創建新的選項卡中的內容腳本對話框窗口創建，但我不斷收到：

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 

我在做什麼錯在這裏？

Answer 1

平時discalimer，我真的不這樣寫：jQuery ...但我看到了你的代碼一個明顯的問題，因此給了它一個鏡頭...

擺脫client.js的，它不再需要自己添加它注入到清單的內容腳本部分文件後。將它們添加到清單後，Chrome現在會爲您注入它們。一旦你這樣做，它開始工作一半。

之後，我注意到對話框出現了，但沒有圖形/樣式，所以您需要將css文件添加到清單的內容腳本部分以進行注入。現在有一些風格，但控制檯說它無法獲得風格所需的圖形文件。

我不知道什麼是最好的方法是從css文件引用擴展目錄中包含的圖形文件，所以我只是把所有的圖形轉換成dataurl的，並把它們放在CSS文件。您可以使用一個工具，像這樣的...
http://dataurl.net/#dataurlmaker
......到弄完。
現在我們有一個很好看的對話框。

manifest.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); 
} 

編輯
使用鉻合金i18n支持，使他們指向的文件在我們的擴展，我們可以更改圖片的網址在CSS。
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所取代。
此外，這種方式使用的所有圖像需要在您的mainfest的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" 
    ] 

..我只包含了我需要的文件來使我的測試工作，您可能需要添加更多。檢查腳本正在運行的頁面上的控制檯，它會告訴你需要添加哪些文件。
下面是在我和更新，以這種方式工作的URL測試中使用相同的CSS文件的鏈接...
https://gist.github.com/4195616

Answer 2

當你調用jQuery.noConflict然後$變量不會被定義。

但script.js你noConflict後立即打電話$(document)。我想你在撥打noConflict後忘了一行(function($。

您必須更改您的代碼是這樣的：

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