Inyectar un archivo CSS en una página web a través de la extensión de Firefox

Question

Estoy escribiendo una extensión de Firefox y estoy usando su Add-on SDK; pero no puedo imaginar cómo inyectar un archivo CSS local desde la carpeta de datos a la página web. Sería genial si hubiera una forma de hacerlo a través del paquete page_mod.

Answer 1

A partir del Add-on SDK 1.14 no experimental (API puede cambiar) el apoyo para esto en el módulo page-mod:

var pageMod = require("sdk/page-mod").PageMod({ 
    include: "*", 
    contentStyleFile: require("sdk/self").data.url("my-style.css") 
}); 

Ver Modifying Web Pages Based on URL para una guía elaborada para el uso de la página-mod.

Hay a page on the Addon SDK's wiki discutiendo problemas con la implementación actual, aunque parece un poco desactualizado.

Debajo del capó se usa nsIDOMWindowUtils .loadSheet() para agregar la hoja de estilo sin tocar el DOM de la página. (Esta API se añadió en Firefox 18, ver bug 737003. Antes de que se tenía que utilizar nsIStyleSheetService que era similar, pero no-ficha específica.)

---

Antes de que se puede utilizar el script de contenido la de la página-mod para insertar el elemento de enlace o estilo (example). [edit] gracias al comentario de lwburk, aquí hay una descripción elaborada más elaborada en Greasemonkey Hacks: Tips & Tools for Remixing the Web with Firefox By Mark Pilgrim: "Alter a Page's Style" section.

Answer 2

Para insertar CSS de main.js ahora se puede utilizar "página-mod":

var data = require("sdk/self").data; 
var pageMod = require("sdk/page-mod"); 

pageMod.PageMod({ 
    include: "*.org", 
    contentStyleFile: data.url("my-page-mod.css") 
});