Come rimuovo un file CSS iniettato?

Question

Io uso chrome.tabs.insertCSS(null, {file: "style.css"}); per inserire un file css nella pagina, e funziona perfettamente.

• Ma c'è un modo per rimuovere il file?
• Inoltre, se si inietta un altro file denominato style.css, sostituisce il primo?
• E a proposito, dove posso vedere i file CSS iniettati? Gli script possono essere visualizzati in "Sources/Content Scripts" (degli strumenti di sviluppo di Chrome), ma non riesco a trovare i file CSS.

Answer 1

Non sono sicuro di quale sia il contesto di questa domanda, ma sembra che forse vogliate evidenziare determinati elementi della pagina in un determinato modo ed essere in grado di attivare quella evidenziazione personalizzata. (Piuttosto che elementi stilistici proprio interno creerebbe)

Dal momento che non si può effettivamente rimuovere il file CSS o semplicemente cancellarlo con l'aggiunta di un file con lo stesso nome, suggerisco il seguente:

• avvolgere il vostro stili personalizzati in qualcosa come body.JMaylinCustomStyles
• utilizzare JavaScript per aggiungere o rimuovere la classe JMaylinCustomStyles all'elemento body.
• non v'è alcun punto 3.

I vantaggi sono che non aggiungere molto lavoro sulla parte superiore di quello che hai, che non c'è bisogno di capire come ignorare i vostri stili personalizzati in un secondo foglio di stile (è sempre molto fastidioso e soggetto a errori) e guadagna un po 'anche in CSS specificity, quindi è più probabile che i tuoi stili vengano applicati.

Nota che il modo migliore per "avvolgere" gli stili sarebbe quella di utilizzare Sass o LESS perché si può letteralmente aggiungere body.JMaylinCustomStyles { nella parte superiore del file e } in fondo.

Answer 2

Non v'è alcuna API per rimuovere il file CSS https://developer.chrome.com/extensions/tabs.html

La cosa migliore sarebbe probabilmente inserire un altro file che sostituirà tutte le impostazioni CSS dal primo file inserito.

Answer 3

Ho appena incontrato lo stesso problema e ho pensato di condividere la mia soluzione. Sto chiamando uno script contenuti che poi caricare o scaricare il CSS in questo modo:

function loadCSS(file) { 
    var link = document.createElement("link"); 
    link.href = chrome.extension.getURL(file + '.css'); 
    link.id = file; 
    link.type = "text/css"; 
    link.rel = "stylesheet"; 
    document.getElementsByTagName("head")[0].appendChild(link); 
} 

function unloadCSS(file) { 
    var cssNode = document.getElementById(file); 
    cssNode && cssNode.parentNode.removeChild(cssNode); 
} 

La logica per la quale di quelli da chiamare è anche nello script contenuti, sulla base dei dati in chrome.storage. Quindi tutto ciò che devi fare è iniettare lo script e aggiungerà/rimuoverà il css.

Il mio caso è in realtà un po 'più complesso, quindi sono sempre caricato lo script del contenuto e l'invio di un messaggio per caricare o scaricare il css. Ma questo ha il sovraccarico di caricare il file su ogni caricamento della pagina.