les webextensions et firefox - jdll 2017

JDLL : Le 2 avril 2017

Les WebExtensions&

Firefox

Christophe Villeneuve@hellosct1


Aujourd'hui

● Pourquoi les WebExtensions !!!● Conception● Réalisation


Les Extensions Sont Mortes

Vive Les Extensions


Les Extensions Firefox● Firebug > DevTools

● FoxMarks > Bookmark Sync

● Session Manager > Session Restore

● Faviconize Tab > Tab pinning

● Multizilla > Tab browsing


XUL / XPCOM● XUL est une technologie XML

– Utilisée pour l'interface firefox

● XPPCOM 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 au attente d'aujourd'hui

– Mises à jours / révisions… trop long


… les 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 les API sont puissants

– 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)


Les addons 'test pilot' dans firefox

● Nouveau concept● Tester de nouvelles fonctionnalités

– Possibilité d'être insérer dans le navigateur

– http://testpilot.firefox.com


Bienvenue WebExtensions

● Créer une api robuste ● Technologie Standard : Html, css, javascript● Parité avec extensions chrome api● Documentation● Prise en charge de Firefox pour android


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

– ...

http://arewewebextensionsyet.com/


Roadmap● Firefox 48 : Release stable

– SDK avec extension WebExtensions déjà disponible

● Firefox 53 : Conteneurs sécurisés– Seulement WebExtensions accepté 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 manifesthttps://github.com/hellosct1/demo-WebExt-manifest

https://github.com/hellosct1/demo-WebExt-manifest


Conception


Anatomie

Intéragir 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 JDLL", "version": "1.0", "description": "Demo JDLL", "icons": { "19": "icons/icon-19.png", "48": "icons/icon-48.png" },}


Manifest.json

● Permission"permissions": [ "*://developer.mozilla.org/*", "webRequest"]

activeTabalarmsbookmarksbrowsingDatacontextMenuscontextualIdentitiescookiesdownloadsdownloads.openhistoryidentity

idlemanagementnativeMessagingnotificationssessionsstoragetabstopSiteswebNavigationwebRequestwebRequestBlocking


Manifest : Anatomie (1/6)

● Script d'arrière plan● Indépendant

– Des pages webs

– Fenêtres du navigateur

● Exécuter dès que l'extension est chargé

● 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

// manifest.json "content_scripts": [{ "matches": [ "*://mozilla.com/*", "*://localhost/*" ], "js": [ "js/injection-demo.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"options_ui": { "page": "options.html"},


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

● about:debugging


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

https://addons.mozilla.org/


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-extExé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

https://github.com/mozilla/web-ext


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●

https://github.com/mdn/webextensions-examples

https://developer.mozilla.org/fr/Add-ons/WebExtensions


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


Merci

Questions

Christophe Villeneuve@hellosct1

les webextensions et firefox - jdll 2017

Internet