LanguageEstensioni correlate:
Creare i propri Temi per Chrome
I temi di Google Chrome sono add-on preferiti dagli utenti e puoi trovarne migliaia in tutto il web, con la fonte più grande rappresentata dal Chrome Web Store.
Ma molti utenti curiosi vorrebbero creare i propri temi personali o addirittura condividerli con i loro amici e con il mondo esterno.
Questo piccolo tutorial ti mostrerà la struttura interna dei temi di Google e come puoi crearne uno tuo a partire da qualsiasi immagine.
Struttura dei Temi di Chrome
Un Tema di Chrome non è altro che un add-on che non contiene codice sorgente esteso o script e consiste fondamentalmente di due parti:
- immagini usate per il tema stesso
- un singolo file manifest.json che contiene parametri e impostazioni per formare il tema
Queste due parti sono poi confezionate in un unico file con estensione CRX.
Come preparare manualmente un Tema Google
Sicuramente ti servirà uno sfondo adatto che vuoi usare per il tuo tema e anche un'idea di base sull'intero tema. Ma ti serviranno anche diversi strumenti software per realizzarlo:
- Un editor di immagini. Usa qualsiasi programma ti piaccia, ci sono molti software disponibili. Anche il semplice Microsoft Paint andrà bene, ma naturalmente puoi usare strumenti professionali, come Adobe Photoshop o CorelDraw.
- Un editor di testo. Anche il Notepad base va bene, così come qualsiasi altro programma simile.
Una volta che hai tutto questo, segui semplicemente i passaggi qui sotto per creare il tuo tema Google Chrome personale.
Passo 1: Crea una directory con il nome del tema
Una delle prime cose che farai è creare una nuova directory per il tuo tema e nominarla come il tuo tema. Supponiamo "my_new_theme". All'interno di questa cartella crea un'altra chiamata "images", che conterrà tutte le immagini usate dal tuo nuovo tema.
Passo 2: Crea le immagini per il tuo tema
Per creare un tema funzionante ti serviranno quattro elementi base di immagine, o cinque, se vuoi aggiungere il tuo logo personale al tema, ma questo è puramente opzionale. Tutte le immagini usate nei temi di Google Chrome devono essere in formato file PNG.
Se hai le tue immagini in un altro formato, dovrai prima convertirle in PNG con qualsiasi software o strumenti online di conversione disponibili.
Ecco la lista di ogni elemento immagine con i requisiti appropriati:
Theme Frame (frame.png)
Questa immagine è usata per il bordo del tuo nuovo tema Google Chrome e come immagine di sfondo dei pulsanti "Close", "Minimize" e "Maximize". Se non vuoi usare questa immagine, il tema Chrome creato funzionerà come il tema Chrome predefinito e mostrerà la barra del titolo nativa del sistema operativo.
L'immagine theme frame necessita di un'altezza minima di 30px senza limiti sulla larghezza. Questo elemento è generalmente realizzato con i colori più scuri.
Theme Toolbar (toolbar.png)
Questo elemento del tema viene visualizzato come sfondo dei pulsanti "Forward", "Back" e "Refresh" e anche come barra degli strumenti delle estensioni. Rappresenta sia la scheda attuale che la toolbar.
Ha bisogno di un'altezza minima di 120px senza limitazioni sulla larghezza.
Theme Tab Background (tab.png)
Usato per le schede inattive se più schede sono aperte contemporaneamente. Ha un requisito di altezza minima di 65px e nessuna limitazione sulla larghezza.
New Tab Page Background (background.png)
Questa rappresenterà l'immagine principale visualizzata quando si apre una nuova scheda. La dimensione minima consigliata è 800x600, ma per un aspetto migliore, usa sfondi che corrispondano alla risoluzione dello schermo sul quale verrà usato il tema. Questa immagine dovrebbe usare colori chiari per una migliore presentazione visiva.
Theme Attribution (theme_ntp_attribution.png)
Il logo del creatore, viene mostrato nell'angolo in basso a destra del tema Google Chrome. È puramente opzionale.
Una volta pronti tutti gli elementi immagine, spostali nella directory "images" che hai creato nel passo 1, quindi la cartella dovrebbe contenere 4-5 immagini.
Passo 3: Crea il file manifest
Ogni add-on di Google Chrome che può essere installato come applicazione web o tema ha il proprio file "manifest.json". Questo file fornisce al browser informazioni sul tema.
Puoi trovare più informazioni sul formato file JSON nel nostro database.
Il manifest contiene codice per 4 cose differenti: nome, immagini, colori, toni e proprietà. Un esempio di codice nel file manifest.json è mostrato qui sotto.
|
{ "version": "1.0", "name": "my_new_theme", "theme": { "images" : { "theme_frame" : "images/frame.png", "theme_toolbar" : "images/toolbar.png", "theme_ntp_background" : "images/background.png", "theme_tab_background" : "images/tab.png", "theme_ntp_attribution" : "images/theme_ntp_attribution.png" }, "colors" : { "ntp_link": [255,255,255], "ntp_text": [255,255,255], "ntp_section_link": [255,255,255], "ntp_section_text": [10 , 17 , 27], "ntp_background": [10 , 17 , 27], "frame": [10 , 17 , 27], "toolbar": [10 , 17 , 27], "tab_text": [255,255,255], "tab_background_text": [10 , 17 , 27], "bookmark_text": [255,255,255] }, "tints" : { "buttons" : [0.33, 0.5, 0.47], "frame_inactive": [0.50, 0.50, 0.50], "frame_incognito_inactive": [0.50, 0.50, 0.50] }, "properties" : { "ntp_background_alignment" : "bottom", "ntp_background_repeat": "no-repeat" } } } |
Basta aprire un nuovo file in notepad, copiare e incollare il codice e salvare con il nome manifest. Dopodiché, rinomina l'estensione del file da txt a json.
Adesso che hai creato il tuo file manifest.json, vediamo cosa significa ogni sezione, cosa fa e cosa puoi modificare.
Nome
Questo è il nome del tuo nuovo tema Google Chrome. Il nome nel file manifest.json dovrebbe corrispondere al nome del tema scritto nel Passo 1.
Immagini
Le immagini del Passo 2 della nostra guida sono definite in questa sezione del file manifest.json. Se vuoi cambiare il nome del file o la cartella delle tue immagini, devi fare una corrispondente modifica anche nel file manifest.json.
Colori
Ciascun elemento in questa sezione definisce i colori usati nel tema. Ci sono solo un paio di cose da ricordare sui colori:
- Il colore del testo del pulsante della barra di download è lo stesso del colore del testo dei preferiti.
- Il colore dello sfondo della barra di stato è uguale al colore della toolbar che scegli.
- Il colore del testo della barra di stato è uguale al colore del testo della scheda che scegli.
Toni
L'elemento tint specifica la tinta di colore per tutte le icone dentro tutti i pulsanti della toolbar (avanti, indietro, aggiorna, ecc.). Ogni tinta ha un valore decimale da 0 a 1 oppure -1. Il valore -1 significa che non verranno fatti cambiamenti al colore di quell'elemento. I valori tint sono organizzati come [Hue, Saturation, Luminance] e puoi usare valori come ad esempio 0.256, 0.2, -0.4 per definire il colore. Puoi adattare i valori per far armonizzare o far risaltare i pulsanti.
Proprietà
La sezione proprietà nel file manifest.json viene usata per definire le impostazioni per l'immagine di sfondo principale. L'immagine di sfondo può essere allineata in alto, in basso o al centro del browser e puoi scegliere se ripeterla sull'asse x o sull'asse y, o per nulla.
Passo 4: Impacchettare e visualizzare in anteprima il tuo tema
Adesso dovresti avere pronte le tue immagini nella directory "my_new_theme/images" e un file manifest.json nella directory "my_new_theme".
Per testare il tuo nuovo tema, apri il browser Google Chrome e digita "chrome://extensions" nella barra degli indirizzi e premi invio.
Una volta dentro, clicca sul "+" accanto al link "Modalità sviluppatore" sulla destra. Ora vedrai comparire un paio di opzioni sulla pagina. Clicca su "Carica estensione non pacchettizzata" e sfoglia il tuo computer fino alla directory "my_new_theme". Selezionala e premi OK. Se un corretto file manifest.json è presente in quella cartella, Chrome caricherà il tuo nuovo tema. Ora controlla il browser per vedere se tutto è a posto.
Puoi ripetere questo processo finché perfezioni il tuo Google Theme. Una volta soddisfatto del tuo tema Google Chrome personalizzato, premi il pulsante "Pacchetta estensione" e Chrome creerà il tema e lo salverà nella directory "my_new_theme" con estensione file CRX. Verrà creato anche un file con estensione PEM, che è una chiave privata per il tuo tema Google, che ti permetterà di aggiornare questa estensione in futuro, se caricherai il tuo tema nella Chrome Extensions Gallery.
Se tutto va bene, Google Chrome ti comunicherà che i file .crx e .pem sono stati creati e mostrerà anche la posizione di questi nuovi file. Dopo aver creato un paio di temi Google Chrome, vedrai che non è poi così difficile.
Come creare Temi per Chrome più facilmente
Puoi ovviamente procedere più velocemente se usi alcuni degli strumenti dedicati per i Temi di Chrome. Uno di questi strumenti era, ora discontinuato, il Theme Creator. Puoi ancora scaricarlo dallo store web e usarlo, ma non è più supportato da Google e potrebbe avere dei malfunzionamenti. Rimane comunque uno dei modi più comodi per creare velocemente nuovi Temi per Chrome.