Firefox et les WebExtensions

Ubuntu Party 17.04 : Le 21 mai 2017
Firefox
et les
WebExtensions
Christophe Villeneuve
@hellosct1

Qui ???
Christophe
Villeneuve
mozilla reps - firefox os - B2GOS - ausy - afup – lemug.fr – mysql – mariadb – drupal – demoscene – firefoxos – drupagora – phptour – forumphp – solutionlinux – Libre@toi – eyrolles – editions eni – programmez – linux pratique – webriver – phptv – elephpant - owasp -security

Aujourd'hui
● Pourquoi les WebExtensions !!!
● Conception
● Réalisation

Les Extensions
Sont Mortes
Vive Les Extensions

La situation des Add-ons
● Modules complémentaires
● Partie de Firefox depuis l'origine
● Amélioration du navigateur
● Les projets montrent comment les addons sont
importants dans Firefox
● Important de montrer que les API sont puissantes
– 40% des utilisateurs ont des add-ons
– 32000 modules complémentaires
– 19000 développeurs d'extensions
– 15 millions d'utilisateurs mensuels sur Mozilla Add-on (AMO)

Avant : XUL / XPCOM
● XUL est une technologie XML
– Utilisée pour l'interface firefox
● XPCOM est une structure Javascript
– Interagir avec XUL
– Avec une API différente de la classique HTML5
● Le développeur web doit respecter ces technologies
→ HTML classique, CSS, Javascript
● Aujourd'hui
– Ne répond plus aux attentes d'aujourd'hui
– Mises à jours / révisions… trop long

Les changements / migrations

Firefox Nightly

Les Extensions Firefox
● Firebug > DevTools
● FoxMarks > Bookmark Sync
● Session Manager > Session Restore
● Faviconize Tab > Tab pinning
● Multizilla > Tab browsing

Les Extensions compatibles
● AdBlock for Firefox
● Turn Off the Lights
● Disconnect
● Ghostery
● Open in VLC media Player
● …
● En voir plus
https://addons.mozilla.org/en-US/firefox/tag/firefox57

Les addons 'test pilot' dans firefox
● Nouveau concept
● Tester de nouvelles fonctionnalités
– Possibilité d'être inséré dans le navigateur
– https://testpilot.firefox.com

Bienvenue WebExtensions
● Créer une API robuste
● Parité avec extensions chrome api
● Documentation
● Prise en charge de Firefox pour Android
● Technologie Standard

Compatibilité
● Edge / Opera / Chrome / Firefox
● Compatible Qtwebkit

Situation actuelle
● Are we WebExtensions yet ?
http://arewewebextensionsyet.com/
● On trouve
– L'avancement de l'API
– Les fonctionnalités manquante
– L'avancé de la performance
– La validation
– ...

Roadmap
● Firefox 48 : Release stable
– SDK avec extension WebExtensions déjà disponible
● Firefox 53 : Conteneurs sécurisés
– Seulement WebExtensions acceptées sur addons.mozilla.org
● Firefox 57 – 14 novembre
– Uniquement WebExtension pour Firefox
– API du système de fichier
– Barre latérale et autres API d'élément d'interface utilisateur
– Expériences WebExtension pour créer de nouvelles API

Demo WebExt manifest
https://github.com/hellosct1/demo-WebExt-manifest
Nouvelle version… Prochainement

Conception

Anatomie
Interagir avec les pages Web
Contexte page
Bouton dans la barre d'outils
Bouton à la barre d'adresse
Définir une interface utilisateur
Contenu packagé accessible

Manifest.json
● Carte identité d'une extension
● Script au format jSON
●
https://developer.mozilla.org/fr/Add-ons/WebExtensions
{
"manifest_version": 2,
"name": "demo Ubuntu Paris",
"version": "2.0",
"description": "Demo Ubuntu Paris",
"icons": {
"19": "icons/icon-19.png",
"48": "icons/icon-48.png"
},
}

Manifest.json
● Permission
"permissions": [
"*://developer.mozilla.org/*",
"webRequest"
]
activeTab
alarms
bookmarks
browsingData
contextMenus
contextualIdentities
cookies
downloads
downloads.open
history
identity
idle
management
nativeMessaging
notifications
sessions
storage
tabs
topSites
webNavigation
webRequest
webRequestBlocking

Manifest : Anatomie (1/6)
● Script d'arrière plan
● Indépendant
– Des pages web
– Fenêtres du navigateur
● Exécuter dès que
l'extension est chargée
● Permissions nécessaires
Background page

Background : Exemple
// manifest.json
"background": {
"scripts": ["background.js"]
}
// manifest.json
"background": {
"page": ["background.html"]
}

● Scripts de contenu
● Accéder et manipuler les
pages Web
● Fonctionnement :
– Charger dans les pages Web
– Exécuter dans le contexte
de page particulière
● Possible
– Manipuler le DOM de la
page
Background page
Content scripts

Content scripts : Exemple (1/2)
// manifest.json
"content_scripts": [{
"matches": [
"*://mozilla.com/*",
"*://ubucon.org/*",
"*://localhost/*"
],
"js": [
"js/injection-demo.js"
]
}],

Content scripts : Exemple (2/2)
// manifest.json
"content_scripts": [{
"matches": [
"<all_urls>"
],
"exclude_matches": [
"*://www.mozilla.org/*",
"*://ubucon.org/*"
],
"js": [
"background/all-sites.js"
]
}],

● Action du navigateur
<> des navigateurs
● Accès par un icône
– Barre d'outils navigateur
● Possible de définir
– Fenêtre contextuelle
● Langage :
– HTML / CSS / JS
Background page
Content scripts
Browser action

Browser action : Exemple
// manifest.json
"browser_action": {
"default_icon": {
"19": "button/geo-19.png",
"38": "button/geo-38.png"
},
"default_title": "Whereami?",
"default_popup": "popup/popup.html"
}

● Action dans la barre de
navigation
● Affiche sur un onglet
activé
● Action pas toujours
nécessaire
Background page
Content scripts
Browser action
Page action

Page action : Exemple
// manifest.json
"page_action": {
"browser_style": true,
"default_icon": {
"19": "button/geo-19.png",
"38": "button/geo-38.png"
},
"default_title": "Whereami?",
"default_popup": "popup/popup.html"
}

● Définir des préférences
en plus
● Accès par les add-ons du
navigateur
● Configuration des
WebExtensions
Background page
Content scripts
Browser action
Page action
Option page

Option page : Exemple
// manifest.json
"options_ui": {
"page": "options.html"
},

● Ressources incluses dans
l'extension
● Accessible par
– Scripts de contenu
– Scripts de pages
● Web-accessible
● Utilisation d'un schéma
URI spécial
Background page
Content scripts
Browser action
Page action
Option page
Ressource

Ressource : Exemple
// manifest.json
"web_accessible_resources": [
"resources/*"
],

API
https://developer.mozilla.org/fr/Add-ons/WebExtensions/API
● alarms
● bookmarks
● browserAction
● browsingData
● commands
● contextMenus
● contextualIdentities
● cookies
● downloads
● events
● extension
● extensionTypes
● history
● i18n
● Indentity
● Idle
● management
● notifications
● omnibox
● pageAction
● runtime
● sessions
● sidebarAction
● storage
● tabs
● topSites
● webNavigation
● webRequest
● windows

Installation provisoire / Test / Debug

Installation temporaire (1/2)
● about:debugging

Installation temporaire (2/2)
● Déboguer

Publication

Prêt à publier
● Compresser votre extension
– Méthode 1
● Compresser les fichiers en ZIP
● Renommer le ZIP en XPI
– Méthode 2
$ cd monExtension
$ 7zip -a monExtension.xpi

Procédure
● Connecter
– https://addons.mozilla.org
● Soumettre
– Par le site
– Mode personnel

Par le site (1/2)

Par le site (2/2)

Aller plus loin : Web-ext
● Outil de ligne de commande
– Construire
– Exécuter
– Surveiller
– Tester Les extensions Web
● https://github.com/mozilla/web-ext
Exécuter une extension de cli, de linting, de validation et d'emballage
web-ext run -s /path/extension/ --firefox-binary=/path/firefox
web-ext build -s /path/extension

Gestion personnelle

Ressources supplémentaires
● 30 API en exemple
https://github.com/mdn/webextensions-examples
● Documentation (MDN) en Français
– https://developer.mozilla.org/fr/Add-ons/WebExtensions

Merci
Questions
Christophe Villeneuve
@hellosct1

Firefox et les WebExtensions

Contenu connexe

Tendances

Plus de Christophe Villeneuve

Firefox et les WebExtensions