Вставка CSS с расширением Firefox

Question

Я создаю расширение Firefox, которое добавляет элементы HTML на определенные страницы веб-сайта. Я хочу, чтобы он вставил пользовательский файл CSS для стилизации этих элементов. Это работает, если я вставляю теги с CSS прямо на странице, но это далеко не идеальное решение.

Есть ли способ заставить его загружать и анализировать файл CSS, как если бы я использовал тег в заголовке, или я как-то застрял, вставляя его?

Answer 1

chrome: // не будет работать, поскольку страница, на которую вы вставляете, не имеет доступа к файлам за пределами своего домена (включая URI chrome). Это верно, даже если вы вставляете ссылку, потому что ссылка все еще выполняется в контексте целевой страницы. Вместо этого у вас есть два варианта:

Вы можете определить псевдоним протокола ресурса в своем манифесте, а затем использовать URI ресурса для доступа к CSS. Например, следующий файл chrome.manifest позволит вам вставить CSS как resource://myextresource/myfile.css:
content myext content/
resource myextresource content/css/
См. MDN Chrome регистрация для получения дополнительной информации. См. Также Как расширение Firefox может добавить локальный файл CSS в веб-страницу? для аналогичного вопроса.

Или вы можете добавить CSS как USER_SHEET, используя следующее. Это сделает ваш CSS доступным на всех страницах, поэтому убедитесь, что вы используете уникальные селекторы. Одним из предостережений при таком подходе является то, что CSS страницы имеет приоритет над пользовательскими листами. Вы можете использовать! Важный, чтобы переопределить это, но CSS страницы все еще может превзойти вас, если он также использует! Важный.

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