将css样式表应用于Firefox扩展

Question

我在将css样式应用于Firefox扩展元素时遇到问题。

chrome  
  -content ->attach.xul,cap.js  
  -skin->overlay.css  

在cap.js中，我创建了一个表，并将其附加到页面的正文中。我试着设计这张桌子的样式。然而，当我测试这个扩展时，我发现扩展中的表和按钮元素会根据我访问的网站而变化。我已经将其应用为内联样式；但设计仍在改变。

我试图为这个扩展注册一个皮肤，但样式没有应用。

附件徐我有这个：

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://capture/skin/overlay.css" type="text/css"?>

在清单文件中，我有这个：

content     capture    chrome/content/
overlay chrome://browser/content/browser.xul chrome://capture/content/attach.xul

Answer 1

如果您的目标是设计内容页面的样式，而不是向扩展的用户界面添加样式，那么nsIStyleSheetService就是您的朋友。类似这样的东西：

Components.utils.import("resource://gre/modules/Services.jsm");
var styleSheetService = Components.classes["@mozilla.org/content/style-sheet-service;1"]
                                  .getService(Components.interfaces.nsIStyleSheetService);
var uri = Services.io.newURI("chrome://capture/skin/overlay.css", null, null);
styleSheetService.loadAndRegisterSheet(uri, styleSheetService.USER_SHEET);

请确保在overlay.css中使用@-moz文档，以便您的样式仅应用于它们所属的页面——否则，这些规则将应用于所有网页（甚至浏览器的XUL）。