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。对于我的“解决方案”，最好只使用你实际需要的东西。