Développement d'extensions de navigateur : Manifest V3 et API JavaScript

Les extensions de navigateur sont de petits programmes logiciels qui personnalisent l'expérience de navigation. Elles peuvent ajouter de nouvelles fonctionnalités, modifier le contenu des sites web, bloquer les publicités, et bien plus encore. Avec l'avènement de Manifest V3, la manière dont les extensions sont construites et fonctionnent a subi des changements significatifs. Ce guide complet explorera le développement d'extensions de navigateur à l'aide de Manifest V3 et des API JavaScript, vous fournissant les connaissances nécessaires pour créer des extensions puissantes et sécurisées pour les navigateurs modernes.

Qu'est-ce qu'une extension de navigateur ?

Les extensions de navigateur sont essentiellement des mini-applications qui s'exécutent au sein d'un navigateur web. Elles étendent les fonctionnalités du navigateur et s'intègrent de manière transparente aux pages web. Les extensions sont écrites à l'aide de technologies web standard telles que HTML, CSS et JavaScript, ce qui les rend relativement accessibles aux développeurs web.

Exemples d'extensions de navigateur populaires :

• Bloqueurs de publicités : Bloquent les publicités sur les pages web, améliorant la vitesse de navigation et réduisant les distractions.
• Gestionnaires de mots de passe : Stockent et gèrent les mots de passe en toute sécurité, en les remplissant automatiquement sur les sites web.
• Extensions de prise de notes : Permettent aux utilisateurs de prendre des notes et de les enregistrer directement depuis les pages web.
• Outils de productivité : Améliorent la productivité en fournissant des fonctionnalités telles que la gestion des tâches, le suivi du temps et les modes de concentration.
• Outils de traduction linguistique : Traduisent les pages web dans différentes langues en un seul clic. Exemple : extension Google Translate.
• Extensions VPN : Transfèrent le trafic Internet pour contourner les restrictions géographiques et améliorer la confidentialité.

L'importance de Manifest V3

Manifest V3 est la dernière version du fichier manifest, qui est un fichier JSON décrivant l'extension au navigateur. Il définit le nom de l'extension, sa version, ses permissions, ses scripts d'arrière-plan et d'autres métadonnées essentielles. Manifest V3 introduit plusieurs changements clés par rapport à son prédécesseur, Manifest V2, axés principalement sur la sécurité et les performances.

Changements clés dans Manifest V3 :

• Service Workers : Manifest V3 remplace les pages d'arrière-plan par des service workers. Les service workers sont des scripts pilotés par les événements qui s'exécutent en arrière-plan sans nécessiter de page persistante. Ils sont plus efficaces et consomment moins de ressources que les pages d'arrière-plan.
• API Declarative Net Request : Cette API permet aux extensions de modifier les requêtes réseau sans les intercepter directement. Elle améliore la sécurité et les performances en déchargeant la logique de filtrage sur le navigateur.
• Content Security Policy (CSP) plus stricte : Manifest V3 applique des règles CSP plus strictes pour empêcher l'exécution de code arbitraire, renforçant ainsi la sécurité.
• API basées sur les promesses : De nombreuses API sont désormais basées sur les promesses, ce qui facilite la gestion des opérations asynchrones.

Pourquoi le passage à Manifest V3 ?

• Sécurité renforcée : Manifest V3 est conçu pour améliorer la sécurité des extensions de navigateur et protéger les utilisateurs contre les codes malveillants.
• Performances améliorées : Les service workers et l'API Declarative Net Request contribuent à de meilleures performances et à une réduction de la consommation de ressources.
• Plus de confidentialité : Manifest V3 vise à donner aux utilisateurs plus de contrôle sur leurs données et leur vie privée.

Configuration de votre environnement de développement

Avant de commencer à développer des extensions de navigateur, vous devez configurer votre environnement de développement. Cela implique l'installation d'un éditeur de code, le choix d'un navigateur pour les tests et la compréhension de la structure de fichiers de base d'une extension.

1. Éditeur de code

Choisissez un éditeur de code avec lequel vous êtes à l'aise. Les options populaires incluent :

• Visual Studio Code (VS Code) : Un éditeur de code gratuit et puissant avec un excellent support pour JavaScript et d'autres technologies web.
• Sublime Text : Un éditeur de code rapide et personnalisable avec une large gamme de plugins.
• Atom : Un éditeur de code gratuit et open-source développé par GitHub.

2. Navigateur pour les tests

Sélectionnez un navigateur pour tester vos extensions. Chrome et Firefox sont les choix les plus populaires, car ils offrent des outils de développement robustes et une prise en charge du développement d'extensions.

3. Structure de fichiers de base

Une extension de navigateur se compose généralement des fichiers suivants :

• manifest.json : Ce fichier contient les métadonnées de l'extension, telles que son nom, sa version, ses permissions et ses scripts d'arrière-plan.
• background.js (ou script de service worker) : Ce script s'exécute en arrière-plan et gère les événements tels que les actions du navigateur et les clics sur les menus contextuels.
• content.js : Ce script s'exécute dans le contexte des pages web et peut modifier leur contenu.
• popup.html : Ce fichier définit l'interface utilisateur de la fenêtre contextuelle de l'extension.
• popup.js : Ce script gère la logique de la fenêtre contextuelle de l'extension.
• options.html : Ce fichier définit l'interface utilisateur de la page d'options de l'extension.
• options.js : Ce script gère la logique de la page d'options de l'extension.
• icons : Ce sont les icônes utilisées pour représenter l'extension dans la barre d'outils du navigateur et la page de gestion des extensions.

Création de votre première extension : "Bonjour, le monde !"

Créons une simple extension "Bonjour, le monde !" pour illustrer les principes de base du développement d'extensions de navigateur.

1. Créer un fichier Manifest (manifest.json)

Créez un fichier nommé `manifest.json` dans un nouveau répertoire et ajoutez le code suivant :

{
  "manifest_version": 3,
  "name": "Bonjour, le monde !",
  "version": "1.0",
  "description": "Une simple extension Bonjour, le monde !",
  "permissions": [
    "storage"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

Explication :

• `manifest_version` : Spécifie la version du fichier manifest (3 pour Manifest V3).
• `name` : Le nom de l'extension.
• `version` : Le numéro de version de l'extension.
• `description` : Une brève description de l'extension.
• `permissions` : Un tableau des permissions dont l'extension a besoin (par exemple, "storage").
• `action` : Définit les propriétés de la fenêtre contextuelle de l'extension, y compris le fichier de fenêtre contextuelle par défaut et les icônes.
• `icons` : Spécifie les chemins d'accès aux icônes de l'extension.

2. Créer un fichier Popup (popup.html)

Créez un fichier nommé `popup.html` dans le même répertoire et ajoutez le code suivant :

  
  


  
Bonjour, le monde !
  
Ceci est une simple extension de navigateur.

Ce fichier définit l'interface utilisateur de la fenêtre contextuelle de l'extension, qui affichera le message "Bonjour, le monde !".

3. Créer des images d'icônes

Créez trois images d'icônes avec les tailles suivantes : 16x16, 48x48 et 128x128 pixels. Enregistrez-les sous les noms `icon16.png`, `icon48.png` et `icon128.png` dans un répertoire `images` à l'intérieur de votre répertoire d'extension.

4. Charger l'extension dans votre navigateur

Chrome :

1. Ouvrez Chrome et accédez à `chrome://extensions`.
2. Activez le "Mode développeur" dans le coin supérieur droit.
3. Cliquez sur "Charger l'extension non empaquetée" et sélectionnez le répertoire contenant vos fichiers d'extension.

Firefox :

1. Ouvrez Firefox et accédez à `about:debugging#/runtime/this-firefox`.
2. Cliquez sur "Charger un module complémentaire temporaire..." et sélectionnez le fichier `manifest.json`.

Votre extension "Bonjour, le monde !" devrait maintenant être installée et visible dans la barre d'outils du navigateur. Cliquez sur l'icône de l'extension pour ouvrir la fenêtre contextuelle et voir le message "Bonjour, le monde !".

Travailler avec les API JavaScript

Les extensions de navigateur peuvent interagir avec le navigateur et les pages web à l'aide des API JavaScript. Ces API donnent accès à diverses fonctionnalités, telles que :

• API Tabs : Vous permet de gérer les onglets du navigateur, y compris la création, la mise à jour et l'interrogation des onglets.
• API Storage : Fournit un moyen de stocker et de récupérer des données de manière persistante au sein de l'extension.
• API Alarms : Vous permet de planifier l'exécution de tâches à des moments précis.
• API Notifications : Vous permet d'afficher des notifications à l'utilisateur.
• API Context Menus : Vous permet d'ajouter des éléments personnalisés au menu contextuel du navigateur (menu clic droit).
• API Web Request (Declarative Net Request dans Manifest V3) : Vous permet d'intercepter et de modifier les requêtes réseau.
• API Scripting : Permet d'injecter des scripts dans les pages web.

Exemple : Utilisation de l'API Storage

Créons une extension qui stocke et récupère le nom d'un utilisateur à l'aide de l'API Storage.

1. Mettre à jour le fichier Manifest (manifest.json)

Assurez-vous que le tableau `permissions` de votre `manifest.json` inclut "storage" :

{
  "manifest_version": 3,
  "name": "Exemple de stockage",
  "version": "1.0",
  "description": "Une extension qui utilise l'API Storage",
  "permissions": [
    "storage"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

2. Créer un fichier Popup (popup.html)

Créez ou mettez à jour votre `popup.html` avec le contenu suivant :

  
  


  
Exemple de stockage
  Entrez votre nom :
  
  Enregistrer
  

  

3. Créer un script de Popup (popup.js)

Créez un fichier nommé `popup.js` et ajoutez le code suivant :

document.addEventListener('DOMContentLoaded', () => {
  const nameInput = document.getElementById('name');
  const saveButton = document.getElementById('save');
  const greeting = document.getElementById('greeting');

  // Charger le nom sauvegardé depuis le stockage
  chrome.storage.sync.get('name', (data) => {
    if (data.name) {
      nameInput.value = data.name;
      greeting.textContent = `Bonjour, ${data.name} !`;
    }
  });

  // Sauvegarder le nom dans le stockage lorsque le bouton est cliqué
  saveButton.addEventListener('click', () => {
    const name = nameInput.value;
    chrome.storage.sync.set({ name: name }, () => {
      greeting.textContent = `Bonjour, ${name} !`;
    });
  });
});

Explication :

• Le script écoute l'événement `DOMContentLoaded` pour s'assurer que le DOM est complètement chargé avant d'exécuter le code.
• Il récupère des références au champ de saisie, au bouton d'enregistrement et au paragraphe d'accueil.
• Il charge le nom sauvegardé à partir du stockage à l'aide de `chrome.storage.sync.get()`.
• Il sauvegarde le nom dans le stockage lorsque le bouton d'enregistrement est cliqué à l'aide de `chrome.storage.sync.set()`.
• Il met à jour le paragraphe d'accueil avec le nom sauvegardé ou saisi.

Rechargez l'extension dans votre navigateur. Désormais, lorsque vous ouvrirez la fenêtre contextuelle, vous pourrez saisir votre nom, l'enregistrer et voir le message d'accueil. Le nom sera enregistré dans le stockage de l'extension et sera chargé la prochaine fois que vous ouvrirez la fenêtre contextuelle.

Exemple : Utilisation de l'API Tabs

Créons une extension qui affiche l'URL de l'onglet actuel dans une fenêtre contextuelle.

1. Mettre à jour le fichier Manifest (manifest.json)

Ajoutez la permission "tabs" au tableau `permissions` de votre `manifest.json` :

{
  "manifest_version": 3,
  "name": "Exemple d'onglets",
  "version": "1.0",
  "description": "Une extension qui utilise l'API Tabs",
  "permissions": [
    "tabs"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

2. Créer un fichier Popup (popup.html)

Créez ou mettez à jour votre `popup.html` avec le contenu suivant :

  
  


  
Exemple d'onglets
  
URL de l'onglet actuel :
  

  

3. Créer un script de Popup (popup.js)

Créez un fichier nommé `popup.js` et ajoutez le code suivant :

document.addEventListener('DOMContentLoaded', () => {
  const urlDisplay = document.getElementById('url');

  // Obtenir l'URL de l'onglet actuel
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    const tab = tabs[0];
    urlDisplay.textContent = tab.url;
  });
});

Explication :

• Le script écoute l'événement `DOMContentLoaded`.
• Il utilise `chrome.tabs.query()` pour obtenir l'onglet actuellement actif dans la fenêtre actuelle.
• Il récupère l'URL de l'onglet et l'affiche dans le paragraphe `url`.

Rechargez l'extension dans votre navigateur. Désormais, lorsque vous ouvrirez la fenêtre contextuelle, elle affichera l'URL de l'onglet actuel.

Scripts d'arrière-plan et Service Workers

Dans Manifest V3, les scripts d'arrière-plan sont remplacés par des service workers. Les service workers sont des scripts pilotés par les événements qui s'exécutent en arrière-plan sans nécessiter de page persistante. Ils sont plus efficaces et consomment moins de ressources que les pages d'arrière-plan.

Principales caractéristiques des Service Workers :

• Piloté par les événements : Les service workers répondent à des événements tels que les actions du navigateur, les alarmes et les messages des scripts de contenu.
• Asynchrone : Les service workers utilisent des API asynchrones pour éviter de bloquer le thread principal.
• Se terminent lorsqu'ils sont inactifs : Les service workers sont terminés lorsqu'ils ne traitent pas activement d'événements, ce qui permet d'économiser des ressources.

Exemple : Utilisation d'un Service Worker

Créons une extension qui affiche une notification au démarrage du navigateur.

1. Mettre à jour le fichier Manifest (manifest.json)

Mettez à jour votre `manifest.json` avec le contenu suivant :

{
  "manifest_version": 3,
  "name": "Exemple de Service Worker",
  "version": "1.0",
  "description": "Une extension qui utilise un service worker",
  "permissions": [
    "notifications"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

Explication :

• La propriété `"background"` spécifie le chemin d'accès au script du service worker (`background.js`).
• Le tableau `"permissions"` inclut `"notifications"`, qui est nécessaire pour afficher les notifications.

2. Créer un script de Service Worker (background.js)

Créez un fichier nommé `background.js` et ajoutez le code suivant :

chrome.runtime.onStartup.addListener(() => {
  // Afficher une notification au démarrage du navigateur
  chrome.notifications.create('startup-notification', {
    type: 'basic',
    iconUrl: 'images/icon48.png',
    title: 'Navigateur démarré',
    message: 'Le navigateur a démarré.'
  });
});

Explication :

• Le script écoute l'événement `chrome.runtime.onStartup`, qui est déclenché au démarrage du navigateur.
• Il utilise `chrome.notifications.create()` pour afficher une notification avec les propriétés spécifiées.

Rechargez l'extension dans votre navigateur. Désormais, lorsque vous redémarrerez votre navigateur, vous devriez voir une notification de l'extension.

Scripts de contenu

Les scripts de contenu sont des fichiers JavaScript qui s'exécutent dans le contexte des pages web. Ils peuvent accéder et modifier le DOM des pages web, vous permettant de personnaliser le comportement et l'apparence des sites web.

Principales caractéristiques des scripts de contenu :

• Accès au DOM : Les scripts de contenu peuvent accéder et manipuler le DOM des pages web.
• Isolation des scripts de page web : Les scripts de contenu s'exécutent dans un environnement isolé, empêchant les conflits avec les scripts de page web.
• Communication avec les scripts d'arrière-plan : Les scripts de contenu peuvent communiquer avec les scripts d'arrière-plan à l'aide de la transmission de messages.

Exemple : Utilisation d'un script de contenu

Créons une extension qui change la couleur de fond des pages web en bleu clair.

1. Mettre à jour le fichier Manifest (manifest.json)

Mettez à jour votre `manifest.json` avec le contenu suivant :

{
  "manifest_version": 3,
  "name": "Exemple de script de contenu",
  "version": "1.0",
  "description": "Une extension qui utilise un script de contenu",
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": [""],
      "js": ["content.js"]
    }
  ],
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

Explication :

• La propriété `"content_scripts"` spécifie un tableau de scripts de contenu à injecter dans les pages web.
• `"matches"` spécifie les URL dans lesquelles le script de contenu doit être injecté (`` correspond à toutes les URL).
• `"js"` spécifie le chemin d'accès au script de contenu (`content.js`).
• Le tableau `"permissions"` inclut `"activeTab"` et `"scripting"`, qui sont nécessaires pour injecter des scripts.

2. Créer un script de contenu (content.js)

Créez un fichier nommé `content.js` et ajoutez le code suivant :

document.body.style.backgroundColor = 'lightblue';

3. Créer un Service Worker (background.js)

Créez un fichier nommé `background.js` et ajoutez le code suivant :

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: () => {
      document.body.style.backgroundColor = 'lightblue';
    }
  });
});

Explication :

• Le script de contenu définit simplement la couleur de fond de l'élément `body` en bleu clair.
• Le service worker écoute l'événement de clic et exécute une fonction dans l'onglet actuel, qui modifie la couleur de fond.

Rechargez l'extension dans votre navigateur. Désormais, lorsque vous ouvrirez n'importe quelle page web, la couleur de fond sera bleu clair.

Débogage des extensions de navigateur

Le débogage des extensions de navigateur est une partie essentielle du processus de développement. Chrome et Firefox fournissent d'excellents outils de développement pour le débogage des extensions.

Débogage dans Chrome :

1. Ouvrez Chrome et accédez à `chrome://extensions`.
2. Activez le "Mode développeur" dans le coin supérieur droit.
3. Cliquez sur "Inspecter les vues de la page d'arrière-plan" pour votre extension. Cela ouvrira les outils de développement Chrome pour le script d'arrière-plan.
4. Pour déboguer les scripts de contenu, ouvrez la page web où le script de contenu est injecté, puis ouvrez les outils de développement Chrome pour cette page. Vous devriez voir votre script de contenu répertorié dans le panneau "Sources".

Débogage dans Firefox :

1. Ouvrez Firefox et accédez à `about:debugging#/runtime/this-firefox`.
2. Trouvez votre extension dans la liste et cliquez sur "Inspecter". Cela ouvrira les outils de développement Firefox pour l'extension.
3. Pour déboguer les scripts de contenu, ouvrez la page web où le script de contenu est injecté, puis ouvrez les outils de développement Firefox pour cette page. Vous devriez voir votre script de contenu répertorié dans le panneau "Débogueur".

Techniques de débogage courantes :

• Journalisation de la console : Utilisez `console.log()` pour imprimer des messages dans la console.
• Points d'arrêt : Définissez des points d'arrêt dans votre code pour interrompre l'exécution et inspecter les variables.
• Cartes sources : Utilisez des cartes sources pour déboguer votre code sous sa forme d'origine, même s'il a été minifié ou transpilé.
• Gestion des erreurs : Implémentez la gestion des erreurs pour capturer et enregistrer les erreurs.

Publication de votre extension

Une fois que vous avez développé et testé votre extension, vous pouvez la publier sur le Chrome Web Store ou sur la place de marché des modules complémentaires Firefox.

Publication sur le Chrome Web Store :

1. Créez un compte développeur sur le Chrome Web Store.
2. Empaquetez votre extension dans un fichier `.zip`.
3. Téléchargez le fichier `.zip` sur le Chrome Web Store.
4. Fournissez les métadonnées requises, telles que le nom de l'extension, sa description et des captures d'écran.
5. Soumettez votre extension pour examen.

Publication sur la place de marché des modules complémentaires Firefox :

1. Créez un compte développeur sur la place de marché des modules complémentaires Firefox.
2. Empaquetez votre extension dans un fichier `.zip`.
3. Téléchargez le fichier `.zip` sur la place de marché des modules complémentaires Firefox.
4. Fournissez les métadonnées requises, telles que le nom de l'extension, sa description et des captures d'écran.
5. Soumettez votre extension pour examen.

Meilleures pratiques pour la publication :

• Rédigez une description claire et concise de votre extension.
• Fournissez des captures d'écran et des vidéos de haute qualité pour présenter les fonctionnalités de votre extension.
• Testez minutieusement votre extension avant de la soumettre.
• Répondez rapidement aux avis et aux commentaires des utilisateurs.
• Maintenez votre extension à jour avec les dernières versions du navigateur et les correctifs de sécurité.

Considérations de sécurité

La sécurité est un aspect essentiel du développement d'extensions de navigateur. Les extensions peuvent potentiellement accéder à des données utilisateur sensibles et modifier le contenu des pages web, il est donc essentiel de suivre les meilleures pratiques de sécurité pour protéger les utilisateurs contre les codes malveillants.

Considérations de sécurité clés :

• Minimiser les permissions : Ne demandez que les permissions dont votre extension a réellement besoin.
• Valider les entrées utilisateur : Nettoyez et validez toutes les entrées utilisateur pour empêcher les attaques par injection de script inter-sites (XSS).
• Utiliser HTTPS : Utilisez toujours HTTPS pour communiquer avec les serveurs distants.
• Content Security Policy (CSP) : Appliquez une CSP stricte pour empêcher l'exécution de code arbitraire.
• Mettre à jour régulièrement votre extension : Maintenez votre extension à jour avec les derniers correctifs de sécurité.

En suivant ces directives de sécurité, vous pouvez contribuer à garantir que votre extension de navigateur est sûre et sécurisée pour les utilisateurs.

Conclusion

Le développement d'extensions de navigateur à l'aide de Manifest V3 et des API JavaScript offre un moyen puissant de personnaliser l'expérience de navigation et d'ajouter de nouvelles fonctionnalités aux navigateurs web. En comprenant les concepts clés, les API et les meilleures pratiques décrits dans ce guide, vous pouvez créer des extensions puissantes et sécurisées qui améliorent la productivité, renforcent la sécurité et offrent une meilleure expérience de navigation aux utilisateurs du monde entier. À mesure que le web continue d'évoluer, les extensions de navigateur joueront un rôle de plus en plus important dans le façonnement de l'avenir des interactions en ligne. Exploitez les opportunités offertes par Manifest V3 et la richesse des API JavaScript pour créer des extensions innovantes et précieuses.