Le estensioni sono costituite da componenti diversi, ma coesi. I componenti possono includere script di sfondo, script di contenuti, una pagina delle opzioni, elementi UI e vari file logici. I componenti delle estensioni vengono creati con tecnologie di sviluppo web: HTML, CSS e JavaScript. I componenti di un'estensione dipendono dalla sua funzionalità e potrebbero non richiedere ogni opzione.
Questo tutorial crea un'estensione che consente all'utente di modificare il colore di sfondo di qualsiasi pagina su developer.chrome.com. Userà molti componenti principali per fornire una dimostrazione introduttiva delle loro relazioni.
Per iniziare, crea una nuova directory in cui inserire i file dell'estensione.
L'estensione completata è disponibile qui.
Crea il manifest
Le estensioni iniziano con il relativo manifest. Crea un file denominato manifest.json e includi il seguente codice.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"manifest_version": 2
}
La directory che contiene il file manifest può essere aggiunta come estensione in modalità sviluppatore nel suo stato attuale.
- Apri la pagina Gestione delle estensioni andando su
chrome://extensions.- Puoi aprire la pagina Gestione estensioni anche facendo clic sul menu Chrome, passando il mouse sopra Altri strumenti e selezionando Estensioni.
- Attiva la modalità sviluppatore facendo clic sul pulsante di attivazione/disattivazione accanto a Modalità sviluppatore.
- Fai clic sul pulsante CARICA UNPACKED e seleziona la directory dell'estensione.
Fatto! L'estensione è stata installata. Poiché non sono state incluse icone nel file manifest, verrà creata un'icona generica della barra degli strumenti per l'estensione.
Aggiungi istruzione
Sebbene l'estensione sia stata installata, non è presente alcuna istruzione. Introduci uno script in background creando un file denominato background.js e inserendolo nella directory dell'estensione.
Gli script in background e molti altri componenti importanti devono essere registrati nel file manifest. La registrazione di uno script in background nel file manifest indica all'estensione a quale file fare riferimento e come dovrebbe comportarsi.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"manifest_version": 2
}
L'estensione è ora consapevole del fatto che include uno script in background non persistente e analizza il file registrato per individuare eventi importanti che deve rimanere in ascolto.
Questa estensione avrà bisogno delle informazioni di una variabile permanente non appena verrà installata. Inizia
includendo un evento di ascolto per runtime.onInstalled nello script in background. All'interno del listener onInstalled, l'estensione imposterà un valore utilizzando l'API storage. In questo modo, più componenti dell'estensione potranno accedere a quel valore e aggiornarlo.
chrome.runtime.onInstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log("The color is green.");
});
});
La maggior parte delle API, inclusa l'API storage, deve essere registrata nel campo "permissions" del manifest affinché l'estensione possa utilizzarle.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"manifest_version": 2
}
Torna alla pagina di gestione delle estensioni e fai clic sul link Ricarica. Un nuovo campo, Ispeziona viste, diventa disponibile con un link blu, pagina di sfondo.
Fai clic sul link per visualizzare il log della console dello script in background "The color is green."
Presentare un'interfaccia utente
Le estensioni possono avere molte forme di interfaccia utente, ma questa utilizzerà un popup.
Crea e aggiungi alla directory un file denominato popup.html. L'estensione utilizza un pulsante per cambiare il colore di sfondo.
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 30px;
outline: none;
}
</style>
</head>
<body>
<button id="changeColor"></button>
</body>
</html>
Come lo script in background, questo file deve essere designato come popup nel manifest in page_action.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html"
},
"manifest_version": 2
}
La designazione per le icone della barra degli strumenti è inclusa anche sotto page_action nel campo default_icons.
Scarica la cartella delle immagini qui, decomprimila e inseriscila nella directory dell'estensione. Aggiorna il file manifest in modo che l'estensione sappia come utilizzare le immagini.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"manifest_version": 2
}
Le estensioni mostrano anche le immagini nella pagina di gestione delle estensioni, l'avviso relativo alle autorizzazioni e la favicon. Queste immagini sono designate nel file manifest in icons.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"manifest_version": 2
}
Se in questa fase l'estensione viene ricaricata, verrà visualizzata un'icona in scala di grigi, ma non ci saranno differenze di funzionalità. Poiché page_action viene dichiarato nel manifest, spetta all'estensione comunicare al browser quando l'utente può interagire con popup.html.
Aggiungi le regole dichiarate allo script in background con l'API declarativeContent all'interno dell'evento listener runtime.onInstalled.
chrome.runtime.onInstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log('The color is green.');
});
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostEquals: 'developer.chrome.com'},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
L'estensione dovrà avere l'autorizzazione per accedere all'API declarativeContent nel file manifest.
{
"name": "Getting Started Example",
...
"permissions": ["declarativeContent", "storage"],
...
}
Il browser ora mostrerà un'icona di azione pagina a colori nella barra degli strumenti del browser quando gli utenti visitano un URL contenente "developer.chrome.com". Quando l'icona è a colori, gli utenti possono fare clic per visualizzare popup.html.
L'ultimo passaggio per l'interfaccia utente popup consiste nell'aggiungere il colore al pulsante. Crea e aggiungi un file denominato popup.js con il codice seguente alla directory dell'estensione.
let changeColor = document.getElementById('changeColor');
chrome.storage.sync.get('color', function(data) {
changeColor.style.backgroundColor = data.color;
changeColor.setAttribute('value', data.color);
});
Questo codice recupera il pulsante da popup.html e richiede il valore del colore dall'archivio. Il colore viene quindi applicato come sfondo del pulsante. Includi un tag script per popup.js in popup.html.
<!DOCTYPE html>
<html>
...
<body>
<button id="changeColor"></button>
<script src="popup.js"></script>
</body>
</html>
Ricarica l'estensione per visualizzare il pulsante verde.
Logica dei livelli
L'estensione ora sa che il popup dovrebbe essere disponibile per gli utenti su developer.chrome.com e mostra un pulsante colorato, ma ha bisogno di una logica per ulteriori interazioni da parte degli utenti. Aggiorna popup.js per includere il seguente codice.
let changeColor = document.getElementById('changeColor');
...
changeColor.onclick = function(element) {
let color = element.target.value;
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.executeScript(
tabs[0].id,
{code: 'document.body.style.backgroundColor = "' + color + '";'});
});
};
Il codice aggiornato aggiunge un evento onclick sul pulsante, che attiva uno script di contenuti inseriti in modo programmatico. In questo modo, il colore di sfondo della pagina diventa lo stesso colore del pulsante. L'uso dell'inserimento programmatico consente di creare script di contenuti richiamati dall'utente, anziché inserire automaticamente codice indesiderato nelle pagine web.
Il manifest avrà bisogno dell'autorizzazione activeTab per consentire all'estensione l'accesso temporaneo
all'API tabs. In questo modo l'estensione può chiamare tabs.executeScript.
{
"name": "Getting Started Example",
...
"permissions": ["activeTab", "declarativeContent", "storage"],
...
}
L'estensione è ora completamente funzionante. Ricarica l'estensione, aggiorna questa pagina, apri il popup e fai clic sul pulsante per farlo diventare verde. Tuttavia, alcuni utenti potrebbero voler cambiare lo sfondo impostando un colore diverso.
Offrire opzioni agli utenti
Al momento l'estensione consente agli utenti solo di cambiare lo sfondo in verde. L'inclusione di una pagina delle opzioni offre agli utenti un maggiore controllo sulle funzionalità dell'estensione, personalizzando ulteriormente la loro esperienza di navigazione.
Inizia creando un file nella directory options.html e includi il seguente codice.
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 30px;
outline: none;
margin: 10px;
}
</style>
</head>
<body>
<div id="buttonDiv">
</div>
<div>
<p>Choose a different background color!</p>
</div>
</body>
<script src="options.js"></script>
</html>
Quindi registra la pagina delle opzioni nel manifest,
{
"name": "Getting Started Example",
...
"options_page": "options.html",
...
"manifest_version": 2
}
Ricarica l'estensione e fai clic su DETTAGLI.
Scorri verso il basso nella pagina dei dettagli e seleziona Opzioni estensione per visualizzare la pagina delle opzioni, anche se al momento risulta vuota.
L'ultimo passaggio consiste nell'aggiungere la logica delle opzioni. Crea un file denominato options.js nella directory dell'estensione con il codice seguente.
let page = document.getElementById('buttonDiv');
const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1'];
function constructOptions(kButtonColors) {
for (let item of kButtonColors) {
let button = document.createElement('button');
button.style.backgroundColor = item;
button.addEventListener('click', function() {
chrome.storage.sync.set({color: item}, function() {
console.log('color is ' + item);
})
});
page.appendChild(button);
}
}
constructOptions(kButtonColors);
Vengono fornite quattro opzioni di colore, quindi generate come pulsanti nella pagina delle opzioni con gli ascoltatori di eventi clic. Quando l'utente fa clic su un pulsante, il valore del colore viene aggiornato nello spazio di archiviazione globale dell'estensione. Poiché tutti i file dell'estensione estraggono le informazioni sui colori dallo spazio di archiviazione globale, non è necessario aggiornare altri valori.
Fai il prossimo passo
Complimenti! La directory ora contiene un'estensione di Chrome completamente funzionale, anche se semplicistica.
Passaggi successivi
- La pagina Panoramica delle estensioni di Chrome contiene un po' di backup e fornisce molti dettagli sull'architettura delle estensioni in generale e alcuni concetti specifici che gli sviluppatori dovrebbero conoscere.
- Scopri le opzioni disponibili per il debug delle estensioni nel tutorial di debug.
- Le estensioni di Chrome hanno accesso a potenti API ben oltre a quelle disponibili sul web aperto. Il dispositivo chrome.* nella documentazione delle API sarà spiegato in dettaglio come fare per ciascuna API.
- La guida per gli sviluppatori contiene decine di link aggiuntivi a documenti pertinenti alla creazione avanzata di estensioni.