将css样式表应用于Firefox扩展

时间:2012-03-26 08:04:39

标签: css firefox firefox-addon

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

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

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

我尝试为此扩展程序注册皮肤,但未应用样式。

在attach.xul中我有这个:

<?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

1 个答案:

答案 0 :(得分:0)

如果您的目标是设置内容网页样式而不是将样式添加到附加信息的用户界面,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-document,以便您的样式仅应用于它们所属的页面 - 否则这些规则将应用于所有网页(甚至是浏览器的XUL)。