Come creare una semplice estensione di Chrome

Creare un'estensione di Chrome è un processo abbastanza semplice. Quando hai finito, sarai in grado di usarlo sul tuo computer per migliorare il funzionamento del browser.

Ci sono alcuni componenti di base che il browser richiede prima che l'estensione possa essere completamente operativa. Esamineremo tutto questo di seguito, incluso come far funzionare la tua estensione personalizzata in Chrome senza la necessità di caricarla o condividerla con nessun altro.

La creazione di un'estensione Chrome(Chrome) complessa è un processo molto più dettagliato di quello che vedrai di seguito, ma il processo generale è lo stesso. Continua a leggere per scoprire come creare un'estensione di Chrome che puoi iniziare a utilizzare oggi.

Suggerimento(Tip) : per vedere quanto potrebbe essere fantastica la tua estensione, dai un'occhiata a queste fantastiche estensioni di Chrome(these amazing Chrome extensions) .

Come creare un'estensione di Chrome

Utilizzando questa guida, creerai una semplice estensione di Chrome che elenca alcuni dei tuoi siti Web preferiti. È completamente personalizzabile e davvero facile da aggiornare.

Ecco cosa fare:

  • Crea una cartella che conterrà tutti i file che compongono l'estensione.
  • Crea i file di base richiesti da questa estensione: manifest.json , popup.html , background.html , styles.css .
  • Apri popup.html in un editor di testo e quindi incolla tutto quanto segue, assicurandoti di salvarlo quando hai finito.
<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Favorite Sites</title>
      <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
<body>
   <ul id="myUL">
      <li><a href="https://helpdeskgeek.com/" target="_blank">Help Desk Geek</a></li>
      <li><a href="https://www.online-tech-tips.com/" target="_blank">Online Tech Tips</a></li>
      <li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li>
   </ul>
</body>
</html>

Sentiti(Feel) libero di modificare i link e il testo del link, o se vuoi rendere l' estensione di Chrome esattamente come siamo, mantieni tutto uguale.

  • Apri manifest.json nell'editor di testo e copia/incolla quanto segue:

{
“update_url”: “https://clients2.google.com/service/update2/crx”,

“manifest_version”: 2,
“name”: “Favorite Sites”,
“description”: “Tutti i miei siti preferiti.”, ( “description”: “All my favorite websites.”,)
“version”: “1.0”,
“icons”: {
“16”: “icon.png”,
“32”: “icon.png”,
“48”: “icon.png”,
“128”: “icon.png”
},

   "sfondo": {  (   “background”: { )
        "pagina":"sfondo.html" (        “page”:”background.html”)
},

    “browser_action” : {
        “default_icon” : “icon.png”,
        “default_title” : “Siti preferiti”, (        “default_title” : “Favorite Sites”,)
        “default_popup”: “popup.html”
    }
}

Le aree commestibili di questo codice includono nome(name) , descrizione(description) e titolo_predefinito(default_title) .

  • Apri styles.css e incolla il codice seguente. Questo è ciò che decora il menu a comparsa per renderlo molto più attraente da guardare e ancora più facile da usare.

#myUL {
tipo-stile-elenco: nessuno; (list-style-type: none;)
   imbottitura: 0; (   padding: 0;)
   margine: 0; (   margin: 0;)
   larghezza: 300px; (   width: 300px;)
}

#myUL li a {
  border: 1px solid #ddd;
  margine superiore: -1px; (  margin-top: -1px;)
  background-color: #f6f6f6;
  imbottitura: 12px; (  padding: 12px;)
  decorazione del testo: nessuna; (  text-decoration: none;)
  dimensione del carattere: 18px; (  font-size: 18px;)
  colore nero; (  color: black;)
  blocco di visualizzazione; (  display: block;)
  famiglia di caratteri: 'Noto Sans', sans-serif; (  font-family: ‘Noto Sans’, sans-serif;)
}

#myUL li a:hover:not(.header) {
   background-color: #eee;
}

C'è molto che puoi cambiare nel file CSS . Gioca con queste opzioni dopo aver creato la tua estensione di Chrome per personalizzarla a tuo piacimento.(Chrome)

  • Crea(Create) un'icona per l'estensione e denominala icon.png . Inseriscilo nella cartella dell'estensione di Chrome . Come puoi vedere nel codice sopra, puoi creare un'icona separata per quelle dimensioni: 16 × 16 pixel, 32 × 32 e così via.

Suggerimento: (Tip: )Google ha ulteriori informazioni(Google has more information) sulla creazione di estensioni di Chrome . Ci sono altri esempi e opzioni avanzate che vanno oltre i semplici passaggi che abbiamo mostrato qui.

Come aggiungere un'estensione personalizzata(Custom Extension) a Chrome

Ora che hai creato l' estensione di Chrome , è il momento di aggiungerla al browser in modo da poter effettivamente utilizzare tutti i file che hai appena creato. L'installazione di un'estensione personalizzata prevede una procedura diversa da come installeresti una normale estensione di Chrome(how you’d install a normal Chrome extension) .

  • Dal menu Chrome, vai su Altri strumenti(More tools ) > Estensioni(Extensions) . Oppure digita chrome://extensions/ nella barra degli indirizzi.
  • Seleziona il pulsante accanto a Modalità sviluppatore(Developer mode) se non è già selezionato. Verrà attivata una modalità speciale che ti consente di importare le tue estensioni di Chrome .

  • Usa il pulsante Carica decompresso(Load unpacked ) nella parte superiore di quella pagina per selezionare la cartella che hai creato durante il passaggio 1(Step 1) sopra.

  • Accetta(Accept) tutte le richieste se le vedi. In caso contrario, la tua estensione Chrome personalizzata verrà visualizzata insieme a tutte le altre che hai nell'angolo in alto a destra del browser.

Modifica dell'estensione di Chrome

Ora che la tua estensione di Chrome è utilizzabile, puoi apportare modifiche per renderla tua. 

Il file styles.css controlla come appare l'estensione, quindi puoi regolare lo stile generale dell'elenco e cambiare il colore o il tipo del carattere. W3Schools è una delle migliori risorse per conoscere tutte le diverse cose che puoi fare con i CSS .

Per cambiare l'ordine in cui sono elencati i siti web, o per aggiungere o più siti o rimuovere quelli esistenti, modifica il file popup.html. Assicurati solo di mantenere le tue modifiche solo sull'URL(URL) e sul nome. Tutti gli altri caratteri, come <li> e <html> , sono obbligatori e non devono essere modificati. Il tutorial HTML su W3Schools(HTML Tutorial on W3Schools) è un buon posto per saperne di più su quella lingua.



Samuele Milani

About the author

ingegnere audiofilo e specialista di prodotti audio con oltre 10 anni di esperienza. Sono specializzato nella creazione di altoparlanti e cuffie per musica di qualità dall'inizio alla fine. Sono un esperto nella risoluzione dei problemi audio e nella progettazione di nuovi altoparlanti e sistemi di cuffie. La mia esperienza va oltre la semplice realizzazione di buoni prodotti; Ho anche una passione per aiutare gli altri a essere il meglio di sé possibile, sia attraverso l'istruzione che il servizio alla comunità.


Related posts