Wprowadzanie pliku CSS do strony internetowej za pomocą rozszerzenia firefox

Question

Piszę rozszerzenie przeglądarki Firefox i używam ich dodatku SDK; ale nie mogę wymyślić, jak wstrzyknąć lokalny plik CSS z folderu danych na stronę. Byłoby wspaniale, gdyby był sposób, aby to zrobić za pomocą pakietu page_mod.

Answer 1

W dodatku na SDK 1.14 jest eksperymentalny (API mogą ulec zmianie) wsparcie to w module page-mod:

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

Zobacz Modifying Web Pages Based on URL dla rozbudowanego przewodnika po użyciu page-mod.

Istnieje a page on the Addon SDK's wiki omawianie problemów z bieżącą implementacją, chociaż wydaje się nieco przestarzałe.

Pod maską używa nsIDOMWindowUtils .loadSheet(), aby dodać arkusz stylów bez dotykania DOM strony. (Ten interfejs API została dodana w Firefoksie 18, patrz bug 737003. Przedtem trzeba było użyć nsIStyleSheetService który był podobny, ale nie kartę-specyficzny.)

---

Przed że można użyć treści skryptu strony-mod do wstawienia element łącza lub stylu (example). [edytuj] dzięki komentarzowi lwburka, oto bardziej rozbudowany rozbudowany opis w Greasemonkey Hacks: Tips & Tools for Remixing the Web with Firefox By Mark Pilgrim: "Alter a Page's Style" section.

Answer 2

Aby wstawić CSS z main.js można teraz używać "page-mod":

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

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