Применить таблицу стилей CSS к расширению Firefox

Question

У меня проблема с применением стилей 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

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

Обязательно используйте @-moz-document в overlay.css так что ваши стили применяются только к тем страницам, к которым они принадлежат - в противном случае эти правила будут применяться ко всем веб-страницам (и даже к XUL браузера).