Inserción CSS con una extensión de Firefox

Question

Estoy construyendo una extensión para Firefox que añade elementos HTML a ciertas páginas de un sitio web. Quiero que inserte un archivo CSS personalizado para darle un estilo a esos elementos. Funciona si inserto etiquetas con CSS directamente en la página, pero esa es una solución menos que ideal.

¿Hay alguna forma de conseguir que cargar y analizar un archivo CSS, como si usara la etiqueta en la cabecera, o estoy atascado procesos en línea de alguna manera?

Answer 1

chrome: // no funcionará porque la página está insertando en la que no se permite acceder a archivos fuera de su dominio (incluyendo cromo URI). Esto es cierto incluso si usted es el que inserta el enlace, porque el enlace todavía se ejecuta en el contexto de la página de destino. En su lugar, tiene dos opciones:

Puede definir un alias de protocolo de recurso en su manifiesto y luego utilizar un recurso URI para acceder a la CSS. Por ejemplo, la siguiente chrome.manifest le permitirá insertar el css como resource://myextresource/myfile.css:
content myext content/
resource myextresource content/css/
Ver MDN Chrome registration para obtener más información. También vea How can a Firefox extension inject a local css file into a webpage? para una pregunta similar.

O bien, puede añadir el CSS como USER_SHEET utilizando el siguiente. Esto hará que su CSS esté disponible en todas las páginas, así que asegúrese de utilizar selectores únicos. Una advertencia con este enfoque es que la página CSS tiene precedencia sobre las hojas de usuario. Puede utilizar! Importante para anular eso, pero la página CSS aún puede triunfar si lo hace! Importante también.

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