Come creare un'estensione di Chrome

Come Creare Un Estensione Di Chrome



'Nella nostra vita attuale, siamo più desiderosi di utilizzare le app dei social media e il motore di ricerca di Google per i nostri scopi di intrattenimento e ricerca, ovvero ricercare argomenti educativi tramite il motore di ricerca 'Google' e acquisire anche conoscenze generali. Per utilizzare il motore di ricerca di Google per cercare qualcosa, dobbiamo avere un browser già installato sui nostri telefoni cellulari, laptop o personal computer. Uno dei browser più utilizzati ed efficienti del secolo di oggi è il browser 'Google Chrome' che ha fornito molte buone funzionalità insieme all'utilità dell'estensione. L'“Estensione” è il plugin che si trova in qualsiasi browser per limitare o consentire siti web e diverse funzioni. Queste estensioni di solito non sono integrate; è necessario aggiungere ciascuna estensione al browser separatamente ogni volta che è necessario. Se sei un piccolo esperto di tecnologia, allora potresti conoscere l'uso dei file JSON manifest per creare e aggiungere un'estensione in pochi passaggi. Quindi, questo articolo tratterà tutti quei passaggi per creare una nuova estensione sul browser Google Chrome.

Prima di dare un'occhiata al metodo per creare un'estensione, devi assicurarti che il tuo browser Google Chrome sia già avviato e che il motore di ricerca 'Google' non contenga alcun background. Puoi vedere che l'immagine allegata di seguito non ha sfondo per il motore di ricerca 'Google.com', ovvero solo sfondo bianco'.









Aggiungi cartella estensione



Apri rapidamente lo strumento Visual Studio Code dalle app del tuo sistema Windows. Potrebbe essere necessario fino a 1 minuto per aprire correttamente il codice di Visual Studio e abilitarlo per il nostro utilizzo. Dopo che è stato avviato correttamente ed è pronto per l'utilizzo, abbiamo aggiunto la cartella 'Estensione' già generata al suo interno tramite l'elenco del menu 'File' nella barra delle applicazioni in alto mostrata di seguito. Dopo aver creato la cartella 'Estensione', abbiamo aggiunto al suo interno un'altra cartella denominata 'immagine' che contiene le immagini da utilizzare come icona per l'estensione sul browser. Insieme a ciò, abbiamo aggiunto un file 'manifest.json' e un file javascript denominato 'script.js' per creare una nuova estensione e aggiungerla al browser. Partiamo dal file manifest.json facendo doppio clic su di esso per iniziare a lavorare in JSON per creare e utilizzare un'estensione per cambiare lo sfondo di 'Google'.





Crea file manifesto



All'interno del file manifest.json, dovresti aggiungere il codice 'JSON' mostrato di seguito. Questo codice è lo script di configurazione effettivo per creare e aggiungere un'estensione al nostro browser Google Chrome. Questo codice JSON è stato avviato con l'inizializzazione per la versione manifest della variabile come '2' e il nome di un'estensione da creare, ad esempio 'Cambia sfondo'. Successivamente, abbiamo aggiunto la breve descrizione per la nostra estensione all'interno della variabile 'descrizione'.

Insieme a ciò, abbiamo aggiunto la versione di un'estensione come '1.0'. Dopo aver creato tutte le configurazioni di base per 'l'estensione', dobbiamo aggiungere il percorso all'icona dell'immagine da utilizzare come icona per le estensioni. La variabile 'browser' è stata definita per impostare l'icona dell'estensione per la barra delle applicazioni in alto del browser Google Chrome, ovvero dove vengono visualizzate tutte le estensioni dopo averle abilitate per un utilizzo futuro per determinati o tutti i siti. Successivamente, abbiamo aggiunto il percorso a tre file immagine di dimensioni diverse in modo che il browser possa utilizzare file diversi ogni volta.

Insieme a ciò, la variabile 'page_action' è stata utilizzata per visualizzare quale immagine deve essere visualizzata dopo aver fatto clic sull'icona 'estensioni' dalla barra delle applicazioni in alto di Google Chrome. Al suo interno è stata utilizzata la variabile 'Default_icon', insieme ai suoi tre diversi valori di percorso per le immagini da utilizzare come icone ad ogni ricarica. A questo scopo vengono utilizzati tre diversi file di immagine. L'ultima variabile content_scripts richiede un totale di 2 nuove variabili, ovvero corrispondenze e CSS. La variabile 'matches' contiene il percorso del sito Web da modificare dopo la creazione dell'utilizzo di questa nuova estensione. Insieme a ciò, la variabile 'CSS' contiene il nome di un file CSS da utilizzare per lo stile di Google.com dopo aver richiesto l'estensione, ovvero lo stile di Google.com dopo ogni ricarica all'abilitazione dell'estensione. Ora che questo codice è completo e pronto per l'uso, salvalo rapidamente e spostati verso il file 'main.css'.

All'interno del file CSS main.css, abbiamo aggiunto uno stile per la creazione dell'estensione del file manifest. Lo stile verrebbe applicato utilizzando il tag html 'body', ovvero da applicare sull'intera area 'body' del file manifest. Abbiamo impostato il nuovo sfondo per Google.com utilizzando l''URL' di un file immagine dal motore di ricerca. Ora salva il tuo codice prima di ogni cosa.

Dopo aver completato i codici richiesti, ovvero il file manifest.json e main.css, dobbiamo aprire l'utilità Estensioni sul browser Google Chrome tramite l'URL chrome://extensions' nella nuova scheda. Viene aperta l'area di utilità Estensioni. Dalla sua modalità sviluppatore, devi caricare la cartella 'Estensione' decompressa dal tuo sistema locale per renderla un'estensione tramite il pulsante 'carica decompresso' visualizzato nell'immagine qui sotto. L'estensione è stata efficacemente aggiunta al browser Chrome, come mostrato. Rimuovere gli errori per farlo funzionare completamente.

Dall'icona 'estensione', scegli l'estensione 'Cambia sfondo' per visualizzarla sulla barra delle applicazioni, ovvero l'estensione dell'icona 'C'.

Dopo aver ricaricato Google.com, il suo sfondo è stato aggiornato utilizzando questa estensione.

Conclusione

Partendo dalla spiegazione dell'utilizzo dei browser nel sistema Windows, abbiamo anche discusso dell'importanza delle estensioni in qualsiasi browser. Dopo la breve spiegazione delle estensioni, abbiamo spiegato il metodo per utilizzare il file JSON manifest per creare un'estensione per il browser Google Chrome e come utilizzarlo per cambiare sfondo per il motore di ricerca “Google.com”. Dopo aver caricato l'estensione su Google Chrome, l'abbiamo utilizzata su Google.com per cambiarne lo sfondo.