Les extensions peuvent exploiter les mêmes avantages de débogage que les outils pour les développeurs Chrome pour les pages Web, mais elles comportent des propriétés de comportement uniques. Pour devenir un débogueur d'extension principal, vous devez comprendre ces comportements, la façon dont les composants d'extension interagissent entre eux et les endroits où trouver les bugs. Ce tutoriel fournit aux développeurs des connaissances de base sur les extensions de débogage.
Localiser les journaux
Les extensions sont constituées de nombreux composants différents, et chacun d'eux a ses propres responsabilités. Téléchargez une extension défectueuse pour commencer à rechercher les journaux d'erreurs des différents composants de l'extension.
Script en 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 Charger non compressé, puis sélectionnez le répertoire de l'extension endommagée. Une fois l'extension chargée, trois boutons doivent s'afficher: Details (Détails), Remove (Supprimer) et Errors (Erreurs) en rouge.
Cliquez sur le bouton Erreurs pour afficher le journal des erreurs. Le système d'extensions a détecté un problème dans le script en 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 en arrière-plan tente d'écouter l'événement onInstalled, mais le nom de la propriété nécessite un "I" en majuscules. Modifiez le code pour refléter l'appel correct, cliquez sur le bouton 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 et cliquez sur le carré vert. Et… rien ne se passe.
Revenez à la page de gestion des extensions. Le bouton Erreurs est à nouveau visible. Cliquez dessus pour afficher le nouveau journal.
Uncaught ReferenceError: tabs is not defined
Vous pouvez également consulter les erreurs de pop-up en les inspectant.
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;'});
});
};
Modifiez le code, cliquez sur le bouton Tout effacer en haut à droite, puis actualisez l'extension.
Script de contenu
Actualisez la page, ouvrez le pop-up et cliquez sur la zone 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 script de contenu, qui s'exécute sur la page Web, est probablement à l'origine du problème.
Ouvrez le panneau des outils pour les développeurs de 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 à côté de top (en haut) 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 dans le code.
{code: 'document.body.style.backgroundColor = "' + color + '";'});
Onglets des extensions
Les journaux des pages d'extension affichées sous forme d'onglet, comme les pages de remplacement et les options pour la page entière, sont disponibles dans la console de la page Web et sur la page de gestion des extensions.
Surveiller les requêtes réseau
La fenêtre pop-up envoie souvent toutes les requêtes réseau requises avant même que le développeur le plus rapide ne puisse ouvrir les outils de développement. Pour afficher ces requêtes, actualisez le panneau "Network". Le pop-up est alors actualisé sans fermer le panneau des outils de développement.
Déclarer des autorisations
Bien que les extensions aient des fonctionnalités similaires à celles des pages Web, elles ont souvent besoin d'une autorisation pour utiliser certaines fonctionnalités, telles que les cookies, le stockage et les requêtes XMLHttpRequsts multi-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 manifest.
{
"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.