Estensioni per Chrome: come cominciare

Questo tutorial vi guiderà attraverso la creazione di una semplice estensione per Chrome. Potrai aggiungere un’icona a Google Chrome che, se cliccata, mostrerà una pagina generata automaticamente. L’icona e la pagina sarà simile a questa:

chrome estensione

Puoi sviluppare le estensioni utilizzando qualsiasi versione di Google Chrome, su Windows, Mac o Linux.

In questa sezione, potrai scrivere un’estensione che aggiunge una azione alla barra degli strumenti di Google Chrome.

1. Crea una cartella da qualche parte sul tuo computer che conterrà il vostro codice dell’estensione.

2. All’interno della cartella create un file di testo chiamato manifest.json, e mettere questo in esso:

{
“name”: “My First Extension”,
“version”: “1.0”,
“description”: “The first extension that I made.”,
“browser_action”: {
“default_icon”: “icon.png”
},
“permissions”: [
“http://api.flickr.com/”
]
}

Dove name è il nome dell’applicazione, Version la versione e description la descrizione dell’applicazione.

Inserisci un icona di dimensione 16×16 all’interno della cartella.

Per caricare l’estensione segui questi semplici passi:
1. Richiamare la pagina di gestione estensioni, cliccando sull’icona della chiave inglese e scegliendo Strumenti> Estensioni.
2. Espandi la modalità sviluppatore (in alto a destra)
3. Fare clic sul pulsante Carica estensione non pacchettizzata. Una finestra di dialogo appare.
4. Nella finestra di dialogo, passare alla cartella della vostra estensione e fare clic su OK.

Se è valida, la sua icona appare accanto alla barra degli indirizzi e informazioni riguardo l’estensione vengono visualizzate nella pagina delle estensioni, come mostra la seguente schermata.

load_after_small

Modifica ora il file manifest.json in questo modo:


“browser_action”: {
“default_icon”: “icon.png”,
“popup”: “popup.html”
},

Crea un file chiamato popup.html e inserisci il seguente codice (clicca per vedere)

Ritorna alla pagina di gestione delle estensioni, e fare clic sul pulsante Aggiorna per caricare la nuova versione dell’estensione.

Fare clic sull’icona dell’estensione. Un popup che visualizza il contenuto di popup.html appare.

Per ogni informazione chiedi nel nostro forum dedicato.

Questo post è una traduzione libera della guida ufficiale di Google per la realizzazione delle estensioni per Chrome.

morocarlo

Sono uno studente di ingegneria informatica di Trieste. Sono appassionato di informatica. Conosco vari linguaggi fra cui C#, vb.net, vb6, java, php, asp, ...

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *