Вставка локального файла css с расширением Firefox

Я создаю расширение firefox и вам нужно вставить некоторые элементы и css в документ.

Я пробовал следовать Как расширение Firefox может вставить локальный файл css на веб-страницу? и Вставка CSS с помощью Firefox Расширение, но не повезло.

Я знаю, что мне не хватает какой-то глупой точки, но я не могу понять, что это такое, и будет очень признателен, если кто-то может указать мне на это.

Вот мой хром. манифест:

 content    helloworld content/
overlay chrome://browser/content/browser.xul    chrome://helloworld/content/overlay.xul

locale  helloworld  en-US   locale/en-US/

skin    helloworld  classic/1.0 skin/

И мой overlay.js:

var fileref = gBrowser.contentDocument.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", "resource://helloworld/skin/global.css");
gBrowser.contentDocument.getElementsByTagName("head")[0].appendChild(fileref);

Я даже пробовал это внутри моего overlay.js

var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"]
    .getService(Components.interfaces.nsIStyleSheetService);
var ios = Components.classes["@mozilla.org/network/io-service;1"]
    .getService(Components.interfaces.nsIIOService);
var uri = ios.newURI(url, null, null);
sss.loadAndRegisterSheet(uri, sss.USER_SHEET);

Не повезло снова.

Что мне не хватает? Я серьезно не могу понять.

Пробовал использовать консоль, ничего не показывает
Когда я копирую и вставляю href "chrome://helloworld/skin/global.css", я могу видеть свой файл css в браузере.

Ответ 1

Вы должны установить javascript.options.showInConsole, перезапустить, а затем проверить консоль ошибок.

Фрагмент nsIStyleSheetService должен быть самым простым для работы.

Что в нем url? Другие фрагменты/комментарии, которые вы опубликовали, противоречат друг другу - chrome.manifest и ваш комментарий "Когда я копирую и вставляю свой href..., я могу видеть, что мой css файл в браузере" подразумевает, что вы используете chrome://helloworld/skin/global.css, но ваш другой фрагмент показывает, что вы используете ресурс://URL, который является другим зверем.

Как вы определяете, что фрагмент не работает? Не могли бы вы ошибиться в своей таблице стилей? Вы попробовали что-то вроде * {color:red !important;} как ваш CSS?

P.S. Если вы используете nsIStyleSheetService, обратите внимание на комментарий к MDC о том, чтобы не регистрировать один и тот же лист несколько раз.

Также обратите внимание, что при использовании nsIStyleSheetService вы должны быть осторожны, чтобы ваши стили не применялись к страницам, которые вы не намерены изменять. @- moz-document может быть очень полезен для этого.

Ответ 2

Я не уверен, что это решит вашу проблему, но вы должны слушать события загрузки во всех вкладках, изменяя ваш overlay.js на что-то вроде:

window.addEventListener('load', function () {
gBrowser.addEventListener('DOMContentLoaded', function (event) {
  if (event.originalTarget.nodeName == '#document' && 
     event.originalTarget.defaultView.location.href == gBrowser.currentURI.spec)
  {
    var document = event.originalTarget;
    // Your css injection here
  }
}, false),
true);

Ответ 3

Забудьте о файле overlay.js и файле overlay.xul, вам это не нужно. Используйте команду для chrome.manifest вместо, например:

style chrome://browser/content/browser.xul resource://helloworld/skin/global.css

Нет js req'd