Chrome è facilmente il browser web più popolare del pianeta. Secondo le statistiche di statuscenter per la quota di mercato dei browser, il browser Chrome prende Enorme 65% del mercato di browser desktop a partire dalla fine del 2017.
Con questo tipo di potere di definizione del mercato, è diventato Estensione di progettazione e creazione di Chrome sul browser Chrome ha la priorità. Lo stesso vale per le estensioni: Chrome offre agli utenti la base di estensioni di gran lunga più ampia, con decine di migliaia di estensioni, temi e app nel Chrome Web Store.
Se vuoi ottenere supporto in questa direzione, puoi creare la tua estensione per Chrome. Avrai solo bisogno di alcune abilità di sviluppo web di base (HTML, CSS e JavaScript), oltre a un cucchiaino di JSON per legare tutto insieme.
Esamineremo l'infrastruttura necessaria per creare un'estensione di base in Chrome in questo post. Per uno sguardo approfondito alle possibilità, vedere Guida per sviluppatori di estensioni di Chrome.
Link veloci
Scrivere un'estensione di base per Chrome
Per questo tutorial, creeremo un'estensione Chrome di base che visualizza un semplice popup quando viene cliccato. Avremo bisogno di due file importanti: un'icona ("icon.png"), un file HTML ("popup.html") e un manifest importante ("manifest.json"). Tutti questi file saranno disponibili all'interno della directory con il nome della tua estensione. In questo caso si chiama "Hello world".
Un'estensione di Chrome è definita dalla sua istruzione. Questo frammento di json chrome mostra come interpretare l'estensione, quali file caricare e come interagire con l'utente.
Il file manifest per la nostra estensione di base è simile al seguente:
{
"manifest_version": 2,
"name": "Hello World!",
"description": "My first Chrome extension.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
Questo manifest posizionerà un'icona nella barra degli strumenti dell'utente che, una volta caricata, caricherà il contenuto del file denominato “.popup.html. Ecco i rari contenuti sul resto:
versione_manifest Chrome segnala la versione di codifica del manifest con cui stai lavorando. Per le estensioni recenti, dovrai impostare questa impostazione su 2.
Nome Mostra il nome che l'estensione mostrerà nel Chrome Store e "chrome://extensions".
descrizione Visualizza il testo descrittivo visualizzato in "chrome://extensions".
azione del browser Carica l'icona nella barra degli strumenti. Consente inoltre alla guida di rispondere all'input dell'utente visualizzando un suggerimento, un popup o un badge. Verificare Un elenco completo di tutto "browser_action" che può essere eseguita.
icona_predefinita Visualizza il percorso dell'icona dalla directory dell'estensione.
default_popup Visualizza il percorso del file che verrà caricato quando si fa clic sull'icona dell'estensione.
permessi Definire l'area funzionale dell'estensione. activeTab è il più comune, consentendo di aggiungere l'accesso alla scheda più in primo piano. Google fornisce un elenco Con tutti i permessi che potresti chiedere Una delle aggiunte.
Se vuoi tuffarti in profondità in tutto ciò che possono proclamare Dichiarazione di aggiunta di Chrome, consulta Google Documenti in Dati di estensione.
Scrivere un'estensione di base per Chrome: i popup
Ora che abbiamo scritto la nostra dichiarazione, possiamo vedere cosa ci verrà mostrato dall'aggiunta. Ciò è dovuto al file "popup.html" che verrà visualizzato al caricamento dell'estensione. Ecco cosa useremo per questo progetto:
<!doctype html>
<html>
<head>
<title>Hello World</title>
</head>
<style type="text/css">
body {
margin: 5px;
}
h1 {
font-size: 15px;
text-align: center;
}
</style>
<body>
<h1>Hello World!</h1>
</body>
</html>
Come puoi vedere, questo genererà del testo in stile CSS. Se desideri aggiungere JavaScript o CSS esterni alla tua estensione, è necessario scrivere gli script nel manifest, sotto la chiave content_scripts. Una volta che hai quell'opzione indicata nel manifest, puoi caricare quegli script come faresti normalmente.
Scrivere un'estensione di base per Chrome: carica su Chrome
Dopo aver scritto il codice di base per la nostra estensione e aver trovato il codice appropriato, possiamo caricarlo in Chrome.
1. Vai su "chrome://extensions" e attiva "Modalità sviluppatore" spuntando la casella in alto a destra.
2. Fare clic sul pulsante "Carica estensione decompressa..." e selezionare la destinazione dell'estensione.
3. Dopo aver scaricato l'estensione, vedrai la sua icona nella barra dei menu.
4. Clicca sull'estensione per vederne l'effetto (molto semplice).
Conclusione: espandi l'estensione di Chrome
Dopo che l'estensione è terminata e pronta per la pubblicazione, dovrai creare un account sviluppatore dell'estensione di Chrome. Questo non è un processo completamente semplice, ma Google fornisce istruzioni complete Per pubblicare un'estensione di Chrome qui.
Ovviamente c'è molto che puoi fare con l'estensione di Chrome, ma va un po' oltre lo scopo di questo post. Se vuoi saperne di più su tutto ciò che le estensioni di Chrome possono fare, consulta la nostra guida Estensioni per sviluppatori di Google Chrome.
