css - 将 css 样式表应用于 Firefox 扩展

Question

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

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

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

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

在 attach.xul 中我有这个:

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

在 list 文件中我有这个:

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

Answer 1

如果您的目标是设置内容页面样式而不是向扩展程序的用户界面添加样式，nsIStyleSheetService是你的 friend 。像这样:

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);

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