Guida introduttiva
Manifest V3 sta lanciando presto! Vedere la documentazione MV3 per ulteriori informazioni e considerare lo sviluppo dell’estensione in MV3.
Le estensioni sono fatte di componenti diversi, ma coesivi. I componenti possono includere script di sfondo, script di contenuto, una pagina di opzioni, elementi dell’interfaccia utente e vari file logici. I componenti di estensione vengono creati con tecnologie di sviluppo web: HTML, CSS e JavaScript. I componenti di un’estensione dipenderanno dalla sua funzionalità e potrebbero non richiedere tutte le opzioni.,
Questo tutorial costruirà un’estensione che consente all’utente di cambiare il colore di sfondo di qualsiasi pagina su developer.chrome.com. User molti componenti di nucleo per dare una dimostrazione introduttiva delle sue relazioni.
Per iniziare, creare una nuova directory per contenere i file dell’estensione.
L’estensione completata può essere scaricata qui.
Crea il manifest #
Le estensioni iniziano con il loro manifest. Creare un file chiamato manifest.json e includere il seguente codice, o scaricare il file qui.,
La directory contenente il file manifest può essere aggiunta come estensione in modalità sviluppatore nel suo stato corrente.
- Aprire la pagina di gestione delle estensioni navigando su
chrome://extensions.- La pagina di gestione delle estensioni può anche essere aperta facendo clic sul menu Chrome, passando il mouse su Altri strumenti, quindi selezionando Estensioni.
- Abilita la modalità sviluppatore facendo clic sull’interruttore a levetta accanto alla modalità sviluppatore.
- Fare clic sul pulsante CARICA DECOMPRESSO e selezionare la directory di estensione.
Ta-da!, L’estensione è stata installata correttamente. Poiché non sono state incluse icone nel manifesto, verrà creata un’icona generica della barra degli strumenti per l’estensione.
Aggiungi istruzione #
Sebbene l’estensione sia stata installata, non ha istruzioni. Introdurre uno script di sfondo creando un file intitolato background.js, o scaricandolo qui e posizionandolo all’interno della directory di estensione.
Gli script di sfondo e molti altri componenti importanti devono essere registrati nel manifest., La registrazione di uno script in background nel manifest indica all’estensione a quale file fare riferimento e come deve comportarsi tale file.
L’estensione è ora consapevole del fatto che include uno script di sfondo non persistente e scansionerà il file registrato per eventi importanti che deve ascoltare.
Questa estensione avrà bisogno di informazioni da una variabile persistente non appena è installata. Inizia includendo un evento di ascolto per runtime.onInstalled nello script di sfondo. All’interno del listeneronInstalled, l’estensione imposterà un valore utilizzando l’API di archiviazione., Ciò consentirà a più componenti di estensione di accedere a tale valore e aggiornarlo.
La maggior parte delle API, inclusa l’API storage, deve essere registrata nel campo"permissions" nel manifest affinché l’estensione possa utilizzarle.
Tornare alla pagina Gestione estensioni e fare clic sul collegamento Ricarica. Un nuovo campo, Ispeziona viste, diventa disponibile con un link blu, pagina di sfondo.,
Fare clic sul collegamento per visualizzare il registro della console dello script di sfondo,”The color is green.“
Introdurre un’interfaccia utente #
Le estensioni possono avere molte forme di interfaccia utente, ma questa userà un popup. Crea e aggiungi un file intitolato popup.html alla directory, o scaricalo qui. Questa estensione utilizza un pulsante per cambiare il colore di sfondo.
Come lo script di sfondo, questo file deve essere designato come popup nel manifest sottopage_action.,
Designazione per le icone della barra degli strumenti è anche incluso inpage_action neldefault_icons campo. Scarica qui la cartella immagini, decomprimila e posizionala nella directory dell’estensione. Aggiorna il manifest in modo che l’estensione sappia come utilizzare le immagini.
Le estensioni visualizzano anche le immagini nella pagina Gestione estensioni, nell’avviso autorizzazioni e nella favicon. Queste immagini sono indicate nel manifesto sotto icons.,
Se l’estensione viene ricaricata in questa fase, includerà un’icona in scala di grigi, ma non conterrà alcuna differenza di funzionalità. Poiché page_action è dichiarato nel manifest, spetta all’estensione dire al browser quando l’utente può interagire con popup.html.
Aggiungi regole dichiarate allo script di sfondo con l’APIdeclarativeContent all’interno dell’evento listener runtime.onInstalled.
L’estensione avrà bisogno dell’autorizzazione per accedere all’APIdeclarativeContent nel suo manifest.,
Il browser mostrerà ora un’icona di azione pagina a colori nella barra degli strumenti del browser quando gli utenti navigano verso un URL che contiene"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 è l’aggiunta di colore al pulsante. Creare e aggiungere un file chiamato https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js con il seguente codice alla directory di estensione, o scaricato qui.
Questo codice afferra il pulsante da popup.html e richiede il valore del colore dalla memoria., Si applica quindi il colore come sfondo del pulsante. Includere un tag di script in https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.jsinpopup.html.
Ricaricare l’estensione per visualizzare il pulsante verde.
Layer logic #
L’estensione ora sa che il popup dovrebbe essere disponibile per gli utenti su developer.chrome.com e visualizza un pulsante colorato, ma ha bisogno di logica per un’ulteriore interazione dell’utente. Aggiornare https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js per includere il seguente codice.,
Il codice aggiornato aggiunge un evento onclick sul pulsante, che attiva uno script di contenuto iniettato in modo programmatico. Questo trasforma il colore di sfondo della pagina dello stesso colore del pulsante. L’utilizzo di programmatic injection consente script di contenuto richiamati dall’utente, invece di inserire automaticamente codice indesiderato nelle pagine Web.
Il manifest avrà bisogno dell’autorizzazione activeTab per consentire all’estensione l’accesso temporaneo all’API tabs. Ciò consente all’estensione di chiamare tabs.executeScript.,
L’estensione è ora completamente funzionante! Ricarica l’estensione, aggiorna questa pagina, apri il popup e fai clic sul pulsante per trasformarlo in verde! Tuttavia, alcuni utenti potrebbero voler cambiare lo sfondo in un colore diverso.
Give users options #
Attualmente l’estensione consente solo agli utenti di cambiare lo sfondo in verde. Tra cui una pagina di opzioni offre agli utenti un maggiore controllo sulla funzionalità dell”estensione, personalizzando ulteriormente la loro esperienza di navigazione.,
Inizia creando un file nella directory chiamataoptions.html e includi il seguente codice, o scaricalo qui.
Quindi registrare la pagina delle opzioni nel manifesto,
Ricaricare l’estensione e fare clic su DETTAGLI.
Scorri verso il basso la pagina dei dettagli e seleziona Opzioni di estensione per visualizzare la pagina delle opzioni, anche se al momento apparirà vuota.
L’ultimo passo è aggiungere la logica delle opzioni., Creare un file chiamato options.js nella directory di estensione con il seguente codice, o scaricarlo qui.
Vengono fornite quattro opzioni di colore generate come pulsanti nella pagina delle opzioni con gli ascoltatori di eventi onclick. Quando l’utente fa clic su un pulsante, aggiorna il valore del colore nella memoria globale dell’estensione. Poiché tutti i file dell’estensione estraggono le informazioni sul colore dalla memoria globale, non è necessario aggiornare altri valori.
Congratulazioni! La directory detiene ora un completamente funzionale, anche se semplicistico, estensione Chrome.
Qual è il prossimo?,
- La panoramica estensione Chrome esegue il backup un po’, e riempie un sacco di dettagli circa l’architettura Estensioni in generale, e alcuni concetti specifici sviluppatori vorranno avere familiarità con.
- Scopri le opzioni disponibili per il debug delle estensioni nel tutorial debug.
- Chrome Estensioni hanno accesso a potenti API al di là di ciò che è disponibile sul web aperto. Cromo.* Documentazione API camminerà attraverso ogni API.
- La guida dello sviluppatore ha decine di link aggiuntivi a pezzi di documentazione rilevanti per la creazione di estensioni avanzate.,