Mozilla vuole renderci la vita facile, almeno all'inizio.

Questi appunti nascono più come promemoria che come tutorial; presuppongono un minimo di dimestichezza con gli strumenti. In questo caso, assicurarsi di avere installato NPM. 
npm install --global web-ext

Con questo comando installiamo un tool che ci consente di testare la nostra estensione avviandola su una finestra separata del browser, così da non costringerci ad innumerevoli installazioni e disinstallazioni durante la fase di sviluppo.

Dopodiché creiamo una cartella che conterrà tutto il codice. In questa cartella (root) aggiungiamo un file vuoto e chiamiamolo manifest.json. Questo è il centro gravitazionale di tutta l'estensione: qui sono indicate le limitazioni, gli intenti, il nome, la descrizione, i file contenenti il codice da avviare... tutto ciò che c'è da sapere. 

// manifest.json 

{
  "manifest_version": 2,
  "name": "example-add-on",
  "version": "1.0",
  "homepage_url": "#url",
  "description": "example description"
}

Scriviamo le informazioni iniziali. In corrispondenza di "homepage_url" possiamo scrivere la pagina gitgub/gitlab nella quale andremo a pubblicare il sorgente, nel caso volessimo rendere il tutto open source.

Nella stessa cartella va la licenza, il file README, eventuali screenshot utili. E qui abbiamo concluso con l'introduzione. È il momento di scrivere l'addon vera e propria.

Possono esserci due casi: potremmo desiderare che l'add-on inietti del codice all'interno di ogni scheda che corrisponde a determinate caratteristiche oppure potremmo desiderare disporre di un tasto che apra una piccola finestra pop-up da cui smanettare con le impostazioni o altro. Nel primo caso il codice sarà conservato in un file javascript convenzionalmente chiamato background.js e quest'ultimo sarà indicato tra gli script nel manifest.json in questo modo:

// manifest.json

"background": {
    "scripts": ["background.js"]
 }

Eventuali permessi vanno necessariamente indicati, pena il non funzionamento dell'estensione:

// manifest.json

"permissions": [
    "activeTab",
    "tabs"
  ]

Nel secondo caso il file portante è una pagina html classica che viene aperta nella finestra pop-up. Eventuale CSS o JS verrà caricato da quella finestra ed agirà in quella finestra. Ovviamente sono possibili ibridazioni di queste due opzioni che diano vita ad estensioni aventi la capacità di operare all'interno ed all'esterno delle tabs, ma si tratta di esperimenti già più avanzati, non esattamente un hello world.

Per aggiungere la pagina html:

// manifest.json

"browser_action": {
    "default_icon": "icons/icon.svg",
    "default_popup": "popup.html"
  }

Come vedete viene indicata sia la pagina html da aprire nel popup, sia l'icona da mostrare nel tasto. Come esempio ho indicato una svg, ma vanno bene anche delle png, basta che siano quadrate. La dimensione standard è 48x48, ma vanno bene sia 16x16 che 32x32. Io includo anche la 128x128 a massima risoluzione, quando mi sento generoso.

Soffermandoci sul caso dell'hello world, rimando ad uno script esemplifcativo che è in grado di scrivere hello world nella console tutte le volte che si preme sul tasto dell'add-on. Questo è l'esempio più semplice di ibridazione dei due stili che io riesca a pensare.

Prima di pubblicare l'estensione è impoortante aggiungere ancora un campo al nostro manifest.json, cioè "browser_specific_settings": 

// manifest.json

"browser_specific_settings": {
    "gecko": {
      "id": "product-name@maildomain.com"
    }
  }

Senza questo si avranno problemi in fase di pubblicazione. L'ID è preferibilmente una mail unica che viene utilizzata dal sistema come punto di riferimento per il controllo delle versioni e gli aggiornamenti.

Pubblico qui un esempio completo di estensione in cui trovate tutto ciò di cui abbiamo parlato finora.

Questa estensione apre una piccola finestra html che copia automaticamente una stringa nella clipboard e si chiude si dissolve in un secondo. Nulla di complesso, ma mostra bene tutti i componenti necessari.

Come hofatto per pubblicarla? Da terminale ho lanciato:

web-ext run

Quando l'estensione era matura abbastanza, ho tentato l'esportazione con

web-ext build

In questo modo è stato generato uno zip che ho potuto testare direttamente nel browser principale. A questo punto manca solo la pubblicazione nello store ufficiale, ma per quella sconsiglio di caricare lo zip; non funzionerebbe. Non so nemmeno perché lo permettano. Aprire questo link per ottenere le credenziali.

Se non vi vengono concesse, è perché prima bisogna registrarsi, ma ci vuole qualche minuto. Ottenute le credenziali bisogna tenere a mente che funzioneranno una sola volta, poi bisognerà cambiare credenziali via via che si cambia versione o estensione.

Come usarle?

web-ext sign --user-api user:xxxxxx:xx --secret-api yyyyyyyyyyyyyyyyyyyyy

Lanciato questo comando verrà generato un file xpi che è già di suo pronto per il lancio (è possibile installare l'estensione anche da questo file).

In questa pagina cliccare su "carica un nuovo componente aggiuntivo" e selezionare il file appena generato. Riempire i campi con immagini, screen, loghi, descrizioni e quanto serve per rendere il più chiaro possibile l'intento dell'estensione. Fatto ciò non resta che aspettare che l'estensione venga approvata dal team di sviluppo. Nel frattempo è possibile accedere alla pagina dell'estensione grazie alle credenziali da sviluppatore ed installarla come una qualunque estensione. Se è andato tutto bene, dovrebbe bastare un click o due. Buon divertimento