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

Les extensions de navigateur offrent un moyen puissant d'améliorer et de personnaliser l'expérience de navigation. Elles permettent aux développeurs d'ajouter des fonctionnalités aux navigateurs Web, d'interagir avec les pages Web et de s'intégrer aux services Web. Ce guide fournit une vue d'ensemble complète du développement d'extensions de navigateur, en se concentrant sur Manifest V3 et les API JavaScript principales qui alimentent ces extensions.

Comprendre les extensions de navigateur

Une extension de navigateur est un petit programme logiciel qui étend les fonctionnalités d'un navigateur Web. Les extensions peuvent modifier les pages Web, ajouter de nouvelles fonctionnalités et s'intégrer à des services externes. Elles sont généralement écrites en JavaScript, HTML et CSS, et emballées sous forme de fichier ZIP avec un fichier manifeste qui décrit les métadonnées et les autorisations de l'extension.

Les cas d'utilisation populaires pour les extensions de navigateur incluent :

• Bloqueurs de publicités : Supprimer les publicités des pages Web.
• Gestionnaires de mots de passe : Stocker et gérer les mots de passe en toute sécurité.
• Outils de productivité : Améliorer le flux de travail avec des fonctionnalités telles que la gestion des tâches et la prise de notes.
• Personnalisation du contenu : Modifier l'apparence et le comportement des pages Web.
• Outils d'accessibilité : Améliorer l'accessibilité Web pour les utilisateurs handicapés.

Manifest V3 : la nouvelle norme

Manifest V3 est la dernière version du fichier manifeste de l'extension de navigateur, un fichier JSON qui décrit les métadonnées, les autorisations et les ressources de l'extension. Il introduit des changements importants dans le processus de développement d'extensions, en se concentrant principalement sur l'amélioration de la sécurité, de la confidentialité et des performances. Les principaux changements de Manifest V3 incluent :

• Service Workers : Remplacement des pages d'arrière-plan par des service workers pour améliorer les performances et réduire la consommation de mémoire. Les service workers sont des scripts pilotés par les événements qui s'exécutent en arrière-plan et gèrent les événements tels que les requêtes réseau et les alarmes.
• API de requête réseau déclarative : Remplacement de l'API webRequest bloquante par l'API de requête réseau déclarative pour filtrer les requêtes réseau. Cela améliore la confidentialité et la sécurité en limitant l'accès de l'extension au trafic réseau.
• Stratégie de sécurité du contenu (CSP) : Application de stratégies CSP plus strictes pour empêcher l'exécution de code arbitraire et atténuer les risques de sécurité.
• Version du manifeste : La clé manifest_version du fichier manifest.json doit être définie sur 3.

Migration de Manifest V2 vers Manifest V3

La migration de Manifest V2 vers Manifest V3 nécessite une planification minutieuse et des modifications de code. Voici un guide étape par étape :

1. Mettre à jour le fichier manifeste : Définissez manifest_version sur 3 et mettez à jour les champs permissions et background pour vous conformer aux exigences de Manifest V3.
2. Remplacer les pages d'arrière-plan par des service workers : Réécrivez les scripts d'arrière-plan en tant que service workers, en gérant les événements à l'aide des API chrome.scripting et chrome.alarms.
3. Migrer vers l'API de requête réseau déclarative : Remplacez les appels d'API webRequest bloquants par des règles déclaratives définies dans l'API declarativeNetRequest.
4. Mettre à jour la stratégie de sécurité du contenu : Ajustez le champ content_security_policy dans le fichier manifeste pour vous conformer aux exigences CSP plus strictes.
5. Tester minutieusement : Testez l'extension de manière approfondie dans différents navigateurs pour garantir la compatibilité et le bon fonctionnement.

Exemple : Migration d'un script d'arrière-plan vers un service worker

Manifest V2 (background.js) :

            chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    return {cancel: true};
  },
  {urls: ["*.example.com/*"]},
  ["blocking"]
);

            

              
                Copy
              
            
          

Manifest V3 (service-worker.js) :

            chrome.declarativeNetRequest.updateDynamicRules({
  removeRuleIds: [1],
  addRules: [{
    "id": 1,
    "priority": 1,
    "action": { "type": "block" },
    "condition": { "urlFilter": "*.example.com/*", "resourceTypes": ["main_frame", "sub_frame", "stylesheet", "script", "image", "object", "xmlhttprequest", "other"] }
  }]
});

            

              
                Copy
              
            
          

manifest.json (Manifest V3) :

            {
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "A simple extension",
  "permissions": [
    "declarativeNetRequest",
    "declarativeNetRequestFeedback",
    "storage"
  ],
  "background": {
    "service_worker": "service-worker.js"
  },
  "declarative_net_request": {
    "rule_resources": [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules.json"
    }]
  }
}

            

              
                Copy
              
            
          

API JavaScript essentielles pour les extensions de navigateur

Les extensions de navigateur s'appuient sur un ensemble d'API JavaScript pour interagir avec le navigateur et les pages Web. Voici quelques-unes des API les plus importantes :

1. chrome.runtime

L'API chrome.runtime donne accès à l'environnement d'exécution de l'extension. Elle permet aux extensions de communiquer avec le script d'arrière-plan, d'accéder au fichier manifeste et de gérer le cycle de vie de l'extension.

Méthodes clés :

• chrome.runtime.sendMessage() : envoie un message au script d'arrière-plan ou à d'autres extensions.
• chrome.runtime.onMessage.addListener() : écoute les messages provenant d'autres scripts.
• chrome.runtime.getManifest() : renvoie le fichier manifeste de l'extension sous forme d'objet JavaScript.
• chrome.runtime.reload() : recharge l'extension.

Exemple : Envoi d'un message d'un script de contenu au script d'arrière-plan

Script de contenu (content.js) :

            chrome.runtime.sendMessage({message: "Hello from content script!"}, function(response) {
  console.log("Response from background script: ", response.message);
});

            

              
                Copy
              
            
          

Script d'arrière-plan (service-worker.js) :

            chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log("Message from content script: ", request.message);
    sendResponse({message: "Hello from background script!"});
  }
);

            

              
                Copy
              
            
          

2. chrome.storage

L'API chrome.storage fournit un mécanisme pour stocker et récupérer des données dans l'extension. Elle offre des options de stockage local et synchronisé.

Méthodes clés :

• chrome.storage.local.set() : stocke les données localement.
• chrome.storage.local.get() : récupère les données du stockage local.
• chrome.storage.sync.set() : stocke les données synchronisées sur les appareils de l'utilisateur.
• chrome.storage.sync.get() : récupère les données du stockage synchronisé.

Exemple : Stockage et récupération de données dans le stockage local

            // Stocker les données
chrome.storage.local.set({key: "value"}, function() {
  console.log("Value is set to " + "value");
});

// Récupérer les données
chrome.storage.local.get(["key"], function(result) {
  console.log("Value currently is " + result.key);
});

            

              
                Copy
              
            
          

3. chrome.tabs

L'API chrome.tabs permet aux extensions d'interagir avec les onglets du navigateur. Elle fournit des méthodes pour créer, interroger, modifier et fermer des onglets.

Méthodes clés :

• chrome.tabs.create() : crée un nouvel onglet.
• chrome.tabs.query() : interroge les onglets qui correspondent à des critères spécifiques.
• chrome.tabs.update() : met à jour les propriétés d'un onglet.
• chrome.tabs.remove() : ferme un onglet.
• chrome.tabs.executeScript() : exécute du code JavaScript dans un onglet.

Exemple : Création d'un nouvel onglet

            chrome.tabs.create({url: "https://www.example.com"}, function(tab) {
  console.log("New tab created with ID: " + tab.id);
});

            

              
                Copy
              
            
          

4. chrome.alarms

L'API chrome.alarms permet aux extensions de planifier l'exécution de tâches à une heure spécifique ou après un intervalle spécifié. Ceci est particulièrement important dans Manifest V3 car il remplace l'utilisation de minuteries dans les pages d'arrière-plan, qui ne sont plus prises en charge.

Méthodes clés :

• chrome.alarms.create() : crée une nouvelle alarme.
• chrome.alarms.get() : récupère une alarme existante.
• chrome.alarms.clear() : efface une alarme.
• chrome.alarms.getAll() : récupère toutes les alarmes.
• chrome.alarms.onAlarm.addListener() : écoute les événements d'alarme.

Exemple : Création d'une alarme

            chrome.alarms.create("myAlarm", {delayInMinutes: 1, periodInMinutes: 1});

chrome.alarms.onAlarm.addListener(function(alarm) {
  if (alarm.name === "myAlarm") {
    console.log("Alarm triggered!");
  }
});

            

              
                Copy
              
            
          

5. chrome.scripting

L'API chrome.scripting permet aux extensions d'injecter JavaScript et CSS dans les pages Web. Cette API est un élément clé de Manifest V3 et est utilisée par les service workers pour interagir avec les pages Web après leur chargement.

Méthodes clés :

• chrome.scripting.executeScript() : exécute du code JavaScript dans un onglet ou une frame.
• chrome.scripting.insertCSS() : insère du CSS dans un onglet ou une frame.

Exemple : Injection de JavaScript dans un onglet

            chrome.scripting.executeScript({
  target: {tabId: tabId},
  function: function() {
    console.log("Injected script!");
    document.body.style.backgroundColor = 'red';
  }
});

            

              
                Copy
              
            
          

6. chrome.notifications

L'API chrome.notifications permet aux extensions d'afficher des notifications à l'utilisateur. Ceci est utile pour fournir des mises à jour, des alertes et d'autres informations importantes.

Méthodes clés :

• chrome.notifications.create() : crée une nouvelle notification.
• chrome.notifications.update() : met à jour une notification existante.
• chrome.notifications.clear() : efface une notification.
• chrome.notifications.getAll() : récupère toutes les notifications.

Exemple : Création d'une notification

            chrome.notifications.create('myNotification', {
  type: 'basic',
  iconUrl: 'icon.png',
  title: 'My Extension',
  message: 'Hello from my extension!'
}, function(notificationId) {
  console.log('Notification created with ID: ' + notificationId);
});

            

              
                Copy
              
            
          

7. chrome.contextMenus

L'API chrome.contextMenus permet aux extensions d'ajouter des éléments au menu contextuel du navigateur (menu clic droit). Cela offre un moyen pratique pour les utilisateurs d'accéder aux fonctionnalités de l'extension directement à partir des pages Web.

Méthodes clés :

• chrome.contextMenus.create() : crée un nouvel élément de menu contextuel.
• chrome.contextMenus.update() : met à jour un élément de menu contextuel existant.
• chrome.contextMenus.remove() : supprime un élément de menu contextuel.
• chrome.contextMenus.removeAll() : supprime tous les éléments de menu contextuel créés par l'extension.

Exemple : Création d'un élément de menu contextuel

            chrome.contextMenus.create({
  id: "myContextMenuItem",
  title: "My Context Menu Item",
  contexts: ["page", "selection"]
}, function() {
  console.log("Context menu item created.");
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
  if (info.menuItemId === "myContextMenuItem") {
    console.log("Context menu item clicked!");
    alert("You clicked the context menu item!");
  }
});

            

              
                Copy
              
            
          

8. chrome.i18n

L'API chrome.i18n est utilisée pour internationaliser votre extension, la rendant accessible aux utilisateurs dans différentes langues et régions. Elle vous permet de fournir des versions localisées de l'interface utilisateur et des messages de votre extension.

Méthodes clés :

• chrome.i18n.getMessage() : récupère une chaîne localisée à partir du répertoire _locales de l'extension.

Exemple : Utilisation de chrome.i18n pour la localisation

Tout d'abord, créez un répertoire _locales dans le dossier racine de votre extension. À l'intérieur, créez des dossiers spécifiques à la langue comme en, es, fr, etc.

Dans chaque dossier de langue, créez un fichier messages.json. Par exemple, dans _locales/en/messages.json :

            {
  "extensionName": {
    "message": "My Extension",
    "description": "The name of the extension."
  },
  "greetingMessage": {
    "message": "Hello, world!",
    "description": "A simple greeting message."
  }
}

            

              
                Copy
              
            
          

Ensuite, dans votre code JavaScript :

            let extensionName = chrome.i18n.getMessage("extensionName");
let greeting = chrome.i18n.getMessage("greetingMessage");
console.log(extensionName); // Output: My Extension
console.log(greeting);      // Output: Hello, world!

            

              
                Copy
              
            
          

Compatibilité multi-navigateurs

Bien que Chrome soit le navigateur le plus populaire pour le développement d'extensions, il est important de tenir compte de la compatibilité multi-navigateurs. Firefox, Safari et d'autres navigateurs prennent également en charge les extensions, mais leurs API et formats de manifeste peuvent différer légèrement.

Pour assurer la compatibilité multi-navigateurs :

• Utilisez l'API WebExtensions : L'API WebExtensions est une API standardisée pour le développement d'extensions de navigateur, prise en charge par plusieurs navigateurs.
• Testez dans différents navigateurs : Testez votre extension dans différents navigateurs pour identifier et corriger les problèmes de compatibilité.
• Utilisez des polyfills : Utilisez des polyfills pour fournir les fonctionnalités de l'API manquantes dans différents navigateurs.
• Code conditionnel : Utilisez du code conditionnel pour vous adapter aux différences spécifiques aux navigateurs. Par exemple : if (typeof browser === "undefined") { var browser = chrome; }

Meilleures pratiques pour le développement d'extensions de navigateur

Voici quelques bonnes pratiques à suivre lors du développement d'extensions de navigateur :

• Minimisez les autorisations : Demandez uniquement les autorisations dont votre extension a absolument besoin. Cela améliore la confidentialité et la sécurité des utilisateurs.
• Utilisez des pratiques de codage sécurisées : Suivez les pratiques de codage sécurisées pour éviter les vulnérabilités telles que le script intersite (XSS) et l'injection de code.
• Optimisez les performances : Optimisez les performances de votre extension pour minimiser son impact sur les performances du navigateur.
• Fournissez une documentation claire et concise : Fournissez une documentation claire et concise pour aider les utilisateurs à comprendre comment utiliser votre extension.
• Gérez les erreurs avec élégance : Implémentez la gestion des erreurs pour empêcher votre extension de planter ou de provoquer un comportement inattendu.
• Maintenez votre extension à jour : Mettez régulièrement à jour votre extension pour corriger les bogues, les vulnérabilités de sécurité et les problèmes de compatibilité.
• Envisagez l'internationalisation (i18n) : Concevez votre extension pour qu'elle soit facilement localisée dans différentes langues. Utilisez l'API chrome.i18n.
• Respectez la confidentialité des utilisateurs : Soyez transparent sur la façon dont votre extension collecte et utilise les données des utilisateurs et obtenez le consentement de l'utilisateur lorsque cela est nécessaire. Respectez les réglementations en matière de confidentialité pertinentes, telles que le RGPD et le CCPA.

Soumission de votre extension aux boutiques

Une fois votre extension développée et testée, vous souhaiterez la soumettre aux boutiques d'extensions de navigateur pour la rendre disponible aux utilisateurs. Chaque navigateur a sa propre boutique et son propre processus de soumission :

• Chrome Web Store : Soumettez votre extension au Chrome Web Store pour les utilisateurs de Chrome. Le processus implique la création d'un compte développeur, l'emballage de votre extension et son téléchargement sur la boutique.
• Add-ons Firefox : Soumettez votre extension aux Add-ons Firefox pour les utilisateurs de Firefox. Le processus est similaire au Chrome Web Store et implique la création d'un compte développeur et la soumission de votre extension pour examen.
• Galerie d'extensions Safari : Soumettez votre extension à la galerie d'extensions Safari pour les utilisateurs de Safari. Le processus implique l'obtention d'un certificat de développeur auprès d'Apple et la soumission de votre extension pour examen.

Lors de la soumission de votre extension, assurez-vous de fournir des informations précises et complètes, notamment un titre descriptif, une description détaillée, des captures d'écran et une politique de confidentialité. Les boutiques d'extensions examinent les soumissions pour s'assurer qu'elles sont conformes à leurs politiques et directives.

Conclusion

Le développement d'extensions de navigateur avec Manifest V3 et les API JavaScript offre un moyen puissant de personnaliser et d'améliorer l'expérience de navigation. En comprenant les concepts de base, en suivant les meilleures pratiques et en tenant compte de la compatibilité multi-navigateurs, les développeurs peuvent créer des extensions précieuses et attrayantes pour les utilisateurs du monde entier. Au fur et à mesure que le Web évolue, les extensions de navigateur continueront à jouer un rôle essentiel dans l'élaboration de l'avenir d'Internet.

N'oubliez pas de toujours donner la priorité à la confidentialité et à la sécurité des utilisateurs lors du développement d'extensions. En construisant avec ces principes à l'esprit, vous pouvez créer des extensions à la fois utiles et fiables.

Ce guide fournit une base solide pour commencer le développement d'extensions de navigateur. Au fur et à mesure que vous approfondissez, explorez les différentes API et fonctionnalités disponibles, et expérimentez différentes techniques pour créer des extensions innovantes et percutantes.