Применить 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 браузера) в противном случае.