TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare l’estensione di Google Chrome?

19

Google Chrome è attualmente il browser Web più popolare al mondo grazie alle sue numerose funzionalità e sicurezza. Inoltre, le estensioni di Chrome consentono agli utenti di aggiungere o modificare funzionalità in Chrome senza modificare il codice nativo del browser. Puoi scaricare estensioni dal Chrome Web Store per eseguire quasi tutte le azioni su Chrome. Tuttavia, puoi perdere un’estensione che fornisce funzionalità specifiche di cui hai bisogno dalla libreria di estensioni nel Web Store. Fortunatamente, Chrome consente agli utenti di creare le proprie estensioni che possono distribuire ad altri utenti di Chrome. In questo articolo spiegheremo come creare l’estensione di Google Chrome e pubblicarla nel Web Store.

Correlati: come installare e disinstallare le estensioni su Google Chrome?

Prerequisiti

Ecco i requisiti di base per la creazione di un’estensione di Chrome:

  • Conoscenza di base della tecnologia di sviluppo Web: l’estensione di Chrome è come una pagina Web, quindi sono necessarie competenze di base HTML, JavaScript e CSS per creare un’estensione.
  • Editor di codice – Avrai anche bisogno di un semplice editor di codice come Notepad++ o Brackets.
  • Account sviluppatore Chrome Web Store: è necessario solo se desideri distribuire la tua estensione ad altri utenti Chrome.

Elementi di un’estensione di Chrome

Qualsiasi estensione del browser Chrome deve avere i seguenti componenti di base:

  • Il file manifest in formato JSON "manifest.json".
  • Script di contenuto.
  • Pagina pop-up.
  • Pagina Eventi.

Crea una directory per l’estensione di Chrome

Il primo passo è creare una nuova directory (cartella) in cui caricare e salvare tutti i file di estensione. Quindi devi creare una nuova cartella sul tuo PC e dargli il tuo nome preferito, in questo caso, "My Sample Ext".

Crea e salva il file manifest

Il file manifest fornisce a Chrome informazioni dettagliate sull’estensione come nome, autorizzazioni e numero di versione, tra gli altri dettagli.

  • Per creare il file, apri un editor di codice e crea un nuovo file denominato "manifest.json".
  • Ora aggiungi il contenuto del file manifest come mostrato nell’immagine e salva il file nella directory che hai creato sopra.

Come creare l'estensione di Google Chrome?

File manifest

  • Puoi aggiungere ulteriori dettagli al file manifest. Ad esempio, possiamo registrare la pagina pop-up e l’icona per l’estensione.
  • L’approccio migliore è memorizzare altri elementi delle estensioni come script, HTML e file di immagine in cartelle diverse e utilizzare un URL relativo per fare riferimento ad essi.
  • Aggiungi la tua icona e la pagina pop-up e salva le modifiche.

Come creare l'estensione di Google Chrome?

Manifesto dettagliato

  • Puoi anche aggiungere autorizzazioni al file manifest.

Come creare una pagina pop-up

Una pagina pop-up è un file HTML che verrà caricato quando l’utente fa clic sull’azione del browser. Nel nostro caso, abbiamo chiamato il file "sample.html".

  • Per creare un nuovo file nell’editor del codice e salvare il file nella directory dell’estensione con estensione .html.

Come creare l'estensione di Google Chrome?

Pagina pop-up

  • Essendo un file HTML standard, puoi aggiungere tutto ciò che desideri inclusi pulsanti, testi e così via nel file.
  • Il file HTML include un riferimento allo script "sample.js", una pagina di sfondo che contiene la logica per l’estensione di Chrome.

Disegnare la pagina pop-up

Qui utilizzeremo un file .css per definire lo stile della pagina a comparsa dell’estensione, è possibile specificare diversi elementi come la dimensione e il colore del carattere, le dimensioni della finestra a comparsa e l’allineamento del testo, tra gli altri.

  • Per fare ciò, crea un nuovo file e rinominalo con un’estensione di file .css, "sample.css" per il nostro caso. Nota che questo è il file .css di riferimento a cui si fa riferimento nel file HTML sopra.
  • Aggiungi il tuo codice CSS come mostrato nell’immagine e salva le modifiche.

Come creare l'estensione di Google Chrome?

Estensione dello stile

Crea uno script di contenuto/pagina di sfondo

Questo è un file .js che definisce la logica dietro l’estensione. Specifica le attività/funzionalità che l’estensione eseguirà.

  • Aggiungi i quattro file nell’editor di codice e salva il file con estensione .js "sample.js" nella directory.
  • Aggiungi comandi che verranno eseguiti una volta che l’utente fa clic sul pulsante o fa clic sull’icona dell’estensione come mostrato.
  • È inoltre necessario registrare lo script del contenuto nel file manifest.json.

Nota: puoi aggiungere più attività per eseguire un’attività principale nel file .js.

Aggiungere la tua estensione a Chrome

Creando tutti e 4 i file e salvandoli in una directory, ora sei pronto per caricare la tua estensione in Chrome.

  • Apri il browser Chrome, digita l’ URL "chrome://extensions/" per aprire la pagina di gestione delle estensioni.
  • Attiva o disattiva l’interruttore nell’angolo in alto a destra della pagina per attivare la "Modalità sviluppatore".

Come creare l'estensione di Google Chrome?

Modalità sviluppatore

  • Sul lato sinistro, fai clic sul pulsante "Carica decompresso" e sfoglia i tuoi file per selezionare la cartella in cui salvare i file di estensione.
  • Una nuova estensione verrà aggiunta all’elenco. Noterai anche l’icona della tua estensione sulla barra degli strumenti situata a destra della barra degli indirizzi.

Come creare l'estensione di Google Chrome?

Nuova estensione

  • Per testare l’estensione, fare clic sull’icona per aprire la pagina popup.

Come creare l'estensione di Google Chrome?

Estensione di prova

Avvolgendo

Le estensioni di Chrome aiutano gli utenti ad aggiungere più funzionalità per eseguire attività specifiche in Chrome. Mentre puoi scaricare una gamma di estensioni Chrome già pronte, puoi seguire i passaggi di base sopra riportati per creare estensioni personalizzate per il tuo sito web. Inoltre, puoi condividere la tua estensione con altri utenti Chrome in tutto il mondo tramite il Chrome Web Store, ma dovrai pagare per un account sviluppatore per raggiungere questo obiettivo.

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More