Come creare Chrome Extensions da zero

Se lo desideri aggiungere o modificare alcune funzionalità in Google Chrome, devi utilizzare un'estensione. Sebbene tu possa scaricare un'estensione dal Chrome Web Store, ma a volte hai bisogno di una funzionalità specifica che non puoi trovare in nessuna estensione esistente.

Bene, la buona notizia è che puoi creare la tua estensione personale per aggiungere o modificare la funzionalità richiesta o creare un nuovo componente aggiuntivo o un'app per Google Chrome, che puoi in seguito distribuire ad altri utenti utilizzando il Chrome Web Store.

Nel seguito, ti mostrerò il modo più semplice per creare un'estensione. Se hai una certa conoscenza dello sviluppo web (HTML, CSS e JS), ti sentirai come a casa. Altrimenti, guarda prima questi canali impara le basi dello sviluppo web, quindi continua sotto.

Prerequisiti

È necessario aver completato i seguenti requisiti prima di iniziare con questo tutorial.

1. Devi avere familiarità con HTML, CSS e JavaScript. [Controlla risorse]
2. Devi avere un editor di codice scrivere l'estensione. [Confronta gli editor]
3. (Facoltativo) Se desideri distribuire la tua estensione ad altri utenti, devi avere a account sviluppatore su Chrome Web Store. [Crea un account]

Nota: Google ti chiede di pagare una piccola tassa per la creazione di un account sviluppatore sul Chrome Web Store.

Crea un'estensione

In questo tutorial, condividerò il processo di creazione di un da fare estensione per Google Chrome. Sarà un'utilità (come mostrato di seguito) per dimostrare i componenti essenziali e le abilità fornite alle estensioni.

1. Ottieni un modello

Google Chrome, come qualsiasi altra piattaforma, richiede il suo estensioni per avere una struttura impostata, che può sembrare complesso per i principianti. Questo è il motivo per cui è bene ottenere un modello standard per un'estensione che fornirà tutte le necessità.

Extensionizr è il miglior generatore di piastre per le estensioni cromate. Ti permette di scegliere uno dei tipi di estensione specificati - azione del browser (un'azione per tutte le pagine o il browser), azione della pagina (un'azione per la pagina corrente), o estensione nascosta (un'azione di sfondo che di solito è nascosta nell'interfaccia frontale).

Inoltre, fornisce varie opzioni di regolazione fine a includere / escludere componenti aggiuntivi necessari, permessi, ecc. Devi selezionare “Azione del browser” come il tipo di estensione e “Senza sfondo” come la pagina di sfondo per questo tutorial.

Quando hai finito di scegliere le opzioni per creare l'estensione di esempio, premi il tasto “Scaricalo!” pulsante in Extensionizr. Finalmente, estrai l'archivio (.zip) in una directory e apri il tuo editor di codice per iniziare a scrivere l'estensione.

2. Codifica l'estensione

Dopo aver scaricato ed estratto il modello, vedrai una struttura di directory come mostrato nello screenshot sottostante. Il modello è organizzato in modo ordinato e devi sapere che il file più importante è “manifest.json“.

Conosciamo anche altri file e cartelle in questa directory:

1. _locales: È abituato a memorizzare le informazioni sulla lingua per un'app multilingue.
2. css: Funziona per memorizzare librerie front-end di terze parti come Bootstrap 4.
3. icone: È progettato per avere icone per la tua estensione in varie dimensioni.
4. js: È comodo da salvare librerie back-end di terze parti come jQuery 3.
5. src: Memorizza il codice effettivo che scriverai per la tua estensione.

manifest.json

Contiene il metadati di base sulla tua app, che definisce i dettagli della tua app sul browser. Puoi modificarlo per impostare il nome, la descrizione, il sito web, l'icona, ecc. Della tua estensione insieme a dettagli come azioni e permessi del browser.

Ad esempio, nel codice seguente, noterai che ho cambiato nome, descrizione e homepage_url insieme a default_title sotto browser_action. Inoltre, io aggiunto “Conservazione” sotto permessi dato che abbiamo bisogno di memorizzare i dati nella nostra estensione.

 "name": "Todoizr - To-do Simplified", "version": "0.0.1", "manifest_version": 2, "description": "App to-do semplice per tutti.", "homepage_url": " https://go.aksingh.net/todoizr "," icons ": " 16 ":" icons / icon16.png "," 48 ":" icons / icon48.png "," 128 ":" icons / icon128 .png "," default_locale ":" en "," browser_action ": " default_icon ":" icons / icon19.png "," default_title ":" Todoizr - To-do semplificato "," default_popup ":" src / browser_action / browser_action.html "," permessi ": [" archiviazione "] 

src \ browser_action

Questa directory manterrà il codice per l'azione del browser. Nel nostro caso, lo faremo codifica la finestra popup mostrato facendo clic sull'icona dell'estensione nel browser. La nostra estensione consentirà agli utenti di aggiungere e visualizzare gli elementi da fare nel popup.

Nota: Puoi sempre iniziare subito con il codice clonando questo repository.

Codice iniziale dal modello

Sebbene questa directory avesse solo un file HTML con tutto il codice, ho deciso di dividerlo in tre file separati per una migliore chiarezza. Detto questo, il file HTML chiamato “browser_action.html” ora ha il seguente codice:

Inoltre, il file di stile chiamato “browser_action.css” ha il contenuto sottostante mentre il file JavaScript ha nome “browser_action.js” è vuoto per ora.

 #mainPopup padding: 10px; altezza: 200 px; larghezza: 400 px; famiglia di font: Helvetica, Ubuntu, Arial, sans-serif;  h1 font-size: 2em;  

Progetta l'interfaccia del popup

Dopo aver impostato il progetto iniziale, progettiamo prima l'interfaccia del popup. io ho impostare l'interfaccia con un approccio minimalista, mostrando il nome in alto seguito da un modulo per aggiungere elementi to-do e un'area sotto per visualizzare gli elementi aggiunti. È ispirato al design semplicistico di “Stile modulo 5“.

Nel codice seguente, ho aggiunto due div: uno per la visualizzazione del modulo per aggiungere un elemento to-do e l'altro per la visualizzazione dell'elenco di elementi attività già aggiunte. Detto questo, il nuovo codice per “browser_action.html” è come segue:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

E il file di stile “browser_action.css” ora ha il seguente codice:

 @import url ("./ form_style_5.css"); #mainPopup height: 200px; larghezza: 300 px; famiglia di font: Helvetica, Ubuntu, Arial, sans-serif;  / * Modulo oggetto To-do * / .form-style-5 margin: auto; imbottitura: 0px 20px;  .form-style-5: first-child background: none;  .form-style-5 h1 color: # 308ce3; font-size: 20px; allineamento del testo: centro;  .form-style-5 input [type = "text"] width: auto; float: a sinistra; margin-bottom: unset;  .form-style-5 input [type = "button"] background: # 308ce3; larghezza: auto; float: giusto; imbottitura: 7px; confine: nessuno; border-radius: 4px; font-size: 14px;  .form-style-5 input [type = "button"]: hover background: # 3868d5;  / * Elenco degli elementi da fare * / .form-style-5: last-child height: inherit; margin-bottom: 5px;  .form-style-5 ul padding: 20px;  .form-style-5 ul li dimensione font: 14px;  

Infine, il file di stile di terze parti “form_style_5.css” ha il contenuto qui sotto. Viene semplicemente preso dal suo sito Web per ispirare il design della nostra estensione.

 / * Form Style 5 di Sanwebe.com * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 larghezza massima: 500px; imbottitura: 10px 20px; sfondo: # f4f7f8; margine: 10px auto; imbottitura: 20px; sfondo: # f4f7f8; border-radius: 8px; famiglia di font: Georgia, "Times New Roman", Times, serif;  .set-style-5 fieldset border: none;  .form-style-5 legend font-size: 1.4em; margin-bottom: 10px;  .form-style-5 label display: block; margin-bottom: 8px;  .form-style-5 input [type = "text"], input .form-style-5 [type = "date"], input .form-style-5 [type = "datetime"], .form-style -5 input [type = "email"], input .form-style-5 [type = "number"], input .form-style-5 [type = "search"], input .form-style-5 [tipo = "tempo"], .form-style-5 input [type = "url"],. text-style-5 textarea, .form-style-5 select font-family: Georgia, "Times New Roman", Times , grazie; sfondo: rgba (255,255,255, .1); confine: nessuno; border-radius: 4px; font-size: 16px; margine: 0; contorni: 0; imbottitura: 7px; larghezza: 100%; dimensionamento della scatola: border-box; -webkit-box-dimensionamento: border-box; -moz-box-dimensionamento: border-box; background-color: # e8eeef; color: # 8a97a0; -webkit-box-shadow: 0 1px 0 rgba (0,0,0,0.03) inserito; box-shadow: 0 1px 0 rgba (0,0,0,0.03) inserito; margin-bottom: 30px;  .form-style-5 input [type = "text"]: focus, .form-style-5 input [type = "date"]: focus, .form-style-5 input [type = "datetime"]: focus, .form-style-5 input [type = "email"]: focus, .form-style-5 input [type = "number"]: focus, .form-style-5 input [type = "search"] : focus, .form-style-5 input [type = "time"]: focus, .form-style-5 input [type = "url"]: focus, .form-style-5 textarea: focus, .form- style-5 select: focus background: # d2d9dd;  .form-style-5 select -webkit-appearance: menulist-button; altezza: 35px;  .form-style-5 .number background: # 1abc9c; colore: #fff; altezza: 30 px; larghezza: 30 px; display: blocco in linea; font-size: 0.8em; margin-right: 4px; altezza della linea: 30px; allineamento del testo: centro; text-shadow: 0 1px 0 rgba (255,255,255,0,2); border-radius: 15px 15px 15px 0px;  .form-style-5 input [type = "submit"], input .form-style-5 [type = "button"] position: relativo; blocco di visualizzazione; imbottitura: 19px 39px 18px 39px; colore: #FFF; margine: 0 auto; background: # 1abc9c; dimensione del font: 18px; allineamento del testo: centro; stile carattere: normale; larghezza: 100%; border: 1px solid # 16a085; border-width: 1px 1px 3px; margin-bottom: 10px;  .form-style-5 input [type = "submit"]: hover, .form-style-5 input [type = "button"]: hover background: # 109177;  

Scrivi la logica del popup

Una volta terminato il front-end dell'estensione, scriviamo ora la logica per il suo funzionamento. Abbiamo bisogno che la nostra estensione sia in grado di aggiungere elementi da fare e anche visualizzarli nella finestra popup. Quindi aggiungeremo un listener di clic sul pulsante per aggiungere il testo di input come elemento to-do e un listener di caricamento della pagina per mostrare quegli elementi.

Nel codice qui sotto, useremo due funzioni - sync.get () e sync.set (), di cui fanno parte “chrome.storage“. Abbiamo bisogno del secondo per salvare gli elementi da fare nella memoria e il primo per recuperarli e mostrarli.

Detto questo, di seguito è riportato il codice finale del file “browser_action.js” file. Come puoi vedere qui sotto, il codice è altamente commentato per aiutarti a capire il suo scopo.

 function loadItems () / * Prima ottieni () i dati dalla memoria * / chrome.storage.sync.get (['todo'], function (result) var todo = [] if (result && result.todo && result.todo.trim ()! == ") / * Analizza e recupera l'array quando viene salvato come stringa * / todo = JSON.parse (result.todo) console.log ('todo.length =' + todo.length) per (var i = 0; i < todo.length; i++)  item = todo[i] if (item && item.trim() !==")  /* Append the items in the #list for showing them */ var list = document.getElementById('list') var entry = document.createElement('li') var text = document.createTextNode(item) entry.appendChild(text) list.appendChild(entry)   )  /* Load the to-do items upon popup load */ document.addEventListener('DOMContentLoaded', function() console.log('Inside doc.loaded()') loadItems() ) /* Save the to-do item upon button click */ document.getElementById('btn').addEventListener('click', function (ev)  console.log('Inside btn.click()') text = document.getElementById('txt').value if (text && text.trim() !==")  /* First get() old data as calling set() will replace it */ chrome.storage.sync.get(['todo'], function(result)  var todo = [] if (result && result.todo && result.todo.trim() !==")  /* Parse and get the array as it is saved as a string */ todo = JSON.parse(result.todo)  todo.push(text) chrome.storage.sync.set('todo': JSON.stringify(todo), function()  /* Data is saved now */ var list = document.getElementById('list') while (list.firstChild)  list.removeChild(list.firstChild)  loadItems() ) )  ) 

3. Caricare l'estensione

Dopo aver terminato di scrivere la tua estensione, è il momento di testarla tramite la funzionalità di Google Chrome che offre il caricamento di estensioni non archiviate e decompresse. Ma prima, devi abilita la modalità sviluppatore nel browser: fai clic su opzioni pulsante > scegliere “Più strumenti” > estensioni, e quindi attivare “modalità sviluppatore“.

Ora vedrai più pulsanti sotto la barra di ricerca. Qui clicca il “Caricare scompattato” pulsante. Richiederà la directory: sfoglia e seleziona la directory dell'estensione e caricherà l'estensione. Se modifichi o aggiorni il codice dell'estensione, puoi fare clic su ricarica il pulsante per caricare le ultime modifiche.

Nel nostro esempio, vedrai l'icona dell'estensione accanto all'icona del profilo perché abbiamo aggiunto un'azione browser nella nostra estensione di esempio. Puoi fare clic su quell'icona su aggiungi e visualizza gli elementi da fare nella nostra estensione in quanto è l'azione specificata.

Distribuisci un'estensione

Anche se lo è facile caricare un'estensione nel Chrome Web Store, il processo è troppo lungo per coprire tutti i dettagli. In breve, crei un account sviluppatore, impacchetta la tua estensione e poi invialo insieme ai dettagli del suo contenuto (come nome, icona, schermate, ecc.); come elencato nella sua guida passo-passo.

Cosa succederà? Leggi e codifica

Come ci si potrebbe aspettare, lo scopo di questo tutorial è di iniziare con lo sviluppo dell'estensione per Google Chrome. Ho cercato di coprire i concetti di base; però, devi sapere molto di più per fare un serio sviluppo delle estensioni.

Detto questo, di seguito sono alcuni dei miei risorse go-to preferite per imparare a sviluppare estensioni per Google Chrome e altri browser basati su Chromium:

1. Tutte le abilità, i componenti e le funzionalità delle estensioni.
2. Esempi di estensioni del team di Google Chrome.

Se hai esaminato queste risorse e sei pronto per una sfida, prova ad aggiungere le funzionalità seguenti nell'estensione che hai appena completato:

1. Un'opzione per eliminare gli elementi da fare salvati.
2. Una funzione per mostrare le notifiche quando si fa l'aggiunta di un oggetto.

Tutto ciò riguarda lo sviluppo della prima estensione per il browser più popolare. Che estensione hai creato? Hai avuto un problema? Per favore fatemi sapere la vostra storia scrivendo un commento qui sotto o scrivendo a @aksinghnet.

Ultimo ma non meno importante, nota che puoi provare Todoizr (l'estensione che abbiamo creato) su Chrome Web Store e controllarne il codice completo in questo repository.