Chrome擴展：通過內容腳本將JQuery對話框注入頁面

Question

我嘗試過使用this solution來注入jQuery對話框，但沒有成功。 我在頁面上有一個對話框，但它顯示爲透明。 似乎jquery-ui.css加載不正確。我做錯了什麼？

Answer 1

解決的辦法是下載jQuery的ui.css文件，並把它的插件目錄，並鏈接到它的manifest.json 像是：

"content_scripts": [{ 
"matches": ["http://*/*", "http://jquery.com/*"], 
    "css": ["jquery-ui.css"], 
    "js": ["jquery.js", "jquery-ui.js", "popup.js"] 
}] 

我不知道爲什麼注射後不工作：

chrome.browserAction.onClicked.addListener(function (tab) { 
    chrome.tabs.executeScript(null, { 
     file: "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/ui-lightness/jquery-ui.css", 
     runAt: "document_start" 
    }, 

    chrome.tabs.executeScript(null, { 
     file: "http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js", 
     runAt: "document_start" 
    }, 

    function() { 
     chrome.tabs.executeScript(null, { 
      file: "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" 
     }, 

     function() { 
      chrome.tabs.executeScript(null, { 
       file: "popup.js" 
      }); 
     }); 
    }); 
}); 

所以我下載的jquery.js，jQuery的ui.js，將它們放到插件目錄並鏈接到manifest.json，如上所述。然後刪除了所有注射：

chrome.browserAction.onClicked.addListener(function(tab) { 
    chrome.tabs.executeScript(null, 
     { 
      file:"popup.js", 
      runAt:"document_start"} 
     });); 

至於結果我被格式化jQuery的對話框上的任何我們不能沒有代碼幫助

Answer 2

上次我需要我必須直接在文檔中寫入CSS，方法是請求整個CSS通過Ajax請求並將其放入標題中。我不記得我爲什麼這樣做，但我很確定我不會這樣做，當我找到更好的解決方案時。另外請注意，如果它只是對話框，你真的不需要整個CSS。對於我的「解決方案」，最好只使用你實際需要的東西。