Sviluppo di Estensioni del Browser: Navigare Manifest V3 e le API JavaScript

Le estensioni del browser offrono un modo potente per migliorare e personalizzare l'esperienza di navigazione. Consentono agli sviluppatori di aggiungere funzionalità ai browser web, interagire con le pagine web e integrarsi con i servizi web. Questa guida fornisce una panoramica completa dello sviluppo di estensioni del browser, concentrandosi su Manifest V3 e sulle principali API JavaScript che alimentano queste estensioni.

Comprendere le Estensioni del Browser

Un'estensione del browser è un piccolo programma software che estende la funzionalità di un browser web. Le estensioni possono modificare le pagine web, aggiungere nuove funzionalità e integrarsi con servizi esterni. Sono in genere scritte in JavaScript, HTML e CSS e confezionate come un file ZIP con un file manifest che descrive i metadati e le autorizzazioni dell'estensione.

Casi d'uso popolari per le estensioni del browser includono:

• Ad blocker: Rimuovono la pubblicità dalle pagine web.
• Password manager: Archiviano e gestiscono in modo sicuro le password.
• Strumenti di produttività: Migliorano il flusso di lavoro con funzionalità come la gestione delle attività e la presa di appunti.
• Personalizzazione dei contenuti: Modificano l'aspetto e il comportamento delle pagine web.
• Strumenti di accessibilità: Migliorano l'accessibilità web per gli utenti con disabilità.

Manifest V3: Il Nuovo Standard

Manifest V3 è l'ultima versione del file manifest dell'estensione del browser, un file JSON che descrive i metadati, le autorizzazioni e le risorse dell'estensione. Introduce modifiche significative al processo di sviluppo dell'estensione, concentrandosi principalmente su maggiore sicurezza, privacy e prestazioni. Le modifiche chiave in Manifest V3 includono:

• Service Workers: Sostituzione delle pagine di sfondo con service worker per migliorare le prestazioni e ridurre il consumo di memoria. I service worker sono script guidati da eventi che vengono eseguiti in background e gestiscono eventi come richieste di rete e allarmi.
• API Declarative Net Request: Sostituzione dell'API webRequest bloccante con l'API Declarative Net Request per filtrare le richieste di rete. Ciò migliora la privacy e la sicurezza limitando l'accesso dell'estensione al traffico di rete.
• Content Security Policy (CSP): Applicazione di criteri CSP più rigorosi per impedire l'esecuzione di codice arbitrario e mitigare i rischi per la sicurezza.
• Manifest Version: La chiave manifest_version nel file manifest.json deve essere impostata su 3.

Migrazione da Manifest V2 a Manifest V3

La migrazione da Manifest V2 a Manifest V3 richiede un'attenta pianificazione e modifiche al codice. Ecco una guida passo passo:

1. Aggiorna il file manifest: Imposta manifest_version su 3 e aggiorna i campi permissions e background per conformarsi ai requisiti di Manifest V3.
2. Sostituisci le pagine di sfondo con i service worker: Riscrivi gli script di sfondo come service worker, gestendo gli eventi utilizzando le API chrome.scripting e chrome.alarms.
3. Migra all'API Declarative Net Request: Sostituisci le chiamate API webRequest bloccanti con regole dichiarative definite nell'API declarativeNetRequest.
4. Aggiorna la content security policy: Regola il campo content_security_policy nel file manifest per conformarsi ai requisiti CSP più rigorosi.
5. Test approfonditi: Testa a fondo l'estensione in diversi browser per garantire la compatibilità e la corretta funzionalità.

Esempio: Migrazione di uno Script di Sfondo a un Service Worker

Manifest V2 (background.js):

            chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    return {cancel: true};
  },
  {urls: ["*.example.com/*"]},
  ["blocking"]
);

            

              
                Copy
              
            
          

Manifest V3 (service-worker.js):

            chrome.declarativeNetRequest.updateDynamicRules({
  removeRuleIds: [1],
  addRules: [{
    "id": 1,
    "priority": 1,
    "action": { "type": "block" },
    "condition": { "urlFilter": "*.example.com/*", "resourceTypes": ["main_frame", "sub_frame", "stylesheet", "script", "image", "object", "xmlhttprequest", "other"] }
  }]
});

            

              
                Copy
              
            
          

manifest.json (Manifest V3):

            {
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "A simple extension",
  "permissions": [
    "declarativeNetRequest",
    "declarativeNetRequestFeedback",
    "storage"
  ],
  "background": {
    "service_worker": "service-worker.js"
  },
  "declarative_net_request": {
    "rule_resources": [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules.json"
    }]
  }
}

            

              
                Copy
              
            
          

API JavaScript Essenziali per le Estensioni del Browser

Le estensioni del browser si basano su una serie di API JavaScript per interagire con il browser e le pagine web. Ecco alcune delle API più importanti:

1. chrome.runtime

L'API chrome.runtime fornisce l'accesso all'ambiente di runtime dell'estensione. Consente alle estensioni di comunicare con lo script di sfondo, accedere al file manifest e gestire il ciclo di vita dell'estensione.

Metodi chiave:

• chrome.runtime.sendMessage(): Invia un messaggio allo script di sfondo o ad altre estensioni.
• chrome.runtime.onMessage.addListener(): Ascolta i messaggi provenienti da altri script.
• chrome.runtime.getManifest(): Restituisce il file manifest dell'estensione come un oggetto JavaScript.
• chrome.runtime.reload(): Ricarica l'estensione.

Esempio: Invio di un Messaggio dallo Script di Contenuto allo Script di Sfondo

Script di Contenuto (content.js):

            chrome.runtime.sendMessage({message: "Hello from content script!"}, function(response) {
  console.log("Response from background script: ", response.message);
});

            

              
                Copy
              
            
          

Script di Sfondo (service-worker.js):

            chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log("Message from content script: ", request.message);
    sendResponse({message: "Hello from background script!"});
  }
);

            

              
                Copy
              
            
          

2. chrome.storage

L'API chrome.storage fornisce un meccanismo per archiviare e recuperare dati all'interno dell'estensione. Offre opzioni di archiviazione sia locale che sincronizzata.

Metodi chiave:

• chrome.storage.local.set(): Archivia i dati localmente.
• chrome.storage.local.get(): Recupera i dati dall'archivio locale.
• chrome.storage.sync.set(): Archivia i dati che vengono sincronizzati tra i dispositivi dell'utente.
• chrome.storage.sync.get(): Recupera i dati dall'archivio sincronizzato.

Esempio: Archiviazione e Recupero di Dati nell'Archivio Locale

            // Store data
chrome.storage.local.set({key: "value"}, function() {
  console.log("Value is set to " + "value");
});

// Retrieve data
chrome.storage.local.get(["key"], function(result) {
  console.log("Value currently is " + result.key);
});

            

              
                Copy
              
            
          

3. chrome.tabs

L'API chrome.tabs consente alle estensioni di interagire con le schede del browser. Fornisce metodi per creare, interrogare, modificare e chiudere le schede.

Metodi chiave:

• chrome.tabs.create(): Crea una nuova scheda.
• chrome.tabs.query(): Interroga le schede che corrispondono a criteri specifici.
• chrome.tabs.update(): Aggiorna le proprietà di una scheda.
• chrome.tabs.remove(): Chiude una scheda.
• chrome.tabs.executeScript(): Esegue codice JavaScript in una scheda.

Esempio: Creazione di una Nuova Scheda

            chrome.tabs.create({url: "https://www.example.com"}, function(tab) {
  console.log("New tab created with ID: " + tab.id);
});

            

              
                Copy
              
            
          

4. chrome.alarms

L'API chrome.alarms consente alle estensioni di pianificare attività da eseguire in un momento specifico o dopo un intervallo specificato. Questo è particolarmente importante in Manifest V3 in quanto sostituisce l'uso di timer all'interno delle pagine di sfondo, che non sono più supportate.

Metodi chiave:

• chrome.alarms.create(): Crea un nuovo allarme.
• chrome.alarms.get(): Recupera un allarme esistente.
• chrome.alarms.clear(): Cancella un allarme.
• chrome.alarms.getAll(): Recupera tutti gli allarmi.
• chrome.alarms.onAlarm.addListener(): Ascolta gli eventi di allarme.

Esempio: Creazione di un Allarme

            chrome.alarms.create("myAlarm", {delayInMinutes: 1, periodInMinutes: 1});

chrome.alarms.onAlarm.addListener(function(alarm) {
  if (alarm.name === "myAlarm") {
    console.log("Alarm triggered!");
  }
});

            

              
                Copy
              
            
          

5. chrome.scripting

L'API chrome.scripting consente alle estensioni di iniettare JavaScript e CSS nelle pagine web. Questa API è un componente chiave di Manifest V3 ed è utilizzata dai service worker per interagire con le pagine web dopo che sono state caricate.

Metodi chiave:

• chrome.scripting.executeScript(): Esegue codice JavaScript in una scheda o un frame.
• chrome.scripting.insertCSS(): Inserisce CSS in una scheda o un frame.

Esempio: Iniezione di JavaScript in una Scheda

            chrome.scripting.executeScript({
  target: {tabId: tabId},
  function: function() {
    console.log("Injected script!");
    document.body.style.backgroundColor = 'red';
  }
});

            

              
                Copy
              
            
          

6. chrome.notifications

L'API chrome.notifications consente alle estensioni di visualizzare notifiche all'utente. Questo è utile per fornire aggiornamenti, avvisi e altre informazioni importanti.

Metodi chiave:

• chrome.notifications.create(): Crea una nuova notifica.
• chrome.notifications.update(): Aggiorna una notifica esistente.
• chrome.notifications.clear(): Cancella una notifica.
• chrome.notifications.getAll(): Recupera tutte le notifiche.

Esempio: Creazione di una Notifica

            chrome.notifications.create('myNotification', {
  type: 'basic',
  iconUrl: 'icon.png',
  title: 'My Extension',
  message: 'Hello from my extension!'
}, function(notificationId) {
  console.log('Notification created with ID: ' + notificationId);
});

            

              
                Copy
              
            
          

7. chrome.contextMenus

L'API chrome.contextMenus consente alle estensioni di aggiungere elementi al menu contestuale del browser (menu con il tasto destro). Questo fornisce un modo conveniente per gli utenti di accedere alle funzionalità dell'estensione direttamente dalle pagine web.

Metodi chiave:

• chrome.contextMenus.create(): Crea un nuovo elemento del menu contestuale.
• chrome.contextMenus.update(): Aggiorna un elemento del menu contestuale esistente.
• chrome.contextMenus.remove(): Rimuove un elemento del menu contestuale.
• chrome.contextMenus.removeAll(): Rimuove tutti gli elementi del menu contestuale creati dall'estensione.

Esempio: Creazione di un Elemento del Menu Contestuale

            chrome.contextMenus.create({
  id: "myContextMenuItem",
  title: "My Context Menu Item",
  contexts: ["page", "selection"]
}, function() {
  console.log("Context menu item created.");
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
  if (info.menuItemId === "myContextMenuItem") {
    console.log("Context menu item clicked!");
    alert("You clicked the context menu item!");
  }
});

            

              
                Copy
              
            
          

8. chrome.i18n

L'API chrome.i18n viene utilizzata per internazionalizzare la tua estensione, rendendola accessibile agli utenti in diverse lingue e regioni. Ti consente di fornire versioni localizzate dell'interfaccia utente e dei messaggi della tua estensione.

Metodi chiave:

• chrome.i18n.getMessage(): Recupera una stringa localizzata dalla directory _locales dell'estensione.

Esempio: Utilizzo di chrome.i18n per la localizzazione

Innanzitutto, crea una directory _locales nella cartella principale della tua estensione. All'interno, crea cartelle specifiche per la lingua come en, es, fr, ecc.

All'interno di ogni cartella della lingua, crea un file messages.json. Ad esempio, in _locales/en/messages.json:

            {
  "extensionName": {
    "message": "My Extension",
    "description": "The name of the extension."
  },
  "greetingMessage": {
    "message": "Hello, world!",
    "description": "A simple greeting message."
  }
}

            

              
                Copy
              
            
          

Quindi, nel tuo codice JavaScript:

            let extensionName = chrome.i18n.getMessage("extensionName");
let greeting = chrome.i18n.getMessage("greetingMessage");
console.log(extensionName); // Output: My Extension
console.log(greeting);      // Output: Hello, world!

            

              
                Copy
              
            
          

Compatibilità tra Browser

Sebbene Chrome sia il browser più popolare per lo sviluppo di estensioni, è importante considerare la compatibilità tra browser. Firefox, Safari e altri browser supportano anche le estensioni, ma le loro API e i formati manifest potrebbero differire leggermente.

Per garantire la compatibilità tra browser:

• Utilizza l'API WebExtensions: L'API WebExtensions è un'API standardizzata per lo sviluppo di estensioni del browser supportata da più browser.
• Testa in browser diversi: Testa la tua estensione in browser diversi per identificare e correggere i problemi di compatibilità.
• Utilizza polyfill: Utilizza polyfill per fornire funzionalità API mancanti in browser diversi.
• Codice condizionale: Utilizza codice condizionale per adattarti alle differenze specifiche del browser. Ad esempio: if (typeof browser === "undefined") { var browser = chrome; }

Best Practice per lo Sviluppo di Estensioni del Browser

Ecco alcune best practice da seguire quando si sviluppano estensioni del browser:

• Riduci al minimo le autorizzazioni: Richiedi solo le autorizzazioni di cui la tua estensione ha assolutamente bisogno. Ciò migliora la privacy e la sicurezza dell'utente.
• Utilizza pratiche di codifica sicure: Segui pratiche di codifica sicure per prevenire vulnerabilità come cross-site scripting (XSS) e code injection.
• Ottimizza le prestazioni: Ottimizza le prestazioni della tua estensione per ridurre al minimo il suo impatto sulle prestazioni del browser.
• Fornisci una documentazione chiara e concisa: Fornisci una documentazione chiara e concisa per aiutare gli utenti a capire come utilizzare la tua estensione.
• Gestisci gli errori in modo corretto: Implementa la gestione degli errori per impedire che la tua estensione si arresti in modo anomalo o causi comportamenti imprevisti.
• Mantieni la tua estensione aggiornata: Aggiorna regolarmente la tua estensione per risolvere bug, vulnerabilità di sicurezza e problemi di compatibilità.
• Considera l'internazionalizzazione (i18n): Progetta la tua estensione per essere facilmente localizzata in lingue diverse. Utilizza l'API chrome.i18n.
• Rispetta la privacy dell'utente: Sii trasparente su come la tua estensione raccoglie e utilizza i dati dell'utente e ottieni il consenso dell'utente quando necessario. Rispetta le normative sulla privacy pertinenti come GDPR e CCPA.

Invio della Tua Estensione agli Store

Una volta che la tua estensione è stata sviluppata e testata, vorrai inviarla agli store delle estensioni del browser per renderla disponibile agli utenti. Ogni browser ha il suo store e il suo processo di invio:

• Chrome Web Store: Invia la tua estensione al Chrome Web Store per gli utenti Chrome. Il processo prevede la creazione di un account sviluppatore, il confezionamento della tua estensione e il caricamento nello store.
• Firefox Add-ons: Invia la tua estensione a Firefox Add-ons per gli utenti Firefox. Il processo è simile al Chrome Web Store e prevede la creazione di un account sviluppatore e l'invio della tua estensione per la revisione.
• Safari Extensions Gallery: Invia la tua estensione alla Safari Extensions Gallery per gli utenti Safari. Il processo prevede l'ottenimento di un certificato sviluppatore da Apple e l'invio della tua estensione per la revisione.

Quando invii la tua estensione, assicurati di fornire informazioni accurate e complete, tra cui un titolo descrittivo, una descrizione dettagliata, schermate e una politica sulla privacy. Gli store delle estensioni rivedono gli invii per garantire che siano conformi alle loro politiche e linee guida.

Conclusione

Lo sviluppo di estensioni del browser con Manifest V3 e le API JavaScript offre un modo potente per personalizzare e migliorare l'esperienza di navigazione. Comprendendo i concetti fondamentali, seguendo le best practice e considerando la compatibilità tra browser, gli sviluppatori possono creare estensioni preziose e coinvolgenti per gli utenti di tutto il mondo. Man mano che il web si evolve, le estensioni del browser continueranno a svolgere un ruolo fondamentale nel plasmare il futuro di Internet.

Ricorda di dare sempre la priorità alla privacy e alla sicurezza dell'utente quando sviluppi estensioni. Costruendo con questi principi in mente, puoi creare estensioni utili e affidabili.

Questa guida fornisce una solida base per iniziare con lo sviluppo di estensioni del browser. Man mano che approfondisci, esplora le varie API e funzionalità disponibili e sperimenta tecniche diverse per creare estensioni innovative e di grande impatto.