Estensione Web Chrome: non è necessaria alcuna esperienza di codifica precedente: 6 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:00

Le estensioni di Chrome sono piccoli programmi creati per migliorare l'esperienza di navigazione degli utenti. Per maggiori informazioni sulle estensioni di Chrome, visita

Per creare un'estensione Web di Chrome, è necessaria la codifica, quindi è molto utile rivedere HTML, JavaScript e CSS nel sito Web seguente:

www.w3schools.com/default.asp (w3 school è un buon sito web per le risorse di codifica)

Non sai come codificare? Non preoccuparti, questo tutorial ti aiuterà a orientarti.

La cosa migliore delle estensioni di Chrome è che possono essere personalizzate. Non è solo una cosa specifica che può essere fatta, quindi sii creativo.

Forniture

Le forniture necessarie sono le seguenti:

• Un computer con un editor di testo (sto usando Blocco note)
• Google Chrome

E questo è tutto!

Passaggio 1: creare la directory

Innanzitutto, crea una cartella per contenere tutti i file e chiamala "estensione". Il nome può essere modificato in seguito, se lo si desidera.

Passaggio 2: crea il file manifest e codificalo

Il file manifest è una parte molto importante dell'estensione. Dice all'estensione esattamente cosa fare ed essere. I file manifest sono formattati in JSON. Il primo passaggio consiste nell'aprire un editor di testo e salvare un nuovo file come "manifest.json".

Quindi digita lo script seguente:

{

"name": "Prima estensione", "version": "1.0", "description": "Posso codificare un'estensione", "manifest_version": 2, "browser_action": { "default_title": "Prima estensione" } }

Ricorda le virgole dopo i valori!

Dopo averlo digitato, salva il file manifest e vai su chrome://extensions (Chrome dovrebbe essere usato come browser per questo). Una volta su chrome://extensions, attiva la modalità sviluppatore. Successivamente, premi il pulsante 'Carica decompresso' e seleziona la cartella 'estensione'.

rullo di tamburi prego…

Sìì! Questa è un'estensione, tranne che… è un po' noiosa. Al momento non fa letteralmente nulla, ma presto sarà super cool.

Passaggio 3: crea le icone e aggiorna il manifest

Un sito Web che funziona bene per disegnare icone è https://www.piskelapp.com/. Ci sono anche altri programmi di disegno disponibili per l'uso. Le icone dovrebbero essere quadrate. Questo progetto utilizzerà icone 16x16, 32x32, 48x48 e 128x128. Una volta creata l'icona, crea una cartella chiamata "immagini" nella cartella dell'estensione e inserisci l'icona in quella cartella. Potrebbe essere una buona idea nominare un'immagine in base alle sue dimensioni. Ad esempio, 'icon32.png'. Il nuovo codice è di seguito:

{

"name": "Prima estensione", "version": "1.0", "description": "Posso codificare un'estensione", "manifest_version": 2, "browser_action": { "default_title": "Prima estensione", " default_icon": { "16": "images/icon16.png", "32": "images/icon32.png", "48": "images/icon48.png", "128": "images/icon128-p.webp

Per riferimento sul codice manifest, vai a

Passaggio 4: aggiungi un popup

Questa estensione avrà un popup. Il popup è un file HTML (Hypertext Markup Language), quindi è bene imparare prima le basi di HTML, CSS e JavaScript.

Innanzitutto, salva un documento come file ' popup.html ' nella cartella dell'estensione.

Quindi, modifica il file manifest per mostrare ' popup.html ' quando viene cliccato. Il nuovo codice è di seguito:

{

"name": "Prima estensione", "version": "1.0", "description": "Posso codificare un'estensione", "manifest_version": 2, "browser_action": { "default_title": "Prima estensione", " default_icon": { "16": "images/icon16.png", "32": "images/icon32.png", "48": "images/icon48.png", "128": "images/icon128-p.webp

Non dimenticare la virgola!

Ora, se il seguente codice HTML viene aggiunto a popup.html, verrà visualizzato "Hello World" quando si fa clic.

Ciao mondo

Passaggio 5: fallo sembrare bello e rendilo interattivo

Se viene digitata una riga HTML di base, si ottiene il minimo indispensabile. Se viene aggiunto CSS (Cascading Style Sheets), sembrerà più interessante e se viene aggiunto JavaScript, può essere più interattivo. Questo tutorial non entrerà nei dettagli spiegando HTML, JavaScript e CSS, ma ci sono molte risorse online. Di seguito è riportato il codice per il semplice programma "Hello World", quindi il programma più colorato, rispettivamente:

Ciao mondo

Ciao mondo

#ciao{ background-color: #000000; colore: #ff0000; bordo: 8px dall'inizio #86a3b2; bordo-raggio: 50px; trasformare: ruotare (57deg); imbottitura: 10px; selezione utente: nessuno; cursore: mirino; transizione: trasforma 2s; } #ciao:hover {trasforma:ruota(-417deg); }

Questo secondo esempio potrebbe essere molto confuso, per un principiante. Ma questo era per mostrarti quanto sia importante il CSS per un programma/estensione. Ora sarebbe un buon momento per fare una pausa e imparare un po' di codice HTML5 e usare developer.chrome.com come riferimento. Potrebbe volerci un po' di tempo, ma si può fare una grande estensione.

Passaggio 6: pubblicazione sul Chrome Web Store

Se qualcuno ha realizzato un'estensione davvero eccezionale e vuole condividerla con il mondo, può pubblicarla. Questo è, dopo tutto, il punto di un'estensione. Questo tutorial ha solo cercato di spiegare il file manifest e come puoi usarlo, e aveva solo un programma "Hello World".

La prima cosa da fare per rendere pubblica un'estensione è trasformare la cartella dell'estensione in un file zip. La seconda cosa da fare è andare su https://chrome.google.com/webstore/category/extensions e accedere a un account google. Quindi, fai clic sul pulsante a forma di ingranaggio delle impostazioni e quindi fai clic su "dashboard per sviluppatori". Premi il pulsante "Nuovo articolo" per caricare il file zip. Una volta lì, è necessario modificare l'elenco dello Store, la privacy e i prezzi. Un'estensione può essere pubblicata facilmente se viene inviata per la revisione.

Ora che l'estensione è terminata, continua a codificare!