Un approfondimento sullo sviluppo di estensioni per browser utilizzando Manifest V3 e API JavaScript. Scopri come creare estensioni potenti e sicure per i browser moderni.
Sviluppo di estensioni per browser: Manifest V3 e API JavaScript
Le estensioni per browser sono piccoli programmi software che personalizzano l'esperienza di navigazione. Possono aggiungere nuove funzionalità, modificare il contenuto dei siti web, bloccare la pubblicità e molto altro. Con l'avvento di Manifest V3, il modo in cui le estensioni vengono create e funzionano ha subito cambiamenti significativi. Questa guida completa esplorerà lo sviluppo di estensioni per browser utilizzando Manifest V3 e API JavaScript, fornendoti le conoscenze necessarie per creare estensioni potenti e sicure per i browser moderni.
Cosa sono le estensioni per browser?
Le estensioni per browser sono essenzialmente mini-applicazioni che vengono eseguite all'interno di un browser web. Estendono la funzionalità del browser e si integrano perfettamente con le pagine web. Le estensioni sono scritte utilizzando tecnologie web standard come HTML, CSS e JavaScript, il che le rende relativamente accessibili agli sviluppatori web.
Esempi di estensioni per browser popolari includono:
- Ad blocker: Blocca la pubblicità sulle pagine web, migliorando la velocità di navigazione e riducendo le distrazioni.
- Password manager: Archivia e gestisce in modo sicuro le password, inserendole automaticamente sui siti web.
- Estensioni per prendere appunti: Consentono agli utenti di prendere appunti e salvarli direttamente dalle pagine web.
- Strumenti di produttività: Migliorano la produttività fornendo funzionalità come la gestione delle attività, il monitoraggio del tempo e le modalità di concentrazione.
- Strumenti di traduzione linguistica: Traducono le pagine web in diverse lingue con un solo clic. Esempio: estensione Google Translate.
- Estensioni VPN: Instradano il traffico internet tramite proxy per বাইপাস le restrizioni geografiche e migliorare la privacy.
L'importanza di Manifest V3
Manifest V3 è l'ultima versione del file manifest, che è un file JSON che descrive l'estensione al browser. Delinea il nome, la versione, le autorizzazioni, gli script di background e altri metadati essenziali dell'estensione. Manifest V3 introduce diverse modifiche chiave rispetto al suo predecessore, Manifest V2, concentrandosi principalmente sulla sicurezza e sulle prestazioni.
Modifiche chiave in Manifest V3:
- Service Workers: Manifest V3 sostituisce le pagine di background con i service worker. I service worker sono script guidati da eventi che vengono eseguiti in background senza richiedere una pagina persistente. Sono più efficienti e meno dispendiosi in termini di risorse rispetto alle pagine di background.
- Declarative Net Request API: Questa API consente alle estensioni di modificare le richieste di rete senza intercettarle direttamente. Migliora la sicurezza e le prestazioni scaricando la logica di filtraggio al browser.
- Stricter Content Security Policy (CSP): Manifest V3 impone regole CSP più rigorose per impedire l'esecuzione di codice arbitrario, migliorando ulteriormente la sicurezza.
- API basate su Promise: Molte API sono ora basate su promise, rendendo più semplice la gestione delle operazioni asincrone.
Perché il passaggio a Manifest V3?
- Maggiore sicurezza: Manifest V3 è progettato per migliorare la sicurezza delle estensioni per browser e proteggere gli utenti da codice dannoso.
- Prestazioni migliorate: I service worker e la Declarative Net Request API contribuiscono a migliorare le prestazioni e a ridurre il consumo di risorse.
- Maggiore privacy: Manifest V3 mira a dare agli utenti un maggiore controllo sui propri dati e sulla propria privacy.
Impostazione dell'ambiente di sviluppo
Prima di iniziare a sviluppare estensioni per browser, è necessario impostare l'ambiente di sviluppo. Ciò comporta l'installazione di un editor di codice, la scelta di un browser per i test e la comprensione della struttura di file di base di un'estensione.
1. Editor di codice
Scegli un editor di codice con cui ti trovi a tuo agio. Le opzioni più popolari includono:
- Visual Studio Code (VS Code): Un editor di codice gratuito e potente con un eccellente supporto per JavaScript e altre tecnologie web.
- Sublime Text: Un editor di codice veloce e personalizzabile con un'ampia gamma di plugin.
- Atom: Un editor di codice gratuito e open-source sviluppato da GitHub.
2. Browser per i test
Seleziona un browser per testare le tue estensioni. Chrome e Firefox sono le scelte più popolari, poiché offrono strumenti di sviluppo robusti e supporto per lo sviluppo di estensioni.
3. Struttura di file di base
Un'estensione per browser è in genere costituita dai seguenti file:
- manifest.json: Questo file contiene i metadati dell'estensione, come il nome, la versione, le autorizzazioni e gli script di background.
- background.js (o script del service worker): Questo script viene eseguito in background e gestisce eventi come le azioni del browser e i clic del menu contestuale.
- content.js: Questo script viene eseguito nel contesto delle pagine web e può modificarne il contenuto.
- popup.html: Questo file definisce l'interfaccia utente del popup dell'estensione.
- popup.js: Questo script gestisce la logica del popup dell'estensione.
- options.html: Questo file definisce l'interfaccia utente della pagina delle opzioni dell'estensione.
- options.js: Questo script gestisce la logica della pagina delle opzioni dell'estensione.
- icons: Queste sono le icone utilizzate per rappresentare l'estensione nella barra degli strumenti del browser e nella pagina di gestione delle estensioni.
Creazione della tua prima estensione: "Ciao, mondo!"
Creiamo una semplice estensione "Ciao, mondo!" per dimostrare i principi di base dello sviluppo di estensioni per browser.
1. Crea un file manifest (manifest.json)
Crea un file denominato `manifest.json` in una nuova directory e aggiungi il seguente codice:
{
"manifest_version": 3,
"name": "Ciao, mondo!",
"version": "1.0",
"description": "Una semplice estensione Ciao, mondo!",
"permissions": [
"storage"
],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
},
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
Spiegazione:
- `manifest_version`: Specifica la versione del file manifest (3 per Manifest V3).
- `name`: Il nome dell'estensione.
- `version`: Il numero di versione dell'estensione.
- `description`: Una breve descrizione dell'estensione.
- `permissions`: Un array di autorizzazioni richieste dall'estensione (es. "storage").
- `action`: Definisce le proprietà del popup dell'estensione, inclusi il file popup predefinito e le icone.
- `icons`: Specifica i percorsi delle icone dell'estensione.
2. Crea un file popup (popup.html)
Crea un file denominato `popup.html` nella stessa directory e aggiungi il seguente codice:
Ciao, mondo!
Ciao, mondo!
Questa è una semplice estensione per browser.
Questo file definisce l'interfaccia utente del popup dell'estensione, che visualizzerà il messaggio "Ciao, mondo!".
3. Crea immagini delle icone
Crea tre immagini delle icone con le seguenti dimensioni: 16x16, 48x48 e 128x128 pixel. Salvale come `icon16.png`, `icon48.png` e `icon128.png` in una directory `images` all'interno della directory dell'estensione.
4. Carica l'estensione nel tuo browser
Chrome:
- Apri Chrome e vai a `chrome://extensions`.
- Abilita la "Modalità sviluppatore" nell'angolo in alto a destra.
- Fai clic su "Carica estensione non pacchettizzata" e seleziona la directory contenente i file dell'estensione.
Firefox:
- Apri Firefox e vai a `about:debugging#/runtime/this-firefox`.
- Fai clic su "Carica componente aggiuntivo temporaneo..." e seleziona il file `manifest.json`.
La tua estensione "Ciao, mondo!" dovrebbe ora essere installata e visibile nella barra degli strumenti del browser. Fai clic sull'icona dell'estensione per aprire il popup e visualizzare il messaggio "Ciao, mondo!".
Lavorare con le API JavaScript
Le estensioni per browser possono interagire con il browser e le pagine web utilizzando le API JavaScript. Queste API forniscono accesso a varie funzionalità, come:
- Tabs API: Consente di gestire le schede del browser, inclusa la creazione, l'aggiornamento e l'interrogazione delle schede.
- Storage API: Fornisce un modo per archiviare e recuperare i dati in modo persistente all'interno dell'estensione.
- Alarms API: Consente di pianificare attività da eseguire in orari specifici.
- Notifications API: Consente di visualizzare notifiche all'utente.
- Context Menus API: Consente di aggiungere elementi personalizzati al menu contestuale del browser (menu di clic destro).
- Web Request API (Declarative Net Request in Manifest V3): Consente di intercettare e modificare le richieste di rete.
- Scripting API: Consente di iniettare script nelle pagine web.
Esempio: Utilizzo della Storage API
Creiamo un'estensione che archivia e recupera il nome di un utente utilizzando la Storage API.
1. Aggiorna il file manifest (manifest.json)
Assicurati che l'array `permissions` nel tuo `manifest.json` includa `"storage"`:
{
"manifest_version": 3,
"name": "Storage Example",
"version": "1.0",
"description": "Un'estensione che utilizza la Storage API",
"permissions": [
"storage"
],
"action": {
"default_popup": "popup.html"
},
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
2. Crea un file popup (popup.html)
Crea o aggiorna il tuo `popup.html` con il seguente contenuto:
Storage Example
Storage Example
3. Crea uno script popup (popup.js)
Crea un file denominato `popup.js` e aggiungi il seguente codice:
document.addEventListener('DOMContentLoaded', () => {
const nameInput = document.getElementById('name');
const saveButton = document.getElementById('save');
const greeting = document.getElementById('greeting');
// Carica il nome salvato dallo storage
chrome.storage.sync.get('name', (data) => {
if (data.name) {
nameInput.value = data.name;
greeting.textContent = `Ciao, ${data.name}!`;
}
});
// Salva il nome nello storage quando si fa clic sul pulsante
saveButton.addEventListener('click', () => {
const name = nameInput.value;
chrome.storage.sync.set({ name: name }, () => {
greeting.textContent = `Ciao, ${name}!`;
});
});
});
Spiegazione:
- Lo script resta in ascolto dell'evento `DOMContentLoaded` per assicurarsi che il DOM sia completamente caricato prima di eseguire il codice.
- Recupera i riferimenti al campo di input, al pulsante di salvataggio e al paragrafo di saluto.
- Carica il nome salvato dallo storage utilizzando `chrome.storage.sync.get()`.
- Salva il nome nello storage quando si fa clic sul pulsante di salvataggio utilizzando `chrome.storage.sync.set()`.
- Aggiorna il paragrafo di saluto con il nome salvato o inserito.
Ricarica l'estensione nel tuo browser. Ora, quando apri il popup, puoi inserire il tuo nome, salvarlo e visualizzare il messaggio di saluto. Il nome verrà salvato nello storage dell'estensione e verrà caricato la prossima volta che apri il popup.
Esempio: Utilizzo della Tabs API
Creiamo un'estensione che visualizza l'URL della scheda corrente in un popup.
1. Aggiorna il file manifest (manifest.json)
Aggiungi l'autorizzazione `"tabs"` all'array `permissions` nel tuo `manifest.json`:
{
"manifest_version": 3,
"name": "Tabs Example",
"version": "1.0",
"description": "Un'estensione che utilizza la Tabs API",
"permissions": [
"tabs"
],
"action": {
"default_popup": "popup.html"
},
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
2. Crea un file popup (popup.html)
Crea o aggiorna il tuo `popup.html` con il seguente contenuto:
Tabs Example
Tabs Example
URL della scheda corrente:
3. Crea uno script popup (popup.js)
Crea un file denominato `popup.js` e aggiungi il seguente codice:
document.addEventListener('DOMContentLoaded', () => {
const urlDisplay = document.getElementById('url');
// Ottieni l'URL della scheda corrente
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
const tab = tabs[0];
urlDisplay.textContent = tab.url;
});
});
Spiegazione:
- Lo script resta in ascolto dell'evento `DOMContentLoaded`.
- Utilizza `chrome.tabs.query()` per ottenere la scheda attualmente attiva nella finestra corrente.
- Recupera l'URL della scheda e lo visualizza nel paragrafo `url`.
Ricarica l'estensione nel tuo browser. Ora, quando apri il popup, verrà visualizzato l'URL della scheda corrente.
Script di background e service worker
In Manifest V3, gli script di background vengono sostituiti dai service worker. I service worker sono script guidati da eventi che vengono eseguiti in background senza richiedere una pagina persistente. Sono più efficienti e meno dispendiosi in termini di risorse rispetto alle pagine di background.
Caratteristiche principali dei service worker:
- Guidati da eventi: I service worker rispondono a eventi come le azioni del browser, gli allarmi e i messaggi provenienti dagli script di contenuto.
- Asincroni: I service worker utilizzano API asincrone per evitare di bloccare il thread principale.
- Terminano quando sono inattivi: I service worker vengono terminati quando non gestiscono attivamente eventi, risparmiando risorse.
Esempio: Utilizzo di un service worker
Creiamo un'estensione che visualizza una notifica all'avvio del browser.
1. Aggiorna il file manifest (manifest.json)
Aggiorna il tuo `manifest.json` con il seguente contenuto:
{
"manifest_version": 3,
"name": "Service Worker Example",
"version": "1.0",
"description": "Un'estensione che utilizza un service worker",
"permissions": [
"notifications"
],
"background": {
"service_worker": "background.js"
},
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
Spiegazione:
- La proprietà `"background"` specifica il percorso dello script del service worker (`background.js`).
- L'array `"permissions"` include `"notifications"`, che è necessario per visualizzare le notifiche.
2. Crea uno script del service worker (background.js)
Crea un file denominato `background.js` e aggiungi il seguente codice:
chrome.runtime.onStartup.addListener(() => {
// Visualizza una notifica all'avvio del browser
chrome.notifications.create('startup-notification', {
type: 'basic',
iconUrl: 'images/icon48.png',
title: 'Browser Avviato',
message: 'Il browser è stato avviato.',
});
});
Spiegazione:
- Lo script resta in ascolto dell'evento `chrome.runtime.onStartup`, che viene attivato all'avvio del browser.
- Utilizza `chrome.notifications.create()` per visualizzare una notifica con le proprietà specificate.
Ricarica l'estensione nel tuo browser. Ora, quando riavvii il browser, dovresti visualizzare una notifica dall'estensione.
Script di contenuto
Gli script di contenuto sono file JavaScript che vengono eseguiti nel contesto delle pagine web. Possono accedere e modificare il DOM delle pagine web, consentendo di personalizzare il comportamento e l'aspetto dei siti web.
Caratteristiche principali degli script di contenuto:
- Accesso al DOM: Gli script di contenuto possono accedere e manipolare il DOM delle pagine web.
- Isolamento dagli script delle pagine web: Gli script di contenuto vengono eseguiti in un ambiente isolato, impedendo conflitti con gli script delle pagine web.
- Comunicazione con gli script di background: Gli script di contenuto possono comunicare con gli script di background tramite il passaggio di messaggi.
Esempio: Utilizzo di uno script di contenuto
Creiamo un'estensione che cambia il colore di sfondo delle pagine web in azzurro.
1. Aggiorna il file manifest (manifest.json)
Aggiorna il tuo `manifest.json` con il seguente contenuto:
{
"manifest_version": 3,
"name": "Content Script Example",
"version": "1.0",
"description": "Un'estensione che utilizza uno script di contenuto",
"permissions": [
"activeTab",
"scripting"
],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": [""],
"js": ["content.js"]
}
],
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
Spiegazione:
- La proprietà `"content_scripts"` specifica un array di script di contenuto da iniettare nelle pagine web.
- `"matches"` specifica gli URL in cui deve essere iniettato lo script di contenuto (`
` corrisponde a tutti gli URL). - `"js"` specifica il percorso dello script di contenuto (`content.js`).
- L'array `"permissions"` include `"activeTab"` e `"scripting"`, necessari per iniettare gli script.
2. Crea uno script di contenuto (content.js)
Crea un file denominato `content.js` e aggiungi il seguente codice:
document.body.style.backgroundColor = 'lightblue';
3. Crea un Service Worker (background.js)
Crea un file denominato `background.js` e aggiungi il seguente codice:
chrome.action.onClicked.addListener((tab) => {
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: () => {
document.body.style.backgroundColor = 'lightblue';
}
});
});
Spiegazione:
- Lo script di contenuto imposta semplicemente il colore di sfondo dell'elemento `body` su azzurro.
- Il service worker resta in ascolto dell'evento di clic ed esegue una funzione all'interno della scheda corrente, che cambia il colore di sfondo.
Ricarica l'estensione nel tuo browser. Ora, quando apri una pagina web, il colore di sfondo sarà azzurro.
Debug delle estensioni per browser
Il debug delle estensioni per browser è una parte essenziale del processo di sviluppo. Chrome e Firefox forniscono eccellenti strumenti di sviluppo per il debug delle estensioni.
Debug in Chrome:
- Apri Chrome e vai a `chrome://extensions`.
- Abilita la "Modalità sviluppatore" nell'angolo in alto a destra.
- Fai clic su "Ispeziona viste pagina di sfondo" per la tua estensione. Verranno aperti gli strumenti di sviluppo di Chrome per lo script di background.
- Per eseguire il debug degli script di contenuto, apri la pagina web in cui è iniettato lo script di contenuto e quindi apri gli strumenti di sviluppo di Chrome per quella pagina. Dovresti visualizzare lo script di contenuto elencato nel pannello "Origini".
Debug in Firefox:
- Apri Firefox e vai a `about:debugging#/runtime/this-firefox`.
- Trova la tua estensione nell'elenco e fai clic su "Ispeziona". Verranno aperti gli strumenti di sviluppo di Firefox per l'estensione.
- Per eseguire il debug degli script di contenuto, apri la pagina web in cui è iniettato lo script di contenuto e quindi apri gli strumenti di sviluppo di Firefox per quella pagina. Dovresti visualizzare lo script di contenuto elencato nel pannello "Debugger".
Tecniche di debug comuni:
- Registrazione della console: Usa `console.log()` per stampare messaggi nella console.
- Punti di interruzione: Imposta punti di interruzione nel tuo codice per mettere in pausa l'esecuzione ed esaminare le variabili.
- Mappe di origine: Usa le mappe di origine per eseguire il debug del tuo codice nella sua forma originale, anche se è stato minimizzato o transpilato.
- Gestione degli errori: Implementa la gestione degli errori per intercettare e registrare gli errori.
Pubblicazione della tua estensione
Dopo aver sviluppato e testato la tua estensione, puoi pubblicarla nel Chrome Web Store o nel marketplace dei componenti aggiuntivi di Firefox.
Pubblicazione nel Chrome Web Store:
- Crea un account sviluppatore nel Chrome Web Store.
- Impacchetta la tua estensione in un file `.zip`.
- Carica il file `.zip` nel Chrome Web Store.
- Fornisci i metadati richiesti, come il nome, la descrizione e le schermate dell'estensione.
- Invia la tua estensione per la revisione.
Pubblicazione nel marketplace dei componenti aggiuntivi di Firefox:
- Crea un account sviluppatore nel marketplace dei componenti aggiuntivi di Firefox.
- Impacchetta la tua estensione in un file `.zip`.
- Carica il file `.zip` nel marketplace dei componenti aggiuntivi di Firefox.
- Fornisci i metadati richiesti, come il nome, la descrizione e le schermate dell'estensione.
- Invia la tua estensione per la revisione.
Best practice per la pubblicazione:
- Scrivi una descrizione chiara e concisa della tua estensione.
- Fornisci schermate e video di alta qualità per mostrare le funzionalità della tua estensione.
- Testa accuratamente la tua estensione prima di inviarla.
- Rispondi prontamente alle recensioni e al feedback degli utenti.
- Mantieni la tua estensione aggiornata con le ultime versioni del browser e le patch di sicurezza.
Considerazioni sulla sicurezza
La sicurezza è un aspetto critico dello sviluppo di estensioni per browser. Le estensioni possono potenzialmente accedere a dati sensibili dell'utente e modificare il contenuto delle pagine web, quindi è essenziale seguire le best practice di sicurezza per proteggere gli utenti da codice dannoso.
Considerazioni chiave sulla sicurezza:
- Riduci al minimo le autorizzazioni: Richiedi solo le autorizzazioni di cui la tua estensione ha effettivamente bisogno.
- Valida l'input dell'utente: Sanitizza e valida tutto l'input dell'utente per prevenire attacchi di cross-site scripting (XSS).
- Usa HTTPS: Usa sempre HTTPS per comunicare con i server remoti.
- Content Security Policy (CSP): Applica una CSP rigorosa per impedire l'esecuzione di codice arbitrario.
- Aggiorna regolarmente la tua estensione: Mantieni la tua estensione aggiornata con le ultime patch di sicurezza.
Seguendo queste linee guida sulla sicurezza, puoi contribuire a garantire che la tua estensione per browser sia sicura per gli utenti.
Conclusione
Lo sviluppo di estensioni per browser utilizzando Manifest V3 e API JavaScript offre un modo potente per personalizzare l'esperienza di navigazione e aggiungere nuove funzionalità ai browser web. Comprendendo i concetti chiave, le API e le best practice descritte in questa guida, puoi creare estensioni potenti e sicure che migliorano la produttività, migliorano la sicurezza e offrono una migliore esperienza di navigazione agli utenti di tutto il mondo. Man mano che il web continua a evolversi, le estensioni per browser svolgeranno un ruolo sempre più importante nel plasmare il futuro delle interazioni online. Cogli le opportunità offerte da Manifest V3 e dalla ricchezza di API JavaScript per creare estensioni innovative e di valore.