Iscriviti alla newsletter per rimanere aggiornato

inserisci il tuo indirizzo Email

    Subscribe to newsletter - tutte le categorie feed

    Iscriviti alla newsletter per rimanere aggiornato
    inserisci il tuo indirizzo Email »»»

  • Firefox 57 Quantum: personalizzare l’interfaccia utente con i file userChrome.css e userContent.css

    Mozilla Firefox 57 non permette di utilizzare addon per cambiare l’aspetto del browser, è possibile farlo attraverso il file userChrome.css

    Il mio primo applicativo alternativo al classico Internet Explorer è stato Opera Browser. Un browser all’epoca davvero rivoluzionario per chi come me, aveva la necessità, non solo di navigare in sicurezza (purtroppo Internet Explorer era pieno di bug pericolosi!), ma anche di visualizzare e modificare il codice interno, quello che si "nasconde" dietro alle pagine dei siti web e che permette di creare gli articoli così come li vediamo normalmente. Uno strumento utile ai programmatori di siti web.

    Successivamente, mano mano che Internet diveniva sempre più di uso comune (ebbene sì, oggi sembra strano, ma c’è stato un tempo in cui eravamo pochi naviganti solitari), realizzare pagine web diventava sempre più complicato per il fatto che nonostante le indicazioni del World Wide Web Consortium (W3C), l’ente di riferimento per la compatibilità nel web, ogni browser faceva un po' come gli pareva, mostrando le pagine a modo suo: puoi immaginare quante difficoltà ogni volta che si doveva pubblicare un nuovo sito!

    Poi sono arrivati gli smartphone, quindi, oltre alle incompatibilità tra browser, si andavano ad aggiungere anche quelle fra browser e tipologia di dispositivo su cui veniva utilizzato: quindi poteva capitare che Internet Explorer visualizzasse la pagina bene sul PC, ma allo stesso tempo incasinava tutto se utilizzato sullo smartphone. Moltiplicate le possibilità, browser X dispositivi (e i loro relativi sistemi operativi) e vi accorgerete che quel periodo, per i webmaster (e non solo), era senza dubbio un vero grattacapo!

    Mentre gli altri browser bene o male si aggiornavano e iniziavano ad equipararsi, il più terribile fra tutti è sempre stato proprio Internet Explorer che oltretutto, nonostante le numerose critiche, è rimasto vivo e vegeto proprio nelle versioni più problematiche. Si perdeva il sonno cercando continue patch (soluzioni alternative), per riuscire a far si che quel maledetto titolo apparisse lì dove doveva apparire o per evitare che il pulsante sconfinasse andando a sovrapporsi ad altre parti della pagina. Un calvario durato tanti anni fino a quando Microsoft è stata sanzionata perché, inserendo il suo browser proprietario nel suo Sistema Operativo (da windows 95!), in regime di monopolio, non permetteva agli altri browser di emergere come avrebbero potuto.

    Cercando quindi lo strumento adatto che mi aiutasse nelle mie attività di creazione siti, alla fine, la scelta è ricaduta sul browser Mozilla Firefox che uso da molti anni con soddisfazione, per diversi motivi: oltre perché ovviamente incorpora tutti gli “attrezzi del mestiere”, anche perché è un valido prodotto generato da codice Open Source, creato dagli utenti, per gli utenti.

    Come ogni browser che si rispetti, anche Firefox offre la possibilità di aumentare le funzioni disponibili tramite plugin, add-ons o webExtensions: pezzi di codice aggiuntivo da installare a parte. Attraverso questo sistema, chiunque può personalizzare il proprio browser fino ad ottenere il perfetto connubio fra qualità e versatilità.

    Ovviamente, da vero appassionato, non potevo esimermi nel partecipare allo sviluppo di funzioni aggiuntive, ed infatti ho realizzato un'estensione che, leggendo i numeri di download (>42.000) e di utilizzatori giornalieri (>7.000), sta avendo un discreto successo, probabilmente perché ritenuta utile: si tratta di un motore di ricerca avanzata per i Social Network.

    L'esigenza da cui è scaturita l'idea di realizzare Secret Revealer - Social Advanced Search Engine (questo il nome del mio addon) è stata quella di capire cosa avessi pubblicato in tutti questi anni sui vari Social Network, per primo Facebook: mi serviva uno strumento facile e veloce per andare a rintracciare foto, articoli e post antichi.

    Comunque, anche se la prima impressione può sembrare quella di essere uno strumento adatto per gli stalker, in realtà l'obiettivo per cui l'ho realizzato è proprio quello di difendere la privacy delle persone. Infatti, se uno è consapevole di quali sono i dati resi pubblici, può correre ai ripari ed eliminare o modificare ciò che non ritiene debba essere mostrato. Il fatto è che chi vuole 'curiosare' sa come farlo, invece ora con il mio addon, tutti possono essere maggiormente consapevoli delle informazioni private che li riguardano.

    Uno strumento utile anche per chi cerca lavoro, perché utilizzandolo, può andare a modificare/eliminare/nascondere i post che ritiene poco 'onorevoli' e che potrebbero far storcere il naso a qualche possibile datore di lavoro che capitasse sulle sue pagine pubbliche.

    Un'altra funzione, altrettanto valida, è senz'altro quella di utilizzare Secret Revealer per capire se la persona che si vuole assumere (o con cui si vuole collaborare), è in linea con le nostre aspettative oppure no. Tanto più avendo la possibilità di mettere a confronto due profili e scoprire cosa hanno in comune: luoghi visitati, foto in cui sono taggati, gruppi a cui si è iscritti... ecc.

    Anche se esistono strumenti simili, l'unicità di Secret Revealer sta nell'essere un pannello sempre disponibile e a portata di click: quando non serve più, basta cliccare sull'iconcina e scompare, pronto a ricomparire in qualsiasi momento.

    Ho scoperto con piacere che sul sito aranzulla.it è stato pubblicato un tutorial relativo proprio alla mia webExtension "Secret Revealer - Social Advanced Search Engine" per Firefox.

    Per ora, ne esistono TRE VERSIONI, una per ciascun browser:

    MOZILLA FIREFOX (più limitato)
    [ scarica la webExtension Secret Revealer - Social Advanced Search Engine per Mozilla Firefox ]

    GOOGLE CHROME (più evoluto!)
    [ scarica la webExtension Secret Revealer - Social Advanced Search Engine per Google Chrome ]

    OPERA BROWSER (più evoluto!)
    [ scarica la webExtension Secret Revealer - Social Advanced Search Engine per Opera Browser ]

    Ti faccio notare che la versione per Firefox, per ora, è più limitata nelle funzionalità rispetto alle altre. Ti suggerisco quindi di scaricare la versione più evoluta, quella per Google Chrome e per Opera Browser: ecco qui il link al video per capire come funziona Secret Revealer – Social Advanced Search Engine

    Con la versione 57 (Quantum), Mozilla Firefox ha abbandonato definitivamente la tecnologia con cui venivano creati gli addon in precedenza per allinearsi agli altri browser che già utilizzano da tempo le cosidette webExtensions. In soldoni quello che cambia è che mentre gli addon potevano accedere in modo approfondito alle funzioni vitali del browser, mettendo a volte a rischio hacker l’utente, con le webExstensions questo non si può più fare ma si ottiene il vantaggio di ottenere una quantità maggiore di estensioni per il proprio browser: motivo per cui da una parte si acquista in sicurezza ma dall’altra si perde in funzionalità.

    Ad esempio ora non è più possibile utilizzare un addon per modificare l’aspetto del browser (come faceva molto bene il famoso Classic Theme Restorer), ma per farlo è necessario mettere mano alla configurazione di Mozilla Firefox eseguendo alcuni passaggi che non sono proprio alla portata di tutti, motivo per cui ho deciso di scrivere questa guida.

    Seguendola potrai ovviare anche al fastidioso comportamento della scomparsa della X di chiusura nelle Tab, quando si supera un certo numero delle stesse: cosa che trovo davvero seccante!

    Dicevamo quindi, che dalla versione 57 (Quantum) di Mozilla Firefox, l'unico modo per modificare l’interfaccia utente è l'aggiunta di codice CSS personalizzato nei file userChrome.css e userContent.css all'interno della cartella dove è contenuto il profilo utilizzato dal browser. Il grande limite è che con il solo codice CSS non si possono creare elementi, pulsanti o barre degli strumenti completamente nuovi. Si possono solo modificare gli elementi dell’interfaccia utente, già presenti.

    Una volta scaricato Mozilla Firefox in italiano sul proprio PC, dove trovare la cartella del profilo di Firefox e qual è la posizione corretta per gli stili utente?


    1. Considera che i nomi dei profili sono diversi per tutti quindi per trovare la cartella del tuo profilo, digita nalla barra degli indirizzi quanto segue:

    about:support > Cartella del profilo > Apri Cartella

    oppure

    about:profiles > Cartella radice > Apri Cartella

    oppure

    digita Shift+F2 per aprire la riga di comando di Firefox, quindi immettere il seguente comando:

    folder openprofile

    2. Gli stili utente si trovano nella cartella \chrome\ . Se non esiste, creala. Dovrebbe apparire come questa di seguito:

    \ NOME DELLA CARTELLA DEL PROFILO UTENTE \chrome\

    3. Copia il testo segunte:

    @namespace html url("http://www.w3.org/1999/xhtml");
    /* Show Tab Close buttons only when hovered */
    #tabbrowser-tabs > .tabbrowser-tab:not([pinned="true"]) > .tab-stack > .tab-content > .tab-close-button {
    visibility: collapse !important;
    opacity: 0 !important;
    transition: all 250ms ease-in-out !important;
    }
    #tabbrowser-tabs > .tabbrowser-tab:not([pinned="true"]):hover > .tab-stack > .tab-content > .tab-close-button {
    visibility: visible !important;
    opacity: 1 !important;
    transition: all 250ms ease-in-out !important;
    }
    #tabbrowser-tabs > .tabbrowser-tab:not([pinned="true"]) > .tab-stack > .tab-content > .tab-close-button {
    display: -moz-box !important;
    }

    4. Apri un editor di testo (anche il classico Notepad va bene) e incollaci il testo appena copiato.

    5. Vai su:

    Menu File -> Salva Con Nome

    e salva il tutto nel file che nominerai 'userChrome.css' dentro alla cartellina \chrome\ creata seguendo i passi precedenti. Ora il percorso dovrebbe apparire come di seguito:

    \ NOME DELLA CARTELLA DEL PROFILO UTENTE \chrome\userChrome.css

    6. Riavvia Firefox affinché le modifiche abbiano effetto.


    A questo punto non ci saranno più le X di chiusura nelle Tab, ma appena scorrerai con il mouse sopra ognuna di esse apparirà, consentendoti di chiederle.

    In un colpo solo abbiamo risolto il problema, migliorato l’esperienza utente e scoperto come fare a personalizzare il nostro Mozilla Firefox.

    Per scoprire ulteriori modifiche che puoi apportare (anche al file userContent.css) ti consiglio questi link:

    Siti delle community

    Repository di codice

    Spero di esserti stato utile. Alla prossima.


    Andrea Millozzi's picture
    About the Author

    Appassionato di informatica fin da giovanissimo ho iniziato a programmare da autodidatta. Da allora il mio entusiasmo e la mia curiosità non hanno fatto che aumentare... Oggi mi diletto a realizzare siti internet, App e progetti hardware con Arduino, Raspberry Pi & Co.