Modifica permanentment el disseny de qualsevol web aprofitant la injecció cosmètica de uBlock Origin

Fa uns mesos vaig escriure un article en què explicava com canviar temporalment el disseny de qualsevol component del navegador Vivaldi. Temporalment. I components del navegador. Avui explicaré com fer retocs permanents a les pàgines web, i per això aprofitarem la capacitat que té uBlock Origin, instal·lat a Firefox i Chromium per defecte en algunes distribucions Linux, de fer canvis «cosmètics». Ho fa com tot, injectant informació a les pàgines web, però tot local.

Per fer aquests canvis, és necessari saber HTML i CSS, i també com utilitzar les eines del desenvolupador. Bàsicament indicarem quins canvis fer a quines pàgines web i sobre quins elements, i el resultat pot ser com el de la captura de capçalera: obtenir el nostre propi tema fosc per a LinuxAdictes. Pot quedar millor, però també caldria fer molta més feina amb els selectors (més informació, a DND).

Passos a seguir per modificar el CSS amb uBlock

Abans de continuar, he de dir que jo les proves les he fet amb uBlock Origin, però també hauria de funcionar en qualsevol extensió d'aquest tipus que tingui aquest apartat de «cosmètics». És aquest el que fa modificacions al CSS i el que ens permetrà incloure les nostres pròpies regles. No funciona, per exemple, a l'opció nativa de Vivaldi, però sí a la de Brave si se sap com afegir-les.

Explicat això, això és el que he afegit perquè es vegi això de la captura de capçalera:

linuxadictos.com##html:style(color:white !important; background-color:black !important)
linuxadictos.com##h1,h2,h3,h4,h5,h6:style(color:white !important;)
linuxadictos.com##a:style(color:white !important;)

Del codi:

• ## és el que indica que el darrere és un selector. Si el que volem seleccionar és un ID, hi haurà d'haver tres coixinets, però perquè el tercer és el de l'ID. En aquests casos, tot són selectors d'etiquetes i les etiquetes no porten res al davant. Per a més informació, un cop més us remet a l'enllaç de MDN.
• Les etiquetes són les seleccions, i en aquests exemples hi ha tot (html), les etiquetes de títol (h1-6) i les dels enllaços (a).
• Per indicar un estil, després hem de posar :style.
• Les regles van entre parèntesis, i no entre claus com s'escriuen a CSS real.

I això seria tot, encara que es pot complicar molt més si es volen fer més canvis i millors. Com que les regles estan en una extensió que s'encarrega de fer canvis a les pàgines web, en arribar a aquestes regles aplicarà els canvis. I ja se m'oblidava, que res del descrit serveix si no indiquem on van aquests canvis: van a la configuració de l'extensió i a l'apartat «Els meus filtres». Una mica el mateix a Brave.

Hi ha alguna web el disseny de la qual no t'agrada? Ara tens la solució.