twitter cststrap css scontri mentre in estensioni cromo

Question

Sto usando bootstrap per un'estensione di cromo che sto scrivendo. Quando vengono importati come script di contenuto, i CSS sembrano entrare in conflitto con molti siti che sto visualizzando (anche nella pagina dei risultati di ricerca di Google).

Mi chiedo se c'è qualcosa che posso fare per adattare questo agli elementi dom inietti usando lo script di contenuto?

Answer 1

La soluzione è utilizzare <style scoped>.

In sostanza, consente di applicare uno stile a un nodo DOM e ai relativi figli, ma non ai relativi nodi parentali. C'è un bell'articolo su CSS-Tricks che spiega come usarlo.

Il problema è che non è supportato molto bene, anche in Chrome, quindi sarà necessario utilizzare un polyfill jQuery. Questo è fondamentalmente un plugin jQuery che simula la funzionalità che ti aspetti da <style scoped>.

Ecco un lavoro JSFiddle facendo esattamente questo utilizzando Bootstrap.

Ecco un esempio di come è possibile implementare nel proprio interno:

content_script.js:

$.scoped(); // Initialize the plugin 
... 
bootstrapped = document.createElement("div"); 
bootstrapped.innerHTML = "<style scoped>"; 
bootstrapped.innerHTML += "@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');"; 
bootstrapped.innerHTML += "</style>"; 
document.body.appendChild(bootstrapped);  
... 
document.body.appendChild(myDOM); // Will not possess Bootstrap styles 
bootstrapped.appendChild(myDOM); // Will possess Bootstrap styles 

Per il momento, assicurarsi di includere jQuery nella tua pagina, così come il plugin mirino:

"content_scripts": [ { 
    "js": [ "jquery.min.js", "jquery.scoped.min.js", "content_script.js" ], 
    "matches": [ "http://*" ] 
}]