Come usi Chrome Extensions per modificare i CSS di un sito web?

Question

Sto cercando di creare un'estensione per l'uso personale e possibilmente personale amico e questo semplicemente cambia alcuni colori che vengono visualizzati su un sito Web che visito. Io uso Reddit Enhancement Suite, che ha opzioni per la "Modalità notte" che cambia completamente l'aspetto del colore di Reddit.

Vorrei sapere come modificare o inserire codice CSS in questo sito Web in modo che i colori utilizzati nel sito Web siano quelli che vorrei fossero quando visualizzo la pagina. Intendiamoci, questo è ovviamente solo nel mio browser o in un altro browser Chrome che utilizza la mia estensione.

Answer 1

Si può fare esattamente come hai detto: puoi inserire un file CSS o un codice nella pagina. The easiest way is through the manifest (look at the CSS property).

Devi solo completare il tuo manifest.json affinché Chrome sappia in quali pagine deve inserire il tuo file CSS.

Se si desidera decidere in modo programmatico quando inserire il CSS, you can use chrome.tabs.insertCSS(), in cui è possibile inserire un file CSS o solo il codice come stringa.

Answer 2

Esistono già delle estensioni per questo. Quello che uso si chiama Stylish, che modifica solo l'aspetto usando solo CSS3 e non html. Ci sono anche altre estensioni, fai alcune ricerche su google e ne troverai altre.

Answer 3

Invece di un'estensione, è possibile farlo anche in un user script. Quindi puoi semplicemente usare GM_addStyle, proprio come con gli script di Greasemonkey. È molto più semplice da scrivere e più leggero in termini di utilizzo della memoria.