Création d'une extension de navigateur pour tous les navigateurs : Edge, Chrome, Firefox, Opera, Brave et Vivaldi

Je vais vous expliquer comment vous pouvez installer cette extension qui prend en charge le modèle d'extension Web (c'est-à-dire Edge, Chrome, Firefox, Opera, Brave et Vivaldi), et fournir quelques conseils simples sur la façon d'obtenir une base de code unique pour chacun d'eux, mais également comment déboguer dans chaque navigateur.

Remarque : nous n'aborderons pas Safari dans cet article car il ne prend pas en charge le même modèle d'extension que les autres.

Bases

Je ne couvrirai pas les bases du développement d'extensions car de nombreuses bonnes ressources sont déjà disponibles auprès de chaque fournisseur :

• Google
• Microsoft (voir également la superbe vidéo de présentation « Création d'extensions pour Microsoft Edge »)
• Mozilla (aussi, voir le wiki)
• Opéra
• Braver

Donc, si vous n'avez jamais construit d'extension auparavant ou si vous ne savez pas comment cela fonctionne, jetez un coup d'œil à ces ressources. Ne vous inquiétez pas : en créer un est simple et direct.

Notre extension

Construisons une preuve de concept - une extension qui utilise l'intelligence artificielle (IA) et la vision par ordinateur pour aider les aveugles à analyser les images sur une page Web.

Nous verrons qu'avec quelques lignes de code, nous pouvons créer des fonctionnalités puissantes dans le navigateur. Dans mon cas, je suis préoccupé par l'accessibilité sur le Web et j'ai déjà passé un certain temps à réfléchir à la façon de rendre un jeu accessible en utilisant l'audio Web et SVG, par exemple.

Pourtant, je cherchais quelque chose qui aiderait les personnes aveugles d'une manière plus générale. J'ai récemment été inspiré en écoutant une excellente conférence de Chris Heilmann à Lisbonne : "Pixels and Hidden Meaning in Pixels".

En effet, en utilisant les algorithmes d'intelligence artificielle d'aujourd'hui dans le cloud, ainsi que les technologies de synthèse vocale, exposées dans le navigateur avec l'API Web Speech ou à l'aide d'un service cloud distant, nous pouvons très facilement créer une extension qui analyse les images de pages Web manquantes. ou des propriétés de texte alt mal remplies.

Ma petite preuve de concept extrait simplement des images d'une page Web (celle de l'onglet actif) et affiche les vignettes dans une liste. Lorsque vous cliquez sur l'une des images, l'extension interroge l' API Computer Vision pour obtenir un texte descriptif pour l'image, puis utilise l' API Web Speech ou l'API Bing Speech pour la partager avec le visiteur.

La vidéo ci-dessous le montre dans Edge, Chrome, Firefox, Opera et Brave.

Vous remarquerez que, même lorsque l'API Computer Vision analyse certaines images CGI, elle est très précise ! Je suis vraiment impressionné par les progrès réalisés par l'industrie à cet égard au cours des derniers mois.

J'utilise ces services :

• API de vision par ordinateur, services cognitifs Microsoft
  C'est gratuit (avec un quota). Vous devrez générer une clé gratuite ; remplacez la section TODO dans le code par votre clé pour que cette extension fonctionne sur votre machine. Pour avoir une idée de ce que cette API peut faire, jouez avec.



• API de synthèse vocale Bing, Microsoft Cognitive Services
  Ceci est également gratuit (avec un quota également). Vous devrez générer à nouveau une clé gratuite. Nous utiliserons également une petite bibliothèque que j'ai écrite récemment pour appeler cette API depuis JavaScript. Si vous n'avez pas de clé Bing, l'extension se rabattra toujours sur l'API Web Speech, qui est prise en charge par tous les navigateurs récents.

Mais n'hésitez pas à essayer d'autres services similaires :

• Reconnaissance visuelle, IBM Watson
• API Cloud Vision, Google

Vous pouvez trouver le code de cette petite extension de navigateur sur ma page GitHub. N'hésitez pas à modifier le code des autres produits que vous souhaitez tester.

Astuce pour rendre votre code compatible avec tous les navigateurs

La plupart du code et des didacticiels que vous trouverez utilisent l'espace de noms chrome.xxx pour l'API d'extension ( chrome.tabs , par exemple).

Mais, comme je l'ai dit, le modèle d'API d'extension est actuellement normalisé en browser.xxx , et certains navigateurs définissent entre-temps leurs propres espaces de noms (par exemple, Edge utilise msBrowser ).

Heureusement, la plupart de l'API reste la même derrière le navigateur. Ainsi, il est très simple de créer une petite astuce pour prendre en charge tous les navigateurs et les définitions d'espace de noms, grâce à la beauté de JavaScript :

 window.browser = (function () { return window.msBrowser || window.browser || window.chrome; })();

Et voila !

Bien sûr, vous devrez également utiliser le sous-ensemble de l'API pris en charge par tous les navigateurs. Par exemple:

• Microsoft Edge a une liste de support.
• Mozilla Firefox partage ses incompatibilités Chrome actuelles.
• Opera maintient sa propre liste d'API d'extension prises en charge par son navigateur.

Architecture d'extension

Revoyons ensemble l'architecture de cette extension. Si vous débutez avec les extensions de navigateur, cela devrait vous aider à comprendre le flux.

Commençons par le fichier manifeste :

Ce fichier manifeste et son JSON associé est le minimum dont vous aurez besoin pour charger une extension dans tous les navigateurs, si nous ne considérons pas le code de l'extension elle-même, bien sûr. Veuillez vérifier la source dans mon compte GitHub et commencer à partir d'ici pour vous assurer que votre extension est compatible avec tous les navigateurs.

Par exemple, vous devez spécifier une propriété d' author pour la charger dans Edge ; sinon, il lancera une erreur. Vous devrez également utiliser la même structure pour les icônes. La propriété default_title est également importante car elle est utilisée par les lecteurs d'écran de certains navigateurs.

Voici des liens vers la documentation pour vous aider à créer un fichier manifeste compatible partout :

• Chrome
• Bord
• Firefox

L'exemple d'extension utilisé dans cet article est principalement basé sur le concept de script de contenu. Il s'agit d'un script vivant dans le contexte de la page que nous aimerions inspecter. Parce qu'il a accès au DOM, il nous aidera à récupérer les images contenues dans la page Web. Si vous souhaitez en savoir plus sur ce qu'est un script de contenu, Opera, Mozilla et Google ont une documentation à ce sujet.

Notre script de contenu est simple :

 console.log("Dare Angel content script started"); browser.runtime.onMessage.addListener(function (request, sender, sendResponse) { if (request.command == "requestImages") { var images = document.getElementsByTagName('img'); var imagesList = []; for (var i = 0; i < images.length; i++) { if ((images[i].src.toLowerCase().endsWith(".jpg") || images[i].src.toLowerCase().endsWith(".png")) && (images[i].width > 64 && images[i].height > 64)) { imagesList.push({ url: images[i].src, alt: images[i].alt }); } } sendResponse(JSON.stringify(imagesList)); } }); view raw

Cela se connecte d'abord à la console pour vous permettre de vérifier que l'extension a été correctement chargée. Vérifiez-le via l'outil de développement de votre navigateur, accessible depuis F12 , Control + Shift + I ou ⌘ + ⌥ + I .

Il attend ensuite un message de la page de l'interface utilisateur avec une commande requestImages pour obtenir toutes les images disponibles dans le DOM actuel, puis il renvoie une liste de leurs URL si elles sont supérieures à 64 × 64 pixels (pour éviter tout les déchets de suivi des pixels et les images à basse résolution).

La page d'interface utilisateur contextuelle que nous utilisons est très simple et affichera la liste des images renvoyées par le script de contenu dans un conteneur flexbox. Il charge le script start.js , qui crée immédiatement une instance de dareangel.dashboard.js pour envoyer un message au script de contenu afin d'obtenir les URL des images dans l'onglet actuellement visible.

Voici le code qui réside dans la page de l'interface utilisateur, demandant les URL du script de contenu :

 browser.tabs.query({ active: true, currentWindow: true }, (tabs) => { browser.tabs.sendMessage(tabs[0].id, { command: "requestImages" }, (response) => { this._imagesList = JSON.parse(response); this._imagesList.forEach((element) => { var newImageHTMLElement = document.createElement("img"); newImageHTMLElement.src = element.url; newImageHTMLElement.alt = element.alt; newImageHTMLElement.tabIndex = this._tabIndex; this._tabIndex++; newImageHTMLElement.addEventListener("focus", (event) => { if (COMPUTERVISIONKEY !== "") { this.analyzeThisImage(event.target.src); } else { var warningMsg = document.createElement("div"); warningMsg.innerHTML = "
 Veuillez générer une clé Computer Vision dans l'autre onglet.
 " ;
                    this._targetDiv.insertBefore(warningMsg, this._targetDiv.firstChild);
                    browser.tabs.create({ active : false, url : "https://www.microsoft.com/cognitive-services/en-US/sign-up?ReturnUrl=/cognitive-services/en-us/subscriptions?productId =%2fproducts%2f54d873dd5eefd00dc474a0f4" });
                }
            });
            this._targetDiv.appendChild(newImageHTMLElement);
        });
    });
});

Nous créons des éléments d'image. Chaque image déclenchera un événement si elle a le focus, interrogeant l'API Computer Vision pour examen.

Cela se fait par ce simple appel XHR :

 analyzeThisImage(url) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { if (xhr.readyState == 4 && xhr.status == 200) { var response = document.querySelector('#response'); var reponse = JSON.parse(xhr.response); var resultToSpeak = `With a confidence of ${Math.round(reponse.description.captions[0].confidence * 100)}%, I think it's ${reponse.description.captions[0].text}`; console.log(resultToSpeak); if (!this._useBingTTS || BINGSPEECHKEY === "") { var synUtterance = new SpeechSynthesisUtterance(); synUtterance.text = resultToSpeak; window.speechSynthesis.speak(synUtterance); } else { this._bingTTSclient.synthesize(resultToSpeak); } } }; xhr.onerror = (evt) => { console.log(evt); }; try { xhr.open('POST', 'https://api.projectoxford.ai/vision/v1.0/describe'); xhr.setRequestHeader("Content-Type", "application/json"); xhr.setRequestHeader("Ocp-Apim-Subscription-Key", COMPUTERVISIONKEY); var requestObject = { "url": url }; xhr.send(JSON.stringify(requestObject)); } catch (ex) { console.log(ex); } } view raw

Les articles suivants vous aideront à comprendre le fonctionnement de cette API Computer Vision :

• « Analyse d'une image version 1.0 », Microsoft Cognitive Services
• « API de vision par ordinateur, v1.0 », Microsoft Cognitive Services
  Cela vous montre via une console interactive dans une page Web comment appeler l'API REST avec les propriétés JSON appropriées, et l'objet JSON que vous obtiendrez en retour. Il est utile de comprendre comment cela fonctionne et comment vous l'appelerez.

Dans notre cas, nous utilisons la fonction de describe de l'API. Vous remarquerez également dans le rappel que nous essaierons d'utiliser soit l' API Web Speech , soit le service Bing Text-to-Speech , en fonction de vos options.

Voici donc le flux de travail global de cette petite extension :

Chargement de l'extension dans chaque navigateur

Voyons rapidement comment installer l'extension dans chaque navigateur.

Conditions préalables

Téléchargez ou clonez ma petite extension de GitHub quelque part sur votre disque dur.

Modifiez également dareangel.dashboard.js pour ajouter au moins une clé API Computer Vision. Sinon, l'extension ne pourra afficher que les images extraites de la page Web.

Bord Microsoft

Tout d'abord, vous aurez besoin d'au moins une mise à jour anniversaire de Windows 10 (OS Build 14393+) pour prendre en charge les extensions dans Edge.

Ensuite, ouvrez Edge et tapez about:flags dans la barre d'adresse. Cochez la case "Activer les fonctionnalités du développeur d'extensions".

Cliquez sur "..." dans la barre de navigation d'Edge, puis sur "Extensions", puis sur "Charger l'extension", et sélectionnez le dossier dans lequel vous avez cloné mon référentiel GitHub. Vous obtiendrez ceci :

Cliquez sur cette extension fraîchement chargée et activez "Afficher le bouton à côté de la barre d'adresse".

Notez le bouton "Recharger l'extension", qui est utile pendant que vous développez votre extension. Vous ne serez pas obligé de le supprimer ou de le réinstaller pendant le processus de développement ; cliquez simplement sur le bouton pour actualiser l'extension.

Accédez à BabylonJS et cliquez sur le bouton Dare Angel (DA) pour suivre la même démo que celle présentée dans la vidéo.

Google Chrome, Opéra, Vivaldi

Dans Chrome, accédez à chrome://extensions . Dans Opera, accédez à opera://extensions . Et dans Vivaldi, accédez à vivaldi://extensions . Ensuite, activez le "mode développeur".

Cliquez sur "Charger l'extension décompressée" et choisissez le dossier dans lequel vous avez extrait mon extension.

Accédez à BabylonJS et ouvrez l'extension pour vérifier qu'elle fonctionne correctement.

MozillaFirefox

Vous avez deux options ici. La première consiste à charger temporairement votre extension, ce qui est aussi simple que dans Edge et Chrome.

Ouvrez Firefox, accédez à about:debugging et cliquez sur "Charger le module complémentaire temporaire". Ensuite, accédez au dossier de l'extension et sélectionnez le fichier manifest.json . C'est ça! Allez maintenant sur BabylonJS pour tester l'extension.

Le seul problème avec cette solution est qu'à chaque fois que vous fermez le navigateur, vous devrez recharger l'extension. La deuxième option serait d'utiliser l'emballage XPI. Vous pouvez en savoir plus à ce sujet dans "Extension Packaging" sur le Mozilla Developer Network.

Braver

La version publique de Brave n'a pas de "mode développeur" intégré pour vous permettre de charger une extension non signée. Vous devrez en créer votre propre version en suivant les étapes de « Chargement des extensions Chrome dans Brave ».

Comme expliqué dans cet article, une fois que vous avez cloné Brave, vous devrez ouvrir le fichier extensions.js dans un éditeur de texte. Localisez les lignes ci-dessous et insérez le code d'enregistrement de votre extension. Dans mon cas, je viens d'ajouter les deux dernières lignes :

 // Manually install the braveExtension and torrentExtension extensionInfo.setState(config.braveExtensionId, extensionStates.REGISTERED) loadExtension(config.braveExtensionId, getExtensionsPath('brave'), generateBraveManifest(), 'component') extensionInfo.setState('DareAngel', extensionStates.REGISTERED) loadExtension('DareAngel', getExtensionsPath('DareAngel/')) view raw

Copiez l'extension dans le dossier app/extensions . Ouvrez deux invites de commande dans le dossier browser-laptop . Dans le premier, lancez npm run watch et attendez que webpack ait fini de créer l'application Electron de Brave. Il devrait dire "webpack : le bundle est maintenant VALIDE". Sinon, vous rencontrerez des problèmes.

Ensuite, dans la deuxième invite de commande, lancez npm start , qui lancera notre version légèrement personnalisée de Brave.

Dans Brave, accédez à about:extensions , et vous devriez voir l'extension affichée et chargée dans la barre d'adresse.

Débogage de l'extension dans chaque navigateur

Astuce pour tous les navigateurs : à l'aide console.log() , enregistrez simplement certaines données du flux de votre extension. La plupart du temps, en utilisant les outils de développement du navigateur, vous pourrez cliquer sur le fichier JavaScript qui l'a enregistré pour l'ouvrir et le déboguer.

Bord Microsoft

Pour déboguer la partie script client, vivant dans le contexte de la page, il vous suffit d'ouvrir F12 . Ensuite, cliquez sur l'onglet "Débogueur" et trouvez le dossier de votre extension.

Ouvrez le fichier de script que vous souhaitez déboguer - dareangel.client.js , dans mon cas - et déboguez votre code comme d'habitude, en définissant des points d'arrêt, etc.

Si votre extension crée un onglet séparé pour faire son travail (comme l'analyseur de page, que notre équipe Vorlon.js a publié dans le magasin), appuyez simplement sur F12 sur cet onglet pour le déboguer.

Si vous souhaitez déboguer la page contextuelle, vous devez d'abord obtenir l'ID de votre extension. Pour cela, allez simplement dans la propriété de l'extension et vous trouverez une propriété ID :

Ensuite, vous devrez taper dans la barre d'adresse quelque chose comme ms-browser-extension://ID_of_your_extension/yourpage.html . Dans notre cas, ce serait ms-browser-extension://DareAngel_vdbyzyarbfgh8/dashboard.html . Ensuite, utilisez simplement F12 sur cette page :

Google Chrome, Opéra, Vivaldi, Brave

Étant donné que Chrome et Opera s'appuient sur la même base de code Blink, ils partagent le même processus de débogage. Même si Brave et Vivaldi sont des forks de Chromium, ils partagent également le même processus de débogage la plupart du temps.

Pour déboguer la partie du script client, ouvrez les outils de développement du navigateur sur la page que vous souhaitez déboguer (en appuyant sur F12 , Control + Shift + I ou ⌘ + ⌥ + I , selon le navigateur ou la plateforme que vous utilisez).

Ensuite, cliquez sur l'onglet "Scripts de contenu" et recherchez le dossier de votre extension. Ouvrez le fichier de script que vous souhaitez déboguer et déboguez votre code comme vous le feriez avec n'importe quel code JavaScript.

La page d'interface utilisateur contextuelle que nous utilisons est très simple et affichera la liste des images renvoyées par le script de contenu dans un conteneur flexbox. Il charge le script start.js , qui crée immédiatement une instance de dareangel.dashboard.js pour envoyer un message au script de contenu afin d'obtenir les URL des images dans l'onglet actuellement visible.

Voici le code qui réside dans la page de l'interface utilisateur, demandant les URL du script de contenu :

 browser.tabs.query({ active: true, currentWindow: true }, (tabs) => { browser.tabs.sendMessage(tabs[0].id, { command: "requestImages" }, (response) => { this._imagesList = JSON.parse(response); this._imagesList.forEach((element) => { var newImageHTMLElement = document.createElement("img"); newImageHTMLElement.src = element.url; newImageHTMLElement.alt = element.alt; newImageHTMLElement.tabIndex = this._tabIndex; this._tabIndex++; newImageHTMLElement.addEventListener("focus", (event) => { if (COMPUTERVISIONKEY !== "") { this.analyzeThisImage(event.target.src); } else { var warningMsg = document.createElement("div"); warningMsg.innerHTML = "
 Veuillez générer une clé Computer Vision dans l'autre onglet.
 " ;
                    this._targetDiv.insertBefore(warningMsg, this._targetDiv.firstChild);
                    browser.tabs.create({ active : false, url : "https://www.microsoft.com/cognitive-services/en-US/sign-up?ReturnUrl=/cognitive-services/en-us/subscriptions?productId =%2fproducts%2f54d873dd5eefd00dc474a0f4" });
                }
            });
            this._targetDiv.appendChild(newImageHTMLElement);
        });
    });
});

Nous créons des éléments d'image. Chaque image déclenchera un événement si elle a le focus, interrogeant l'API Computer Vision pour examen.

Cela se fait par ce simple appel XHR :

 analyzeThisImage(url) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { if (xhr.readyState == 4 && xhr.status == 200) { var response = document.querySelector('#response'); var reponse = JSON.parse(xhr.response); var resultToSpeak = `With a confidence of ${Math.round(reponse.description.captions[0].confidence * 100)}%, I think it's ${reponse.description.captions[0].text}`; console.log(resultToSpeak); if (!this._useBingTTS || BINGSPEECHKEY === "") { var synUtterance = new SpeechSynthesisUtterance(); synUtterance.text = resultToSpeak; window.speechSynthesis.speak(synUtterance); } else { this._bingTTSclient.synthesize(resultToSpeak); } } }; xhr.onerror = (evt) => { console.log(evt); }; try { xhr.open('POST', 'https://api.projectoxford.ai/vision/v1.0/describe'); xhr.setRequestHeader("Content-Type", "application/json"); xhr.setRequestHeader("Ocp-Apim-Subscription-Key", COMPUTERVISIONKEY); var requestObject = { "url": url }; xhr.send(JSON.stringify(requestObject)); } catch (ex) { console.log(ex); } } view raw

Les articles suivants vous aideront à comprendre le fonctionnement de cette API Computer Vision :

• « Analyse d'une image version 1.0 », Microsoft Cognitive Services
• « API de vision par ordinateur, v1.0 », Microsoft Cognitive Services
  Cela vous montre via une console interactive dans une page Web comment appeler l'API REST avec les propriétés JSON appropriées, et l'objet JSON que vous obtiendrez en retour. Il est utile de comprendre comment cela fonctionne et comment vous l'appelerez.

Dans notre cas, nous utilisons la fonction de describe de l'API. Vous remarquerez également dans le rappel que nous essaierons d'utiliser soit l' API Web Speech , soit le service Bing Text-to-Speech , en fonction de vos options.

Voici donc le flux de travail global de cette petite extension :

Chargement de l'extension dans chaque navigateur

Voyons rapidement comment installer l'extension dans chaque navigateur.

Conditions préalables

Téléchargez ou clonez ma petite extension de GitHub quelque part sur votre disque dur.

Modifiez également dareangel.dashboard.js pour ajouter au moins une clé API Computer Vision. Sinon, l'extension ne pourra afficher que les images extraites de la page Web.

Bord Microsoft

Tout d'abord, vous aurez besoin d'au moins une mise à jour anniversaire de Windows 10 (OS Build 14393+) pour prendre en charge les extensions dans Edge.

Ensuite, ouvrez Edge et tapez about:flags dans la barre d'adresse. Cochez la case "Activer les fonctionnalités du développeur d'extensions".

Cliquez sur "..." dans la barre de navigation d'Edge, puis sur "Extensions", puis sur "Charger l'extension", et sélectionnez le dossier dans lequel vous avez cloné mon référentiel GitHub. Vous obtiendrez ceci :

Cliquez sur cette extension fraîchement chargée et activez "Afficher le bouton à côté de la barre d'adresse".

Notez le bouton "Recharger l'extension", qui est utile pendant que vous développez votre extension. Vous ne serez pas obligé de le supprimer ou de le réinstaller pendant le processus de développement ; cliquez simplement sur le bouton pour actualiser l'extension.

Accédez à BabylonJS et cliquez sur le bouton Dare Angel (DA) pour suivre la même démo que celle présentée dans la vidéo.

Google Chrome, Opéra, Vivaldi

Dans Chrome, accédez à chrome://extensions . Dans Opera, accédez à opera://extensions . Et dans Vivaldi, accédez à vivaldi://extensions . Ensuite, activez le "mode développeur".

Cliquez sur "Charger l'extension décompressée" et choisissez le dossier dans lequel vous avez extrait mon extension.

Accédez à BabylonJS et ouvrez l'extension pour vérifier qu'elle fonctionne correctement.

MozillaFirefox

Vous avez deux options ici. La première consiste à charger temporairement votre extension, ce qui est aussi simple que dans Edge et Chrome.

Ouvrez Firefox, accédez à about:debugging et cliquez sur "Charger le module complémentaire temporaire". Ensuite, accédez au dossier de l'extension et sélectionnez le fichier manifest.json . C'est ça! Allez maintenant sur BabylonJS pour tester l'extension.

Le seul problème avec cette solution est qu'à chaque fois que vous fermez le navigateur, vous devrez recharger l'extension. La deuxième option serait d'utiliser l'emballage XPI. Vous pouvez en savoir plus à ce sujet dans "Extension Packaging" sur le Mozilla Developer Network.

Braver

La version publique de Brave n'a pas de "mode développeur" intégré pour vous permettre de charger une extension non signée. Vous devrez en créer votre propre version en suivant les étapes de « Chargement des extensions Chrome dans Brave ».

Comme expliqué dans cet article, une fois que vous avez cloné Brave, vous devrez ouvrir le fichier extensions.js dans un éditeur de texte. Localisez les lignes ci-dessous et insérez le code d'enregistrement de votre extension. Dans mon cas, je viens d'ajouter les deux dernières lignes :

 // Manually install the braveExtension and torrentExtension extensionInfo.setState(config.braveExtensionId, extensionStates.REGISTERED) loadExtension(config.braveExtensionId, getExtensionsPath('brave'), generateBraveManifest(), 'component') extensionInfo.setState('DareAngel', extensionStates.REGISTERED) loadExtension('DareAngel', getExtensionsPath('DareAngel/')) view raw

Copiez l'extension dans le dossier app/extensions . Ouvrez deux invites de commande dans le dossier browser-laptop . Dans le premier, lancez npm run watch et attendez que webpack ait fini de créer l'application Electron de Brave. Il devrait dire "webpack : le bundle est maintenant VALIDE". Sinon, vous rencontrerez des problèmes.

Ensuite, dans la deuxième invite de commande, lancez npm start , qui lancera notre version légèrement personnalisée de Brave.

Dans Brave, accédez à about:extensions , et vous devriez voir l'extension affichée et chargée dans la barre d'adresse.

Débogage de l'extension dans chaque navigateur

Astuce pour tous les navigateurs : à l'aide console.log() , enregistrez simplement certaines données du flux de votre extension. La plupart du temps, en utilisant les outils de développement du navigateur, vous pourrez cliquer sur le fichier JavaScript qui l'a enregistré pour l'ouvrir et le déboguer.

Bord Microsoft

Pour déboguer la partie script client, vivant dans le contexte de la page, il vous suffit d'ouvrir F12 . Ensuite, cliquez sur l'onglet "Débogueur" et trouvez le dossier de votre extension.

Ouvrez le fichier de script que vous souhaitez déboguer - dareangel.client.js , dans mon cas - et déboguez votre code comme d'habitude, en définissant des points d'arrêt, etc.

Si votre extension crée un onglet séparé pour faire son travail (comme l'analyseur de page, que notre équipe Vorlon.js a publié dans le magasin), appuyez simplement sur F12 sur cet onglet pour le déboguer.

Si vous souhaitez déboguer la page contextuelle, vous devez d'abord obtenir l'ID de votre extension. Pour cela, allez simplement dans la propriété de l'extension et vous trouverez une propriété ID :

Ensuite, vous devrez taper dans la barre d'adresse quelque chose comme ms-browser-extension://ID_of_your_extension/yourpage.html . Dans notre cas, ce serait ms-browser-extension://DareAngel_vdbyzyarbfgh8/dashboard.html . Ensuite, utilisez simplement F12 sur cette page :

Google Chrome, Opéra, Vivaldi, Brave

Étant donné que Chrome et Opera s'appuient sur la même base de code Blink, ils partagent le même processus de débogage. Même si Brave et Vivaldi sont des forks de Chromium, ils partagent également le même processus de débogage la plupart du temps.

Pour déboguer la partie du script client, ouvrez les outils de développement du navigateur sur la page que vous souhaitez déboguer (en appuyant sur F12 , Control + Shift + I ou ⌘ + ⌥ + I , selon le navigateur ou la plateforme que vous utilisez).

Ensuite, cliquez sur l'onglet "Scripts de contenu" et recherchez le dossier de votre extension. Ouvrez le fichier de script que vous souhaitez déboguer et déboguez votre code comme vous le feriez avec n'importe quel code JavaScript.

Pour déboguer un onglet que votre extension créerait, c'est exactement la même chose qu'avec Edge : utilisez simplement les outils de développement.

Pour Chrome et Opera, pour déboguer la page contextuelle, faites un clic droit sur le bouton de votre extension à côté de la barre d'adresse et choisissez "Inspecter la fenêtre contextuelle", ou ouvrez le volet HTML de la fenêtre contextuelle et faites un clic droit à l'intérieur pour "Inspecter. ” Vivaldi ne prend en charge que le clic droit puis "Inspecter" dans le volet HTML une fois ouvert.

Pour Brave, c'est le même processus qu'avec Edge. Vous devez d'abord trouver le GUID associé à votre extension dans about:extensions :

Et puis, dans un onglet séparé, ouvrez la page que vous souhaitez déboguer - dans mon cas, chrome-extension://bodaahkboijjjodkbmmddgjldpifcjap/dashboard.html - et ouvrez les outils de développement.

Pour la mise en page, vous avez un peu d'aide en utilisant Shift + F8 , qui vous permettra d'inspecter le cadre complet de Brave. Et vous découvrirez que Brave est une application Electron utilisant React !

Notez, par exemple, l'attribut data-reactroot .

Note : j'ai dû légèrement modifier le CSS de l'extension pour Brave car elle affiche actuellement des popups avec un fond transparent par défaut, et j'ai aussi eu quelques soucis avec la hauteur de ma collection d'images. Je l'ai limité à quatre éléments dans Brave.

MozillaFirefox

Mozilla a une très bonne documentation sur le débogage des extensions Web.

Pour la partie script client, c'est la même chose que dans Edge, Chrome, Opera et Brave. Ouvrez simplement les outils de développement dans l'onglet que vous souhaitez déboguer, et vous trouverez une moz-extension://guid avec votre code à déboguer :

Si vous avez besoin de déboguer un onglet que votre extension créerait (comme l'extension Page Analyzer de Vorlon.js), utilisez simplement les outils de développement :

Enfin, déboguer une popup est un peu plus complexe mais est bien expliqué dans la section « Debugging Popups » de la documentation.

Publication de votre extension dans chaque magasin

Chaque fournisseur dispose d'une documentation détaillée sur le processus à suivre pour publier votre extension dans sa boutique. Ils adoptent tous des approches similaires. Vous devez empaqueter l'extension dans un format de fichier particulier - la plupart du temps, un conteneur de type ZIP. Ensuite, vous devez le soumettre dans un portail dédié, choisir un modèle de tarification et attendre la fin du processus d'examen. Si elle est acceptée, votre extension sera téléchargeable dans le navigateur lui-même par tout utilisateur visitant la boutique d'extensions.

Voici les différents processus :

• Google : "Publier dans le Chrome Web Store"
• Mozilla : "Publier votre WebExtension"
• Opéra : « Directives de publication »
• Microsoft : "Packaging des extensions Microsoft Edge"

Veuillez noter que la soumission d'une extension Microsoft Edge au Windows Store est actuellement une capacité restreinte. Contactez l'équipe Microsoft Edge avec votre demande pour faire partie du Windows Store, et ils vous considéreront pour une future mise à jour.

J'ai essayé de partager le maximum de ce que j'ai appris en travaillant sur notre extension Vorlon.js Page Analyzer et cette petite preuve de concept.

Certains développeurs se souviennent de la difficulté de travailler sur diverses implémentations pour créer leur extension - qu'il s'agisse d'utiliser différents répertoires de construction, ou de travailler avec des API d'extension légèrement différentes, ou de suivre des approches totalement différentes, telles que les extensions XUL de Firefox ou les BHO et ActiveX d'Internet Explorer.

C'est génial de voir qu'aujourd'hui, en utilisant nos compétences habituelles en JavaScript, CSS et HTML, nous pouvons créer de superbes extensions en utilisant la même base de code et sur tous les navigateurs !

N'hésitez pas à me contacter sur Twitter pour tout commentaire.