De nombreuses extensions permettent d'ajouter des fonctionnalités aux navigateurs Chromium/Google Chrome ou Mozilla Firefox. On peut par exemple enregistrer des pages (TabHamster), insérer du code JavaScript (TamperMonkey/GreaseMonkey), bloquer les pubs (uBlock Origin), etc. Il est donc possible de créer des extensions qui viendront s'intégrer dans le navigateur et c'est ce que nous allons voir dans cet article.
Les extensions pour Chromium/Google Chrome et pour Mozilla Firefoxsont écrites en JavaScript/HTML en utilisant les API de WebExtension (API plus ou moins compatible entre les navigateurs de dernière génération). Dans cet article, nous allons voir comment procéder pour créer notre propre extension, qui permettra de récupérer sur une page d'article du site Connect des Éditions Diamond (https://connect.ed-diamond.com/) les références dudit article et de les placer dans le presse-papier (clipboard), pour pouvoir les coller facilement dans un document. L'écriture de cette extension nous permettra d'appréhender le processus de création dans sa globalité. Nous écrirons tout d'abord l'extension pour Chromium/Google Chrome, avant de la porter sur Mozilla Firefox.
- Accédez à tous les contenus de Connect en illimité
- Découvrez des listes de lecture et des contenus Premium
- Consultez les nouveaux articles en avant-première
[1] Les entrées du fichier manifest.json : https://developer.chrome.com/extensions/manifest
[2] Événement onInstalled : https://developer.chrome.com/apps/runtime#event-onInstalled
[3] Format des icônes : https://developer.chrome.com/extensions/manifest/icons
[4] Material Design : https://material.io/design/
[5] Liste des permissions : https://developer.chrome.com/extensions/declare_permissions
[6] Déclaration des permissions : https://developer.chrome.com/extensions/permission_warnings
[7] Portage d'une extension Chrome sur Firefox : https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension
[8] Compatibilité de l'entrée persistent de background dans le fichier manifest.json (cliquez sur la flèche vers le bas pour obtenir toutes les informations) : https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/arriere-plan#Compatibilit%C3%A9_du_navigateur
[9] Liste des compatibilités des entrées du fichier manifest.json : https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json