Inserimento di CSS con un'estensione per Firefox

Question

Sto costruendo un'estensione per Firefox che aggiunge elementi HTML a determinate pagine di un sito web. Voglio averlo inserire un file CSS personalizzato per lo stile di quegli elementi. Funziona se inserisco i tag con il CSS direttamente nella pagina, ma questa è una soluzione tutt'altro che ideale.

Esiste comunque la possibilità di caricare e analizzare un file CSS, come se avessi usato il tag nell'intestazione, o sono bloccato in qualche modo ad inserirlo?

Answer 1

chrome: // non funziona perché la pagina in cui si sta inserendo non è autorizzata ad accedere a file al di fuori del dominio (compresi gli URI di Chrome). Questo è vero anche tu sei quello che inserisce il link, perché il link è ancora eseguito nel contesto della pagina di destinazione. Invece hai due opzioni:

È possibile definire un alias del protocollo risorsa nel manifest e quindi utilizzare un URI di risorsa per accedere al CSS. Ad esempio, il seguente chrome.manifest vi permetterà di inserire il css come resource://myextresource/myfile.css:
content myext content/
resource myextresource content/css/
Vedi MDN Chrome registration per maggiori informazioni. Vedi anche How can a Firefox extension inject a local css file into a webpage? per una domanda simile.

Oppure, è possibile aggiungere il CSS come USER_SHEET utilizzando quanto segue. Ciò renderà il tuo CSS disponibile su tutte le pagine, quindi assicurati di utilizzare selettori davvero unici. Un avvertimento con questo approccio è che la pagina CSS ha la precedenza sui fogli degli utenti. È possibile utilizzare! Importante per sovrascriverlo, ma la pagina CSS può ancora trionfare se utilizza! Anche importante.

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