extension google chrome :: console.log () depuis la page d'arrière-plan?

173

Si j'appelle à console.log('something');partir de la page contextuelle, ou de tout script inclus, cela fonctionne bien.

Cependant, comme la page d'arrière-plan n'est pas directement exécutée depuis la page contextuelle, elle n'est pas incluse dans la console.

Y a-t-il un moyen que je puisse obtenir console.log()dans la page d'arrière-plan pour apparaître dans la console pour la page contextuelle?

existe-t-il un moyen, à partir de la page d'arrière-plan, d'appeler une fonction dans la page contextuelle?

Hailwood
la source
Que voulez-vous dire exactement en disant "ça marche bien"? Où lis "quelque chose"? L'utilisation de console.log () dans une fenêtre contextuelle ne devrait pas s'imprimer dans la console de la page chargée - puisque la question a 2 ans, l'API a-t-elle changé?
anddam
14
si vous faites un clic droit -> inspectez le popup sur l'action de votre navigateur, vous obtiendrez une page d'outils de développement pour votre extension. popup.js y imprimera des journaux.
not_shitashi
Le commentaire de @ not_shitashi devrait être la réponse à cette question.
gabe

Réponses:

154

Toute page d'extension (à l'exception des scripts de contenu ) a un accès direct à la page d'arrière-plan via chrome.extension.getBackgroundPage().

Cela signifie que dans la page contextuelle , vous pouvez simplement faire:

chrome.extension.getBackgroundPage().console.log('foo');

Pour faciliter son utilisation:

var bkg = chrome.extension.getBackgroundPage();
bkg.console.log('foo');

Maintenant, si vous voulez faire la même chose dans les scripts de contenu, vous devez utiliser Message Passing pour y parvenir. La raison, ils appartiennent tous les deux à des domaines différents, ce qui a du sens. Il existe de nombreux exemples dans la page de transmission de messages que vous pouvez consulter.

J'espère que tout efface.

Mohamed Mansour
la source
1
@MohamedMansour, cette solution ne fonctionne pas pour moi. Si je alert() chrome.extension.getBackgroundPage(), je reçois null. Dois-je avoir des autorisations définies ou une autre configuration?
gwg
@gwg votre extension a-t-elle une page d'arrière-plan? Selon la documentation "Renvoie null si l'extension n'a pas de page d'arrière-plan" developer.chrome.com/extensions/…
Mohamed Mansour
Cela fonctionne parfaitement pour mes propres messages à console. Merci. Des réflexions sur la façon de faire également apparaître des exceptions, etc. de popup.js dans la console de background.js?
steven_noble
195

Vous pouvez ouvrir la console de la page d'arrière-plan en cliquant sur le lien "background.html" dans la liste des extensions.

Pour accéder à la page d'arrière-plan qui correspond à vos extensions, ouvrez Settings / Extensionsou ouvrez un nouvel onglet et entrez chrome://extensions. Vous verrez quelque chose comme cette capture d'écran.

Boîte de dialogue des extensions Chrome

Sous votre extension, cliquez sur le lien background page. Ceci ouvre une nouvelle fenêtre. Pour l' échantillon de menu contextuel de la fenêtre a le titre: _generated_background_page.html.

serg
la source
4
Bravo, j'en suis conscient, mais l'ouverture directe de la page d'arrière-plan n'invoque rien de la page contextuelle.
Hailwood
L'ouverture de la page d'arrière-plan ne génère aucune information de journalisation de la console.
Layke
@Hailwood ouvrir la page d'arrière-plan n'invoque rien mais affichera la console pour la page d'arrière-plan.
anddam
1
@Layke une fois que vous avez ouvert la page d'arrière-plan, vous devez encore y écrire, c'est-à-dire utiliser directement console.log () depuis la page d'arrière-plan ou, comme l'a dit mohamed-mansour, appeler la même méthode sur l'objet retourné par getBackgroundPage ()
anddam
3
J'ai trouvé cette question cherchant comment vérifier une sortie d'extension (comme OP) et j'ai trouvé cette réponse très utile car elle me permettait de vérifier la journalisation de la console sans passer par une page de contenu.
anddam
66

Pour répondre directement à votre question, lorsque vous appelez console.log("something")depuis l'arrière-plan, ce message est consigné dans la console de la page d'arrière-plan. Pour le voir, vous pouvez aller chrome://extensions/et cliquez sur cette inspect viewsous votre extension.

Lorsque vous cliquez sur la fenêtre contextuelle, elle est chargée dans la page actuelle, donc console.log doit afficher le message du journal dans la page actuelle.

songyy
la source
Moi aussi! C'est le plus simple et direct.
SaidbakR
mon extension n'a pas cela, d'autres extensions en ont cependant! comment puis-je l'activer
Ahmed Eid
Si vous avez 3 moniteurs comme moi ... faites pivoter la tête. Il ouvrait ChromeDevTools à l'extrémité opposée de ma matrice de moniteurs et je ne l'ai pas vu.
mpen
26

Vous pouvez toujours utiliser console.log (), mais il est connecté à une console distincte. Pour le visualiser, faites un clic droit sur l'icône de l'extension et sélectionnez "Inspecter le popup".

Lacho Tomov
la source
12

La solution la plus simple serait d'ajouter le code suivant en haut du fichier. Et vous pouvez utiliser toutes les API complètes de la console Chrome comme vous le feriez normalement.

 console = chrome.extension.getBackgroundPage().console;
// for instance, console.assert(1!=1) will return assertion error
// console.log("msg") ==> prints msg
// etc
jj.
la source
9
const log = chrome.extension.getBackgroundPage().console.log;
log('something')

Ouvrir le journal:

  • Ouvrir: chrome: // extensions /
  • Détails> Page de fond
O Fallante
la source
Pourriez-vous fournir des explications supplémentaires sur vos commandes?
inetphantom
7

Essayez ceci, si vous souhaitez vous connecter à la console de la page active:

chrome.tabs.executeScript({
    code: 'console.log("addd")'
});
Faz
la source
1
Nécessite des autorisations d'hôte pour l'onglet actuel.
Xan
Vous pouvez l'ajouter à des fins de test et le supprimer si vous publiez l'addon.
Faz
1

En ce qui concerne la question initiale, je voudrais ajouter à la réponse acceptée par Mohamed Mansour qu'il existe également un moyen de faire fonctionner cela dans l'autre sens:

Vous pouvez accéder à d'autres pages d'extension (c.-à-d. Page d'options, page contextuelle) à partir de la page d'arrière-plan / script avec l' chrome.extension.getViews()appel. Comme décrit ici .

 // overwrite the console object with the right one.
var optionsPage = (  chrome.extension.getViews()  
                 &&  (chrome.extension.getViews().length > 1)  ) 
                ? chrome.extension.getViews()[1] : null;

 // safety precaution.
if (optionsPage) {
  var console = optionsPage.console;
}
WoodrowShigeru
la source
1

C'est un ancien post, avec déjà de bonnes réponses, mais j'ajoute mes deux morceaux. Je n'aime pas utiliser console.log, je préfère utiliser un enregistreur qui se connecte à la console, ou partout où je veux, j'ai donc un module définissant une fonction de journal un peu comme celle-ci

function log(...args) {
  console.log(...args);
  chrome.extension.getBackgroundPage().console.log(...args);
}

Quand j'appelle le journal ("ceci est mon journal"), il écrira le message à la fois dans la console contextuelle et dans la console d'arrière-plan.

L'avantage est de pouvoir modifier le comportement des logs sans avoir à changer le code (comme la désactivation des logs pour la production, etc ...)

Denis G.
la source
0

Pour obtenir un journal de console à partir d'une page d'arrière-plan, vous devez écrire l'extrait de code suivant dans votre page d'arrière-plan background.js -

chrome.extension.getBackgroundPage (). console.log ('bonjour');

Chargez ensuite l'extension et inspectez sa page d'arrière-plan pour voir le journal de la console.

Aller de l'avant!!

Anushka Rai
la source