Ciao

Preistoria 1/2

• 1995: Netscape Navigator 2.0 introduce NPAPI
• 1999: Internet Explorer 5 supporta le estensioni tramite ActiveX
• A cavallo degli anni 2000: Le Browser Toolbar

Preistoria 2/2

• 2003: Chris Pederick pubblica Web Developer Toolbar per Firebird
• 2004: Nasce FireFox, supporta gli Add-on tramite XUL
• 2006: Joe Hewitt pubblica FireBug 0.2
• 2008: Più di 600 milioni di estensioni scaricate per FireFox

Storia Recente

• 2010: Chrome 4 introduce le Chrome Extension (HTML, CSS, JS)
• 2015: W3C Browser Extension Community Group: Web Extension
• 2015: Firefox inizia la transizione da XUL alle Web Extension
• 2016: Microsoft annuncia che Edge supporterà le Web Extension
• 2017: Da FireFox 57 (Quantum) in poi sono supportate solo le Web Extension

2018: Who is late to the party?

Dove funzionano le Web Extension?

Quali sono i vantaggi delle Web Extension?

Sono facili da sviluppare (con HTML/CSS/JS)

Sviluppi una volta, funziona (più o meno) con tutti

Visibilità tramite Stores

Non ti devi preoccupare di essere retrocompatibile

"Pino, onestamente, ma tu che ne sai di Web Extension?!"

(ne ho fatta una)

aprico.org

DEMO TIME!

https://github.com/pinoceniccola/bsthis-webext

Tips & Tricks

browser VS chrome

• Chrome supporta solo chrome con callback
• FireFox supporta sia browser (promises) che chrome (callback)
• Edge supporta browser ma solo con callback (!)

Tips & Tricks

browser VS chrome

1. Per il momento, usa chrome (con callback)

2. Per Edge:
   if (typeof chrome === "undefined") window.chrome = browser;

Tips & Tricks

innerHTML

• Cerca di non usare innerHTML
• Usa invece document.createRange()
.createContextualFragment(string);

Tips & Tricks

Icone e assets

• Icone UI: 16×16, 19×19, 38×38, 48×48, 96×96, 128×128
• Icone Store: 32×32 e 64×64 (Firefox), 128×128 (Chrome), 64×64 (Opera)
• Screenshots: 1280×800 (Firefox+Chrome), 612×408 (Opera)
• Banners: 420×280 (Chrome), 300×188 (Opera)

Tips & Tricks

Pubblicazione

• "Single Purpose" Policy
• Non caricare contenuto esterno
• Fornisci codice sorgente ed eventuali istruzioni di build (in caso di tooling)

Opportunità

• C'è spazio per le estensioni di contenuto?
• Ha senso trasformare la tua PWA in una Web Extension?
• Il tuo ecommerce ha una Web Extension?

Altro?!

Documentazione sulle Web Extension:

Mozilla MDN

Chrome Developer

Esempi:
https://github.com/mdn/webextensions-examples
https://developer.chrome.com/extensions/samples