Come creare un'estensione di Chrome

Mentre al giorno d'oggi sembra esserci un'estensione per tutto, non è impossibile per uno faticare a trovare un'estensione del browser per uno scopo o un'esigenza particolare. Quanto è complicato costruirne uno? Di seguito troverai una guida passo passo su come creare un'estensione di Chrome:

Passaggio 1: requisiti

Due note prima di iniziare:

• Anche se questo può sembrare ovvio ai più, è importante creare la tua estensione all'interno di Google Chrome stesso.
• Metti alla prova il tuo lavoro mentre ti muovi attraverso questo processo. È più facile correggere gli errori di codifica mentre procedi che tornare indietro una volta terminato.

Prima di iniziare, dovrai decidere la funzione dell'estensione. A che scopo servirà? Concentrati sugli interessi e sui problemi del tuo pubblico, in modo da poter definire chiaramente che tipo di soluzione puoi offrire.

Una volta che hai coperto questo, controlla il design. Ogni estensione caricata su Google Chrome Store richiede un'icona. Puoi crearlo da solo o esternalizzare il design. Una volta che hai la tua icona, puoi iniziare a creare la tua estensione.

Passaggio 2: elementi costitutivi

Come ogni software, l'estensione sarà composta da diversi file. Quindi, la prima cosa che devi fare è creare una directory che ospiterà tutti i tuoi file di estensione.

Una directory è una posizione in cui archiviare i file sul tuo computer. Qualsiasi sistema operativo con una struttura di file gerarchica, come MS-DOS, OS/2 o Linux, dispone di una directory di file.

Perché hai bisogno di una directory? Quindi, quando Chrome sta caricando la tua estensione, puoi estrarre i file dalla cartella corretta.

manifest.json

Successivamente, devi creare il file manifest della tua estensione.

Un manifest è un file che informa il sistema operativo su come avviare un programma . Le impostazioni in un file manifest vengono sempre specificate utilizzando il linguaggio XML. I manifest vengono spesso utilizzati per includere impostazioni come i privilegi, per informare il sistema operativo quale versione di una DLL verrà utilizzata dal programma.

Nel caso della tua estensione, il file manifest fornirà a Chrome le istruzioni per caricare l'estensione.

Creazione del file manifest

In Chrome, crea un file chiamato manifest.json e aggiungilo alla tua directory. Aggiungi il codice che ti serve al tuo file manifest. Quindi aggiungi il seguente codice:

{

"nome": "Esempio per iniziare",

"descrizione": "Crea un'estensione!",

“versione”: “1.0”,

“versione_manifest”: 3

}

Le autorizzazioni dell'estensione dipendono dalla funzione di estensione. Puoi trovare un elenco di tutte le autorizzazioni e il loro significato nei documenti dell'estensione di Chrome.

Pagina pop-up

Se il tuo sito ha bisogno di un popup, dovresti aggiungerlo al tuo codice.

1. Assegna il nome del file con browser_action nel file manifest.
2. Costruisci la pagina popup con HTML o CSS. Puoi aggiungere immagini con SVG.
3. Usa JavaScript per aggiungere funzionalità al popup. Designa il file JavaScript e collegalo al tuo file popup. Per esempio:
4. Puoi creare funzionalità e avere accesso al DOM popup. Ecco un esempio di come farlo.

document.addEventListener(“DOMContentLoaded”, () => {

pulsante var = document.getElementById("invia")

button.addEventListener("click", (e) => {

console.log(e)

})

})

Script di contenuto

La sezione content_script definisce dove dovrebbe funzionare l'estensione. Se vuoi che l'estensione funzioni su tutti i siti, dovresti scrivere:

"script_contenuti": [

{

“corrispondenze”: [“<all_urls>”],

“css”: [“background.css”],

“js”: [“background.js”]

}

],

Se vuoi che l'estensione funzioni su un singolo sito, come Facebook, ad esempio, dovresti aggiungere [“https://facebook.com/*”]

Pagina Eventi

Un Evento è un oggetto che ti permette di essere avvisato quando succede qualcosa di interessante. Ad esempio, puoi utilizzare l'evento chrome.alarms.onAlarm per ricevere una notifica quando è dovuto un allarme.

chrome.alarms.onAlarm.addListener(function(alarm) {

appendToLog('alarms.onAlarm –'

+ ' nome: ' + nome.allarme

+ ' scheduleTime: ' + alarm.scheduledTime);

});

Puoi saperne di più sulle pagine degli eventi nei documenti di Chrome

Content.js

Gli script di contenuto sono file JavaScript che fanno parte delle estensioni del browser. Gli script di contenuto hanno più privilegi rispetto ai normali javascript.

Passaggio 3: apri un file HTML popup dal popup dell'estensione di Chrome

Se inserisci un pulsante nella tua estensione nativa di Chrome, quando fai clic su questo pulsante, puoi creare un altro popup HTML in un contenuto diverso. Ecco un esempio su StackOverflow:

Il manifest.json:

{

"nome": "CheatSheets",

"descrizione": "estensione cheatsheet",

“versione”: “1.0”,

“versione_manifest”: 3,

"sfondo": {

“service_worker”: “background.js”

},

“autorizzazioni”: [“storage”, “activeTab”, “scripting”,”tabs”],

"azione": {

“default_popup”: “popup.html”,

"icona_predefinita": {

“16”: “/images/get_started16.png”,

“32”: “/images/get_started32.png”,

“48”: “/images/get_started48.png”,

“128”: “/images/get_started128.png”

}

},

"icone": {

“16”: “/images/get_started16.png”,

“32”: “/images/get_started32.png”,

“48”: “/images/get_started48.png”,

“128”: “/images/get_started128.png”

}

}

Il popup.html:

<!DOCTYPE html>

<html>

<testa>

<link rel="stylesheet" href="style.css">

</testa>

<corpo>

<button id="git_Sheet">foglio git</button>

<script src="popup.js"></script>

</corpo>

</html>

E il file popup.js:

let gitSheet = document.getElementById("git_Sheet"); gitSheet.addEventListener("click", async () => { let

= attendi chrome.tabs.query({ attivo: true, currentWindow: true }); chrome.scripting.executeScript({ target: { tabId: tab.id }, funzione: ShowGitSheet, }); }); funzione ShowGitSheet() { chrome.browserAction.openPopup({ popup: “git_popup.html” }); }

Suggerimento: usa chrome.windows.create({url: '…', type: 'popup'}) invece di chrome.browserAction.openPopup se vuoi che un browser diverso da Firefox esegua la tua estensione.

Passaggio 4: verifica la presenza di errori dopo aver installato l'estensione in Chrome

Una volta terminata la fase di costruzione, è il momento di testare l'estensione per assicurarti che Chrome la esegua. Per caricare l'estensione e avviare il debug, procedi nel seguente modo:

• Apri chrome://extensions nel tuo browser Google Chrome.
• Imposta la modalità sviluppatore selezionando la casella Sviluppatore nell'angolo in alto a destra.
• Fai clic su "Carica estensione decompressa" e vedrai il tuo file con un'opzione per selezionarlo.
• Se la tua estensione è valida, dovrebbe caricarsi immediatamente quando la selezioni.
• Se non è valido, vedrai un messaggio di errore.

Quando si scrive codice, gli errori più comuni sono gli errori di sintassi. Quindi, la prima cosa è controllare di nuovo che tutte le virgole e le parentesi siano nel posto giusto e nel formato giusto.

Quindi, assicurati di selezionare la casella "abilitato" in modo da poterlo vedere in esecuzione.

Passaggio 5: aggiungi la logica all'azione.

Una buona regola pratica è inserire le chiamate API nello script in background e la manipolazione DOM nello script del contenuto. Vediamo un esempio di aggiunta di uno script in background:

1. Crea il file chiamato background.js all'interno della directory delle estensioni
2. Registra lo script in background nel manifest

{

"nome": "Esempio per iniziare",

"descrizione": "Crea un'estensione!",

“versione”: “1.0”,

“versione_manifest”: 3,

"sfondo": {

“service_worker”: “background.js”

}

}

Chrome può eseguire la scansione del file per ulteriori istruzioni quando ricarichi l'estensione, ad esempio eventi.

1. Aggiungi la sceneggiatura. Sarà diverso in base allo scopo della tua estensione.

Per aiutare la tua estensione a ottenere informazioni durante l'installazione, dovresti includere un evento di ascolto per runtime.onInstalled nello script in background. Quindi, il listener onInstalled st a valore utilizzando l'API di archiviazione, in modo che i componenti dell'estensione possano accedere al valore e aggiornarlo.

// background.js

lascia che colore = '#3aa757';

chrome.runtime.onInstalled.addListener(() => {

chrome.storage.sync.set({ colore });

console.log('Colore di sfondo predefinito impostato su %cgreen', `color: ${color}`);

});

Ulteriori informazioni sui passaggi successivi sul sito per sviluppatori di Google Chrome. Ciò include come creare l'interfaccia utente e l' icona e stabilire una logica di livello per migliorare l'interazione dell'utente.

Come al solito, per iniziare a progettare la tua interfaccia, devi registrare un'azione del browser nel tuo file manifest. Ad esempio, se utilizzi un popup, il codice potrebbe essere simile a questo:

<!DOCTYPE html>

<html>

<testa>

<link rel="stylesheet" href="button.css">

</testa>

<corpo>

<ID pulsante=”cambiaColore”></pulsante>

</corpo>

</html>

Quali sono i requisiti di un'icona? Per le immagini, 16×16 e 32×32 pixel. Tutte le icone dovrebbero essere quadrate.

Non dimenticare di aggiungere i tuoi script logici in modo che la tua estensione sappia cosa fare. Ad esempio, puoi aggiungerlo alla fine dello script popup.js.

// Quando si fa clic sul pulsante, inietta setPageBackgroundColor nella pagina corrente

changeColor.addEventListener("click", async () => {

permettere

= attendi chrome.tabs.query({ attivo: true, currentWindow: true });

chrome.scripting.executeScript({

destinazione: { tabId: tab.id },

funzione: setPageBackgroundColor,

});

});

// Il corpo di questa funzione verrà eseguito come script di contenuto all'interno del file

// pagina corrente

funzione setPageBackgroundColor() {

chrome.storage.sync.get("colore", ({ colore }) => {

document.body.style.backgroundColor = colore;

});

}

funzione setPageBackgroundColor() {

chrome.storage.sync.get("colore", ({ colore }) => {

document.body.style.backgroundColor = colore;

});

Passaggio 6: prova la tua estensione

Il passaggio successivo è logicamente, testare continuamente l'estensione in modo da poter garantire che tutto funzioni come dovrebbe. Se esternalizzi il test, cogli l'occasione per verificare quanto sia intuitiva l'interfaccia. In base ai risultati del test, modifica gli script, quindi esegui nuovamente il test.

Passaggio 7: invia la tua estensione al Chrome Web Store

Una volta che sei soddisfatto della tua estensione, puoi andare al Chrome Web Store e inviarla.

In Chrome Developer Store, fai clic su Nuovo elemento , quindi trascina il file di progetto nell'uploader.

Chrome farà alcune domande per richiedere informazioni sulle sue autorizzazioni e perché sono necessarie.

Esempi di estensioni di Google Chrome

Sembra che ci sia un'estensione per tutto. Ecco alcuni dei più utili:

• Salva su Drive
  Questa estensione installa una piccola icona nella parte superiore del browser. Invierà tutto ciò che stai navigando sul tuo account di guida in modo che tu possa guardarlo in seguito. Funziona prendendo screenshot, salvando immagini, audio o video.
• Ordina
  Questo plugin offre agli utenti un modo per organizzare le loro caselle di posta e dare la priorità a ciò che conta di più per loro. Si integra con Gmail e ti consente di trascinare e rilasciare i messaggi in colonne personalizzate.
• HTTPS ovunque
  Questa estensione migliora la sicurezza della tua navigazione modificando qualsiasi sito Web da http a HTTPS sicuro, quindi è crittografato e sicuro.
• Non mi interessano i biscotti
  Con ogni sito Web che ti chiede di accettare i cookie, questa estensione è un vero toccasana. Potrebbe non sembrare molto, ma verrà premuto il pulsante di consenso sui pop-up dei cookie. Ti farà risparmiare tempo e accelererà la tua produttività.
• Test di velocità
  
  Questa utile estensione ti consente di controllare la velocità di connessione in movimento. Con una versione desktop e mobile, puoi assicurarti che la tua connessione sia al massimo prima di scaricare un allegato di grandi dimensioni o eseguire lo streaming di un video.
  Con un clic, Speedtest eseguirà un rapido test di connessione sulla rete che stai utilizzando.

Cosa può fare la tua estensione di Chrome?

Le estensioni personalizzate sono programmi software che eseguono una singola attività. Detto questo, puoi includere più di una funzionalità, ma tieni presente che tutto deve funzionare per raggiungere lo stesso scopo.

Un'estensione di Chrome funziona utilizzando le azioni della pagina o le azioni del browser:

Azione sulla pagina : questa è un'azione specifica per determinate pagine.

Azione del browser : è rilevante indipendentemente dalla pagina in cui ti trovi.

Assicurati che l'interfaccia utente sia intuitiva e semplice da capire. Il risultato finale sarà un pacchetto che l'utente può scaricare e installare.

5 modi provati e testati per guadagnare con la tua estensione

L'obiettivo principale della tua estensione è generare entrate. Una volta che hai definito il tuo pubblico di destinazione e come utilizzerà l'estensione, puoi definire una strategia per trarne profitto. Abbiamo scritto una guida completa sulla monetizzazione delle estensioni. Ecco alcuni punti salienti:

1. Annunci in-app

La pubblicità in-app è uno dei modi più comuni per monetizzare la tua estensione. Si tratta di annunci che vengono visualizzati da un utente quando utilizza la tua estensione. Quando monetizzi tramite la pubblicità in-app tramite una soluzione programmatica, gli annunci ruotano. A differenza degli annunci statici, questa tecnica ti aiuta a massimizzare il tuo potenziale. Utilizzando la pubblicità display, puoi combinare diversi tipi di annunci.

Gli utenti di CodeFuel massimizzano il loro rendimento e semplificano la loro monetizzazione perché il servizio mostra annunci pertinenti all'intento dell'utente.

2. Annunci di ricerca

Questa è una strategia in cui gli annunci vengono inseriti in una pagina dei risultati di un motore di ricerca. Poiché gli annunci vengono visualizzati quando la persona sta cercando qualcosa, non disturba l'esperienza dell'utente. Puoi personalizzare gli annunci della rete di ricerca in base alle intenzioni dell'utente, in modo da migliorare l'esperienza dell'utente.

3. Pagamenti e acquisti in-app

In questo modello, l'estensione è gratuita ma ci sono funzionalità interne a pagamento. Gli acquisti in-app sono comuni tra le applicazioni e le estensioni di gioco. L'utente sceglie se desidera aggiungere le funzionalità extra a pagamento.

4. Aggiornamenti a pagamento

Allo stesso modo, in questo modello, l'estensione di base è offerta gratuitamente, ma se l'utente desidera una versione premium, deve pagare per la versione aggiornata. Questo è un modello estremamente comune, utilizzato da estensioni popolari come Grammarly.

5. Freemio

Questo è probabilmente il modello di monetizzazione più popolare per estensioni e applicazioni. Con freemium, offri l'estensione gratuitamente. Come ci guadagni soldi? Hai un paio di opzioni:

1. Puoi offrire una prova gratuita per un periodo di tempo limitato.
2. Puoi offrire una versione base gratuita con funzionalità limitate.

Se scegli questo modello, considera i suoi limiti poiché Google ha interrotto le estensioni a pagamento.

Le migliori estensioni di sicurezza Google Chrome:

La maggior parte delle persone utilizza Chrome per qualsiasi cosa, dagli acquisti e ricerche alla gestione dei propri conti finanziari. Tutti questi dati sensibili devono essere protetti. Esistono diverse estensioni che possono rendere tali informazioni al sicuro.

1. Sicurezza in linea di Avast

Questa estensione coprirà la sicurezza della tua navigazione web con molteplici funzionalità. La sua protezione dagli attacchi di phishing scansiona gli elementi di qualsiasi pagina web e rileva se la pagina è falsa o sospetta . Altre preziose funzionalità includono l'utilizzo di un sistema di valutazione della comunità per rilevare i siti pericolosi.

2. Sfocatura

Sono disponibili numerosi gestori di password, che è un must per garantire che tutte le tue credenziali siano al sicuro. Blur è uno dei più sicuri, grazie alle sue funzionalità di sicurezza aggiuntive.

Blur crittografa, salva e gestisce le tue password . Nasconde inoltre le informazioni sulla tua carta di credito dai siti di shopping e blocca tutti i tipi di tracker, compresi quelli non cookie.

3. Fare clic e pulire

È uno strumento di pulizia che cancella tutte le tracce della tua attività online con un solo clic . Il pulsante dell'estensione cancellerà tutta la cronologia online, i cookie, la cache, gli URL salvati, i database SQL Web e persino i file temporanei. Click and Clean ha un anti-malware integrato e può anche essere personalizzato per eliminare determinati tipi di dati.

4. Pulsante antipanico

Questa estensione ti aiuta a chiudere tutto ciò che hai aperto con un solo clic. Questo è utile se stai lavorando su qualcosa di sensibile e una persona non autorizzata si avvicina. Quando si fa clic sul pulsante panico, tutte le schede si chiuderanno immediatamente e verranno archiviate nella cartella dei segnalibri.

5. Fantasma

Se vuoi proteggere la tua privacy online o ottenere il controllo sui tracker, questa estensione può essere la soluzione. Ghostery ti dà il controllo sui tracker in modo da poter decidere quali bloccare o sbloccare. Consente inoltre di bloccare il tracciamento di un tipo specifico.

Come CodeFuel può aiutarti a massimizzare il rendimento della tua estensione

Porta la monetizzazione delle estensioni al livello successivo con CodeFuel. La nostra piattaforma di monetizzazione completa fornisce la monetizzazione basata sugli intenti per le tue proprietà digitali, comprese le estensioni del browser.

La soluzione sfrutta l'apprendimento automatico per offrire agli utenti annunci di acquisto e di testo altamente pertinenti, personalizzati in base alle intenzioni. A differenza di altre soluzioni, CodeFuel ti offre la flessibilità di lavorare con più reti pubblicitarie come Bing e GoogleAdSense. Inizia oggi stesso a massimizzare il rendimento dell'estensione con CodeFuel.

Come riparare un'estensione di Chrome se si blocca?

Stai lavorando con la tua estensione Chrome e improvvisamente il browser si blocca. Che frustrazione. Non è comune, ma succede. Se Chrome si arresta in modo anomalo o si blocca, verrà visualizzato un messaggio di errore che indica il tipo di errore, ad esempio un errore del proxy o la pagina Web non è disponibile.

La guida di Chrome elenca una serie di suggerimenti per la risoluzione dei problemi:

• Chiudi altre schede e app
• Riavvia il browser
• Verifica la presenza di malware
• Testare la rete per problemi
• Se la tua estensione sta causando un conflitto con Chrome , segui queste istruzioni:

1. In alto a destra, fai clic su Altro Impostazioni.
2. In basso, fai clic su Avanzate .
3. Fare clic su Ripristina e pulisci Aggiorna o rimuovi le applicazioni incompatibili.
   Se non vedi questa opzione, non c'è un problema con l'applicazione.
4. Decidi se vuoi aggiornare o rimuovere ogni app dall'elenco.
   Apri l'app store del tuo computer e verifica la presenza di un aggiornamento.

FAQ