Les extensions peuvent bénéficier des mêmes avantages en matière de débogage que les Outils pour les développeurs Chrome pour les pages Web, mais elles présentent des propriétés de comportement uniques. Pour devenir un débogueur d'extensions maître, vous devez comprendre ces comportements, comment les composants d'extension fonctionnent les uns avec les autres et où identifier les bugs. Ce tutoriel permet aux développeurs de comprendre les bases du débogage des extensions.
Localiser les journaux
Les extensions sont constituées de nombreux composants différents, qui ont des responsabilités individuelles. Téléchargez une extension défectueuse pour commencer à localiser les journaux d'erreurs des différents composants d'extension.
Script d'arrière-plan
Accédez à la page de gestion des extensions Chrome à l'adresse chrome://extensions et assurez-vous que le mode développeur est activé. Cliquez sur le bouton Chargez l'extension non empaquetée et sélectionnez le répertoire de l'extension défaillant. Une fois l'extension chargée, elle doit comporter trois boutons: Details (Détails), Remove (Supprimer) et Errors (Erreurs) en rouge.
Cliquez sur le bouton Erreurs pour afficher le journal d'erreurs. Le système d'extensions a détecté un problème dans le script d'arrière-plan.
Uncaught TypeError: Cannot read property 'addListener' of undefined
Vous pouvez également ouvrir le panneau des outils pour les développeurs Chrome pour le script en arrière-plan en sélectionnant le lien bleu à côté de Inspecter les vues.
Revenez au code.
chrome.runtime.oninstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log('The color is green.');
});
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostEquals: 'developer.chrome.com'},
})],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
Le script d'arrière-plan tente d'écouter l'événement onInstalled, mais le nom de la propriété nécessite un "I" majuscule. Mettez à jour le code pour refléter le bon appel, cliquez sur le bouton Clear all (Tout effacer) en haut à droite, puis actualisez l'extension.
Fenêtre pop-up
Maintenant que l'extension s'initialise correctement, vous pouvez tester d'autres composants. Actualisez cette page ou ouvrez un nouvel onglet et accédez à n'importe quelle page sur developer.chrome.com, ouvrez le pop-up, puis cliquez sur le carré vert. Et... rien ne se passe.
Revenez à la page de gestion des extensions. Le bouton Erreurs s'affiche de nouveau. Cliquez dessus pour afficher le nouveau journal.
Uncaught ReferenceError: tabs is not defined
Vous pouvez également examiner les erreurs de pop-up en inspectant celui-ci.
L'erreur tabs is undefined indique que l'extension ne sait pas où injecter le script de contenu.
Pour corriger ce problème, appelez la méthode tabs.query(), puis sélectionnez l'onglet actif.
let changeColor = document.getElementById('changeColor');
chrome.storage.sync.get('color', function(data) {
changeColor.style.backgroundColor = data.color;
changeColor.setAttribute('value', data.color);
});
changeColor.onclick = function(element) {
let color = element.target.value;
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.executeScript(
tabs[0].id,
{code: 'document.body.style.backgroundColor = color;'});
});
};
Mettez à jour le code, cliquez sur le bouton Clear all (Tout effacer) en haut à droite, puis actualisez l'extension.
Script de contenu
Actualisez la page, ouvrez le pop-up, puis cliquez sur la case verte. Et... non, l'arrière-plan n'a toujours pas changé de couleur ! Revenez à la page de gestion des extensions. Il n'y a pas de bouton Erreurs. Le problème est sans doute dû au script de contenu, qui s'exécute au sein de la page Web.
Ouvrez le panneau "Outils de développement" sur la page Web que l'extension tente de modifier.
Seules les erreurs d'exécution console.warning et console.error seront enregistrées sur la page de gestion des extensions.
Pour utiliser les outils de développement à partir du script de contenu, cliquez sur la flèche du menu déroulant en regard de top et sélectionnez l'extension.
L'erreur indique que color n'est pas défini. L'extension ne doit pas transmettre la variable correctement.
Corrigez le script injecté pour transmettre la variable de couleur au code.
{code: 'document.body.style.backgroundColor = "' + color + '";'});
Onglets des extensions
Les journaux des pages d'extension affichées sous forme d'onglets, tels que les pages de remplacement et les options en plein écran, sont disponibles dans la console des pages Web et sur la page de gestion des extensions.
Surveiller les requêtes réseau
Le pop-up effectue souvent toutes les requêtes réseau requises avant même que les développeurs les plus rapides puissent ouvrir les outils de développement. Pour afficher ces requêtes, actualisez le panneau "Network" (Réseau). Le pop-up est actualisé sans fermer le panneau "Outils de développement".
Déclarer des autorisations
Bien que les extensions aient des fonctionnalités semblables à celles des pages Web, elles nécessitent souvent l'autorisation d'utiliser certaines fonctionnalités, telles que les cookies, le stockage et les requêtes XMLHttpRequsts inter-origines. Consultez l'article sur les autorisations et les API Chrome disponibles pour vous assurer qu'une extension demande les autorisations appropriées dans son fichier manifeste.
{
"name": "Broken Background Color",
"version": "1.0",
"description": "Fix an Extension!",
"permissions": [
"activeTab",
"declarativeContent",
"storage"
],
"options_page": "options.html",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"manifest_version": 2
}
Étapes suivantes
Pour en savoir plus sur le débogage des extensions, regardez la vidéo Développement et débogage. Pour en savoir plus sur les outils pour les développeurs Chrome, consultez la documentation.