Immagine 1 di 4
Scrivere un'estensione per Chrome non è così complicato come potresti immaginare a prima vista.
Infatti, se ti sei già dilettato con JavaScript e HTML, avrai a tua disposizione la maggior parte delle conoscenze e degli strumenti. Tutto quello che devi sapere è come metterlo insieme, in modo che Chrome possa interpretarlo e utilizzarlo.
Anche se sei nuovo nella programmazione, sarai in grado di seguire questo semplice tutorial e alla fine lo saprai hanno creato un'estensione che consente di cercare rapidamente i fatti utilizzando l'enciclopedia open source, Wikipedia.
Tutto ciò di cui hai bisogno è un editor di testo - abbiamo utilizzato il nostro attuale preferito, Sublime Text - un browser Google Chrome e un'applicazione di pittura come Paint. NET per progettare l'icona per la tua estensione.
Scrivere un'estensione per Chrome: le basi
Esistono due diversi tipi di estensione di Chrome: una "azione della pagina" e una "azione del browser". Le icone per le azioni della pagina vengono visualizzate nella barra degli indirizzi della omnibox di Chrome e influiscono solo sulla pagina caricata nella scheda attualmente visualizzata. Un esempio di azione di una pagina è un pulsante che ti consente di iscriverti al feed RSS di una pagina.
Le azioni del browser, invece, funzionano indipendentemente dalla pagina caricata e le relative icone vengono visualizzate all'esterno della omnibox. La nostra estensione Wikipedia è un'azione del browser, un'estensione che vogliamo sia disponibile indipendentemente dalla pagina Web o dalla scheda aperta.
Il primo passo per creare la tua estensione di Chrome è semplice: crea una cartella in cui possono vivere tutti i file. Questo può essere ovunque sul tuo PC o laptop, ma ha senso metterlo da qualche parte che puoi raggiungere facilmente, come il desktop o la cartella Documenti.
Successivamente, è necessario creare i file di testo che conterranno il codice. Stiamo creando l'estensione Chrome più semplice possibile, quindi tutto ciò di cui abbiamo bisogno è un file manifest, un file HTML e un file PNG.
Crea due nuovi file di testo e rinominali come segue:
manifest.json
displaypane.html
Cosa fanno questi file? Il file manifest è un foglio di istruzioni. Dice a Chrome che tipo di estensione è, il suo nome, la versione del formato di file manifest che stai utilizzando, più altre informazioni importanti, come dove si trova l'icona del pulsante e i vari file di cui ha bisogno l'estensione correre. Il file HTML contiene il codice che indica all'estensione cosa fare o visualizzare quando viene cliccato.
Il file PNG è un'immagine di 19 x 19 pixel che apparirà sul pulsante dell'estensione nella barra degli strumenti. È meglio mantenere la tua icona semplice. Abbiamo usato una singola lettera "W" e creato l'icona in Paint. NETTO.
Una volta che hai progettato la tua immagine, puoi salvarla nella cartella, nominando il file icon.png, e poi andare avanti con il popolamento dei file di testo con il codice che ti serve. Puoi anche creare un'immagine di 38 x 38 pixel se non vuoi che l'icona appaia sfocata sui display ad alta risoluzione.
Scrivere un'estensione per Chrome: il codice
Il file manifest è costruito utilizzando JavaScript Object Notation (JSON), che è un sottoinsieme del linguaggio di programmazione JavaScript. Come puoi vedere dal nostro qui sotto, i file manifest possono essere piuttosto semplici. Contengono un blocco di codice, racchiuso tra parentesi graffe, che include una serie di impostazioni,
o "campi".
Gli unici campi obbligatori sono la versione manifest e il nome che puoi vedere in cima al nostro blocco di codice. Nel nostro manifest abbiamo aggiunto alcuni extra. C'è un campo della descrizione, un campo del numero di versione e abbiamo anche detto a Chrome che il tipo di estensione è un'azione del browser.
