Les extensions peuvent profiter des mêmes avantages 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 expert du débogage d'extensions, vous devez comprendre ces comportements, comment les composants d'extension fonctionnent ensemble et où trouver les bugs. Ce tutoriel fournit aux développeurs des connaissances de base sur le débogage des extensions.
Localiser les journaux
Les extensions sont constituées de nombreux composants différents, chacun ayant ses propres responsabilités. Téléchargez une extension défectueuse pour commencer à localiser les journaux d'erreurs des différents composants de l'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 Charger le fichier non compressé et sélectionnez le répertoire de l'extension défectueuse. Une fois l'extension chargée, elle devrait comporter trois boutons : Détails, Supprimer et 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 d'arrière-plan.
Uncaught TypeError: Cannot read property 'addListener' of undefined
Vous pouvez également ouvrir le panneau "Outils pour les développeurs Chrome" pour le script d'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 l'appel correct, cliquez sur le bouton Tout effacer en haut à droite, puis rechargez l'extension.
Fenêtre pop-up
Maintenant que l'extension s'initialise correctement, d'autres composants peuvent être testés. 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 de 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 inspectant la pop-up.
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 rechargez l'extension.
Script de contenu
Actualisez la page, ouvrez le pop-up et cliquez sur la zone verte. Et… non, la couleur de l'arrière-plan n'a toujours pas changé ! Revenez à la page de gestion des extensions et… il n'y a pas de bouton Erreurs. Le script de contenu, qui s'exécute à l'intérieur de la page Web, est probablement à l'origine du problème.
Ouvrez le panneau des outils de développement 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, puis sélectionnez l'extension.
L'erreur indique que color n'est pas défini. Il est possible que l'extension ne transmette pas correctement la variable.
Corrigez le script injecté pour transmettre la variable de couleur au code.
{code: 'document.body.style.backgroundColor = "' + color + '";'});
Onglets d'extension
Les journaux des pages d'extension affichées sous forme d'onglet, telles que les pages de remplacement et les options en plein écran, 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 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 "Réseau". Il rechargera le pop-up sans fermer le panneau des outils de développement.
Déclarer des autorisations
Bien que les extensions aient des capacité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 XMLHttpRequest d'origine croisée. Consultez l'article sur les autorisations et les API Chrome disponibles pour vous assurer qu'une extension demande les autorisations appropriées dans son 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 Développement et débogage. Pour en savoir plus sur les outils pour les développeurs Chrome, consultez la documentation.