Question

对于chrome扩展，我试图对通过脚本注入的一些元素应用一组CSS规则。我尝试单独运行注入的html，显式链接CSS文件，它在这种情况下工作，但没有任何方式的工作方式。以下是代码

我的manifest.json中的片段：

    "background": {
    "scripts": [ "Scripts/Background/background.js" ]
},


"browser_action": {
    "default_icon": "img/icon.png"
    //"default_popup": "popup.html"
},
"permissions": [
    "bookmarks",
    "tabs",
    "http://*/*",
    "https://*/*",
    "activeTab"

],

"web_accessible_resources": [
    "HTML/popup.html", "Scripts/External/jquery-2.1.3.min.js", "Scripts/Injected/loadExtUI.js", "Style/extUI.css"
]

我的背景脚本：

// Supposed to be Called when the user clicks on the browser action icon.
function loadExt() {
chrome.tabs.insertCSS(null, { file: "Style/extUI.css" }, function () {
   alert("Inserted CSS") //This alert works
});
chrome.tabs.executeScript(null, { file: "Scripts/External/jquery-2.1.3.min.js" }, function () {
    chrome.tabs.executeScript(null, { file: "Scripts/Injected/loadExtUI.js"          });
 });
}
chrome.browserAction.onClicked.addListener(loadExt);

脚本/注入/ loadExtUI.js：

var popup_root = document.getElementById('chimp_ext_container');
if (popup_root == null) {
$.get(chrome.extension.getURL("HTML/popup.html"), function (data) {
    //$(data).appendTo('body');
    // Or if you're using jQuery 1.8+:

    $($.parseHTML(data)).appendTo('body');
});
} else {
  document.body.removeChild(popup_root);
}

样式/ extUI.css

#chimp_ext_container {
max-width: 420px !important;
overflow-x: hidden !important;
font-family: Arial, sans-serif !important;
font-size: 12px !important;
margin:1px !important;
padding:10px !important;
border: 1px groove !important;
border-radius: 5px !important;

background-color:aqua;

position: absolute !important;
top:10px !important;
float:right !important;
}

最后，这是HTML / pop

<!doctype html>
<html>
<head>
  <title>Chimpu</title>  
 </head>

 <body>
  <div id="chimp_ext_container">
      <h1>Chimpu mera doshtttt!</h1>
  </div>
 </body>
 </html>

我运行的测试页面是我自己的页面，它只有一个

元素，没有应用其他CSS，所以我确信，没有任何东西干扰我的CSS文件。

在调试时，我发现应用于<p>的css样式可以正常显示但不能<div>！

即使主机页面没有应用任何CSS，使用chrome.tabs.insertCSS时也不会应用我的CSS规则

0 个答案: