Accès à la console et aux devtools du background.js de l'extension

Question

Je viens de commencer à utiliser les extensions Google Chrome et je n'arrive pas à me connecter à la console à partir de mon js de fond. Lorsqu'une erreur se produit (à cause d'une erreur de syntaxe, par exemple), je ne trouve pas non plus de message d'erreur.

Mon fichier manifeste :

{
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": [
    "pageCapture",
    "tabs"
  ]
}

background.js :

alert("here");
console.log("Hello, world!")

Lorsque je charge l'extension, l'alerte s'affiche mais je ne vois rien qui soit enregistré dans la console. Qu'est-ce que je fais de mal ?

Answer 1

Vous regardez au mauvais endroit. Ces messages de console n'apparaissent pas dans la page web, mais dans la page d'arrière-plan invisible (ManifestV2) ou dans le service worker (ManifestV3).

Pour voir la console correcte, ouvrez devtools pour le contexte du script :

1. Visitez chrome://extensions/ ou cliquez à droite sur l'icône de l'extension et sélectionnez "Gérer les extensions".
2. Activer le mode développeur
3. Cliquez sur le lien nommé background page (ManifestV2) ou service worker (ManifestV3).

Capture d'écran pour les extensions de ManifestV2 :

Capture d'écran pour les extensions de ManifestV3 :

Answer 2

J'ai eu le même problème, dans mon cas la journalisation était réglée sur "Hide all" dans l'onglet console des outils de développement de Chrome. Je n'avais même pas réalisé qu'il s'agissait d'une option, et je ne me souviens pas l'avoir désactivée.

Answer 3

Pour les adeptes qui souhaitent voir la console de débogage pour un "contenu script" de leur extension chrome, elle est disponible en faisant un "show developer console" normal puis en utilisant la flèche déroulante pour sélectionner son "environnement javascript" puis vous aurez accès à ses méthodes, etc.

Answer 4

En outre,

si vous voulez voir content_script js (lorsque la propriété "background" n'est pas définie) dans le fichier manifeste.json

"content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["popup.js"],
  }]

"browser_action": {
    "default_icon": "icon_32.png",
    "default_popup": "popup.html"
  }

entonces clic droit sur l'icône d'extension et cliquez sur Inspecter la fenêtre popup et la fenêtre du développeur s'ouvre avec popup.html ouvert, là vous voyez l'onglet console.

Answer 5

Similaire à la réponse de Michiel, j'ai également eu une drôle de configuration de console : Un filtre que je ne me souviens pas avoir réglé :

Après avoir effacé le filtre, j'ai vu les messages.