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

Recommended

Recommended

More Related Content

What's hot

What's hot (12)

Similar to Firefox et les WebExtensions

Similar to Firefox et les WebExtensions (20)

More from Christophe Villeneuve

More from Christophe Villeneuve (20)

Firefox et les WebExtensions