Come creare da zero temi Chrome personalizzati con JSON e Notepad

Creare da se un tema personalizzato per Google Chrome senza usare un servizio online o scaricandolo da fonte non sicura può essere un'attività divertente e creativa, perfetta per personalizzare la propria esperienza di navigazione.
Con la modalità sviluppatore di Chrome, puoi testare e installare il tuo tema, e modificarlo a piacimento senza dover pubblicare nulla sul Chrome Web Store.

Se sei interessato/a, ti fornisco un codice pronto all'uso, guidandoti passo passo nella creazione di un tema personalizzato con un buon contrasto di colore. Al termine, potrai aggiungere immagini di sfondo e modificarne colori e stili per personalizzarlo ulteriormente.

1) Vuoi provarci? Bene, per iniziare hai bisogno di un editor di testo. Puoi usare Notepad, Visual Studio Code, Sublime Text o qualsiasi editor tu preferisca.
2) Crea una cartella del progetto nel tuo computer dove andremo a salvare tutti i file necessari. Al suo interno andrà inserito il codice JSON che ho preparato per te e una cartella images con la tua immagine di sfondo.

Codice esempio e creazione del file manifest.json

3) All'interno della cartella progetto, crea un file chiamato manifest.json. Questo file è il cuore del tema, dove definisci i colori e gli elementi che caratterizzeranno l'interfaccia di Chrome.

Supponiamo che tu voglia usare Notepad (Blocco note di Windows) per scrivere il codice. In questo caso, dentro la cartella del progetto, clicca sul destro del mouse > seleziona la voce Nuovo > Documento di testo > rinominalo da "Nuovo documento di testo" a > manifest > doppio clic per aprire > incolla e salva il codice di esempio seguente:

Codice JSON da Copiare

{ "name": "Tema tutorial tantilink.net", "version": "1.0", "description": "Un tema scuro di esempio per Google Chrome", "manifest_version": 3, "theme": { "images": { "theme_ntp_background": "images/theme_ntp_background.png" }, "colors":{"frame":[20,20,20], "toolbar":[0,0,0], "tab_text":[255,255,255], "tab_background_text":[255,255,255], "bookmark_text":[243,26,26], "ntp_background":[255,255,255], "ntp_text":[255,255,255], "ntp_link":[255,255,255], "button_background":[236,7,7,1]}, "tints":{"buttons":[0,0,1]}, "properties":{"ntp_background_alignment":"bottom","ntp_background_repeat":"no-repeat"}}}

Dopo questa semplice operazione avrai un file chiamato manifest.txt.

4) Quando avrai finito di personalizzare il codice a seconda delle tue esigenze, cambia l'estensione del file passando da .txt a .json.
Per apportare ulteriori migliorie se non sei soddisfatto/a del risultato, cambia nuovamente l'estensione del file tornando al punto di partenza, cioè, da .json a .txt.

Spiegazione del codice

name: Questo campo specifica il nome del tema. Puoi cambiarlo per riflettere il carattere o il tema specifico del tuo design. Ad esempio: Tema Dragon Ball per Chrome.

version: Indica la versione del tema. È importante aggiornare questo numero ogni volta che si apportano modifiche significative, in modo da tenere traccia delle diverse versioni.

description: Fornisce una breve descrizione dell'argomento. Puoi personalizzarla per spiegare meglio il tuo design o il tuo intento se decidi di condividerlo.

manifest_version: Specifica la versione del formato manifest utilizzato. Attualmente Chrome utilizza la versione 3, quindi non è necessario modificarla.

theme: Contiene tutte le informazioni relative al tema, comprese le immagini e i colori.

images: Qui puoi definire l'immagine o le immagini utilizzate nel tema. Ad esempio, theme_ntp_background rappresenta l'immagine di sfondo per la nuova scheda.
Assicurati che il percorso dell'immagine sia corretto; se non è presente, il tema non si caricherà correttamente.

Se non vuoi usare una immagine di sfondo, elimina questa parte del codice:
"images": { "theme_ntp_background": "images/theme_ntp_background.png" },

colors: Questa sezione definisce i colori utilizzati nel tema. A tal proposito può tornati utile il mio Generatore colori e convertitore HEX in RGBA.

frame: Colore della cornice della finestra del browser, impostato su [20, 20, 20] per un grigio molto scuro.

toolbar: Colore della barra degli strumenti, impostato su [0, 0, 0] (nero).

tab_text: Colore del testo delle schede attive, impostato su [255, 255, 255] (bianco).

tab_background_text: Colore del testo delle schede inattive, anch'esso impostato su bianco.

bookmark_text: Colore del testo dei segnalibri, impostato su [243, 26, 26] (rosso).

ntp_background: Colore dello sfondo della nuova scheda, impostato su bianco.

ntp_text: Colore del testo nella nuova scheda, impostato su bianco.

ntp_link: Colore dei link nella nuova scheda, impostato su bianco.

button_background: Colore dello sfondo dei pulsanti, impostato su [236, 7, 7, 1] (rosso con opacità).

tints: Questa sezione consente di applicare una tinta sui pulsanti. button sè impostato su [0, 0, 1] applica una tinta blu. Modifica questi valori RGB cambiando il colore delle icone dei pulsanti.

properties: Questa sezione contiene le proprietà aggiuntive del tema.

ntp_background_alignment: Imposta l'allineamento dello sfondo della nuova scheda; in questo caso, è impostato su "bottom", che significa che lo sfondo si allinea alla parte inferiore della scheda.

ntp_background_repeat: Indica che lo sfondo non deve ripetersi, impostato su "no-repeat".

Installazione del tema Google Chrome in Modalità Sviluppatore

5) Una volta creata la cartella del tuo progetto con al suo interno il manifest.json e (eventualmente) aggiunto l'immagine di sfondo nella cartella chiamata images come detto prima, puoi testare il corretto funzionamento del tema in Google Chrome.

• Apri Chrome e vai all'indirizzo chrome://extensions (oppure clicca i tre puntini ⁝ in alto a destra > Estensioni > Gestisci estensioni).
• Attiva la modalità sviluppatore (pulsante in alto a destra).
• Seleziona Carica estensione non pacchettizzata.
• Cerca la cartella del tema e selezionala. Chrome caricherà automaticamente il tema.
• ✅ Il tuo tema personalizzato è ora installato! Puoi vedere le modifiche all'aspetto di Chrome e, se vuoi apportare ulteriori correzioni, ti basta aggiornare il file manifest.json seguendo la stessa procedura vista prima al punto 4 di questa guida.
  Se devi sostituire o migliorare anche l'immagine, ricordati che nome e percorso non deve mutare. Dopo ogni modifica clicca ancora su "Carica estensione non pacchettizzata" per renderla effettiva.

6) Se riesci a visualizzare correttamente il tuo nuovo tema, significa che tutto è andato come previsto. Dovresti vedere un nuovo file chiamato Cached Theme.pak dentro la stessa cartella principale del progetto.
Si tratta di un file di cache utilizzato da Google Chrome per memorizzare temporaneamente i dati relativi a un tema installato, contenente le risorse (come colori, immagini e tinte) in un formato ottimizzato per il caricamento rapido.

Possibili errori e rimedi

Archivio ~\Desktop\guida temi chrome\temi chrome\tema personalizzato per chrome Errore Impossibile caricare "C:\Users\AAA\Desktop\guida temi chrome\temi chrome\tema personalizzato per chrome\ theme_ntp_background.png" per il tema. Impossibile caricare il file manifest.

7) Se visualizzi un avviso di errore simile a questo, potrebbe essere dovuto a due cause principali:

Il percorso dell'immagine di sfondo: assicurati che l'immagine theme_ntp_background.png sia effettivamente presente nella stessa cartella del file manifest.json. Chrome non riesce a caricarla se non trova il file specificato o se ci sono errori nel percorso.
Verifica che quest'ultima si chiami esattamente come indicata nel file manifest.json, con la stessa estensione file.

Struttura del file manifest.json: verifica che questo sia ben formato. Gli errori di caricamento a volte derivano anche da problemi di formattazione, come virgolette mancanti o una sintassi JSON non corretta. Se hai modificato nuovamente il codice, controlla che l'estensione del file non sia rimasta .txt.

Condividi il tuo tema con Crea pacchetto estensione

9) La funzione "Crea pacchetto estensione" in Google Chrome serve a generare un file con estensione .crx a partire da un'estensione (o un tema) in formato cartella di sviluppo.
Questo tipo di estensione (viene utilizzata anche per estendere la funzionalità dei browser Internet Microsoft Edge e Firefox) è un pacchetto compresso che include tutti i file necessari (come il manifest.json, le immagini e gli script) e può essere facilmente distribuito o installato su altri browser Chrome.

Quando crei un pacchetto di un'estensione o un tema per la prima volta, Chrome genera automaticamente una chiave privata (in un file .pem) se non ne fornisci una tu stesso.
Questa chiave è essenziale per garantire che Chrome possa riconoscere e associare gli aggiornamenti futuri all'estensione originale.
Chrome aggiungerà questi due file all'interno della directory principale del tema.

Se vuoi apportare delle modifiche o aggiungere nuove funzionalità e creare così un aggiornamento, seleziona il file .pem originale quando usi la funzione "Crea pacchetto estensione". Questo garantisce che il pacchetto mantenga la stessa chiave di identificazione.

Nota: conserva il file .pem in un luogo sicuro. Chiunque disponga di questo file può firmare pacchetti con l'identità della tua estensione.

10) Per condividere il tuo tema con gli altri, distribuisci il file .crx. Questo contiene il pacchetto completo del tema.
Usando un tool online o un'app per estrarre il codice sorgente da un .crx, si potrà installare evitando possibili messaggi di errori (come - "CRX_REQUIRED_PROOF_MISSING") che si verificano quando Chrome richiede che siano installati direttamente dal Chrome Web Store per motivi di sicurezza, proteggendo in effetti gli utenti da installazioni non sicure.

Oppure, condividi la cartella del tema in .zip, escludendo il .crx e il .pem.
In entrambi i casi, per installare il tema si va sempre su chrome://extensions/ > pulsante modalità sviluppatore presente in alto a destra > Carica estensione non compressa > quindi si seleziona la cartella.

Rimuovere un tema di Chrome

Se si vuole rimuovere il tema personalizzato: Apri Chrome sul computer.
Apri Nuova scheda > clic sulla icona a forma di matita (Personalizza questa pagina) > Reimposta tema predefinito di Chrome.
Oppure:
In alto a sinistra della schermata, clicca su ⁝ Altro e poi scorri in basso fino a trovare ⚙️ Impostazioni.
Nella sezione "Aspetto" presente a destra della schermata > clicca sul pulsante Reimposta tema predefinito. Verrà nuovamente visualizzato il tema classico di Google Chrome.

Per oggi è tutto. Grazie per aver seguito questa piccola guida! Se hai riscontrato problemi o notato qualche errore nelle mie istruzioni, lascia un commento qui sotto: il tuo feedback è prezioso e mi aiuta a migliorare.
Se invece la guida ti è stata utile, condividila con amici o parenti interessati a personalizzare Google Chrome.
Ogni condivisione mi aiuta a raggiungere più persone e mi spinge a creare contenuti migliori.

Leggi anche: Creare un'estensione per Chrome da zero: bookmarks con PIN