0

I'm having a problem applying css styles to my Firefox extension elements.

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

In cap.js I'm creating a table and appending it to the body of the page. I tried to style this table. However, when I tested this extension, I found that the table and button elements in the extension are changing according to the site I'm visiting. I've applied this as inline style; yet the design is still changing.

I tried to register a skin for this extension, but the styles were not applied.

In attach.xul I have this:

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

In manifest file I have this:

content     capture    chrome/content/
overlay chrome://browser/content/browser.xul chrome://capture/content/attach.xul
1
  • Did I understand correctly? You apply overlay.css to the browser XUL (indirectly, via attach.xul) but expect it to apply to content pages? Mar 26, 2012 at 8:18

1 Answer 1

0

If your goal is styling content pages rather than adding styles to the user interface of your extension, nsIStyleSheetService is your friend. Something like this:

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

Make sure to use @-moz-document in overlay.css so that your styles are applied only to the pages that they belong to - these rules will be applied to all web pages (and even browser's XUL) otherwise.

3
  • Thanks wladimir, but i'm trying to apply styles for my extension elements. this extension contains table,input and buttons. so i have styles for elements in the style sheet[overlay.css] and i want to use it, for that i tried above method and it didn't worked. Mar 26, 2012 at 9:19
  • 1
    @Sekar: From your description it sounds like you are injecting that table into a web page - then it is no longer "my extension elements". Mar 26, 2012 at 9:55
  • I'm new to this category [ developing extensions ]. so i chosen this method. but by doing this designs of external websites affecting my table design even if i give inline styles. Is there any methods available to create tables.. Mar 27, 2012 at 4:59

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.