Google Chrome Extension :: console.log () von der Hintergrundseite?

173

Wenn ich console.log('something');von der Popup-Seite oder einem darin enthaltenen Skript anrufe, funktioniert es einwandfrei.

Da die Hintergrundseite jedoch nicht direkt von der Popup-Seite ausgeführt wird, ist sie nicht in der Konsole enthalten.

Gibt es eine Möglichkeit, die console.log()auf der Hintergrundseite angezeigt wird, um sie in der Konsole für die Popup-Seite anzuzeigen?

Gibt es eine Möglichkeit, von der Hintergrundseite aus eine Funktion auf der Popup-Seite aufzurufen?

Hagelholz
quelle
Was meinst du genau mit "es funktioniert gut"? Wo liest man "etwas"? Die Verwendung von console.log () in einem Popup-Fenster sollte nicht in der Konsole der geladenen Seite gedruckt werden. Hat sich die API geändert, da die Frage 2 Jahre alt ist?
anddam
14
Wenn Sie mit der rechten Maustaste auf -> Popup in Ihrer Browseraktion überprüfen klicken, wird eine Seite mit Entwicklertools für Ihre Erweiterung angezeigt. popup.js druckt Protokolle dazu.
not_shitashi
@ not_shitashis Kommentar sollte die Antwort auf diese Frage sein.
gabe

Antworten:

154

Jede Erweiterungsseite (außer Inhaltsskripten ) hat direkten Zugriff auf die Hintergrundseite über chrome.extension.getBackgroundPage().

Das bedeutet, dass Sie auf der Popup-Seite einfach Folgendes tun können:

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

Um die Verwendung zu vereinfachen:

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

Wenn Sie dasselbe in Inhaltsskripten tun möchten, müssen Sie Message Passing verwenden , um dies zu erreichen. Der Grund, sie gehören beide zu verschiedenen Domänen, die Sinn machen. Auf der Seite " Nachrichtenübermittlung" finden Sie viele Beispiele, die Sie auschecken können.

Hoffe das klärt alles.

Mohamed Mansour
quelle
1
@ MohamedMansour, diese Lösung funktioniert bei mir nicht. Wenn ich alert() chrome.extension.getBackgroundPage(), bekomme ich null. Muss ich Berechtigungen oder eine andere Konfiguration haben?
GWG
@gwg Hat Ihre Erweiterung eine Hintergrundseite? Laut Dokumentation "Gibt null zurück, wenn die Erweiterung keine Hintergrundseite hat." developer.chrome.com/extensions/…
Mohamed Mansour
Dies funktioniert perfekt für meine eigenen Nachrichten an die Konsole. Vielen Dank. Irgendwelche Gedanken darüber, wie auch Ausnahmen usw. von popup.js in der Konsole von background.js angezeigt werden können?
steven_noble
194

Sie können die Konsole der Hintergrundseite öffnen, wenn Sie in der Erweiterungsliste auf den Link "background.html" klicken.

Um auf die Hintergrundseite zuzugreifen, die Ihren Erweiterungen entspricht, öffnen Settings / Extensionsoder öffnen Sie eine neue Registerkarte und geben Sie ein chrome://extensions. Sie werden so etwas wie diesen Screenshot sehen.

Chrome-Erweiterungsdialog

Klicken Sie unter Ihrer Erweiterung auf den Link background page. Dies öffnet ein neues Fenster. Für das Kontextmenübeispiel hat das Fenster den Titel : _generated_background_page.html.

serg
quelle
4
Prost, mir ist das bewusst, aber das direkte Öffnen der Hintergrundseite ruft nichts von der Popup-Seite auf.
Hailwood
Beim Öffnen der Hintergrundseite werden keine Konsolenprotokollierungsinformationen ausgegeben.
Layke
@Hailwood beim Öffnen der Hintergrundseite wird nichts aufgerufen, sondern die Konsole für die Hintergrundseite angezeigt.
anddam
1
@Layke Sobald Sie die Hintergrundseite geöffnet haben, müssen Sie noch in sie schreiben, dh verwenden Sie direkt console.log () von der Hintergrundseite oder rufen Sie, wie mohamed-mansour sagte, dieselbe Methode für das von getBackgroundPage ()
anddam zurückgegebene Objekt auf
3
Ich fand diese Frage bei der Suche nach einer Erweiterungsausgabe (wie OP) und fand diese Antwort sehr nützlich, da ich die Konsolenprotokollierung überprüfen konnte, ohne eine Inhaltsseite zu durchlaufen.
anddam
66

Um Ihre Frage direkt zu beantworten, wenn Sie console.log("something")aus dem Hintergrund anrufen , wird diese Nachricht in der Konsole der Hintergrundseite protokolliert. Um es anzuzeigen, können Sie unter Ihrer Erweiterung darauf chrome://extensions/klicken inspect view.

Wenn Sie auf das Popup klicken, wird es in die aktuelle Seite geladen. Daher sollte in der console.log die Protokollmeldung auf der aktuellen Seite angezeigt werden.

songyy
quelle
Ich auch! Es ist das einfachste und direkteste.
SaidbakR
Meine Erweiterung hat das nicht, andere Erweiterungen jedoch! Wie aktiviere ich es
Ahmed Eid
Wenn Sie 3 Monitore wie ich haben ... drehen Sie Ihren Kopf. Es öffnete ChromeDevTools am anderen Ende meines Monitor-Arrays und ich sah es nicht.
Mpen
26

Sie können console.log () weiterhin verwenden, es wird jedoch in einer separaten Konsole angemeldet. Um es anzuzeigen, klicken Sie mit der rechten Maustaste auf das Erweiterungssymbol und wählen Sie "Popup überprüfen".

Lacho Tomov
quelle
12

Die einfachste Lösung wäre, den folgenden Code oben in die Datei einzufügen. Und dann können Sie alle vollständigen Chrome-Konsolen-APIs wie gewohnt verwenden.

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

Protokoll öffnen:

  • Öffnen Sie: chrome: // extensions /
  • Details> Hintergrundseite
O Fallante
quelle
Würde es Ihnen etwas ausmachen, Ihren Befehlen weitere Erklärungen zu geben?
Inetphantom
7

Versuchen Sie Folgendes, wenn Sie sich bei der Konsole der aktiven Seite anmelden möchten:

chrome.tabs.executeScript({
    code: 'console.log("addd")'
});
Faz
quelle
1
Erfordert Host-Berechtigungen für die aktuelle Registerkarte.
Xan
Sie können es zum Testen hinzufügen und entfernen, wenn Sie das Addon freigeben.
Faz
1

In Bezug auf die ursprüngliche Frage möchte ich der akzeptierten Antwort von Mohamed Mansour hinzufügen, dass es auch eine Möglichkeit gibt, diese Arbeit umgekehrt zu machen:

Sie können mit dem Aufruf über die Hintergrundseite / das Skript auf andere Erweiterungsseiten (z. B. Optionsseite, Popup-Seite) zugreifen chrome.extension.getViews(). Wie hier beschrieben .

 // 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
quelle
1

Es ist ein alter Beitrag mit bereits guten Antworten, aber ich füge meine zwei Bits hinzu. Ich verwende nicht gern console.log, sondern lieber einen Logger, der sich an der Konsole anmeldet, oder wo immer ich will, also habe ich ein Modul, das eine Protokollfunktion wie diese definiert

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

Wenn ich log aufrufe ("das ist mein Protokoll"), wird die Nachricht sowohl in die Popup-Konsole als auch in die Hintergrundkonsole geschrieben.

Der Vorteil besteht darin, dass Sie das Verhalten der Protokolle ändern können, ohne den Code ändern zu müssen (z. B. Deaktivieren von Protokollen für die Produktion usw.).

Denis G.
quelle
0

Um ein Konsolenprotokoll von einer Hintergrundseite zu erhalten, müssen Sie das folgende Codefragment in Ihre Hintergrundseite background.js schreiben -

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

Laden Sie dann die Erweiterung und überprüfen Sie die Hintergrundseite, um das Konsolenprotokoll anzuzeigen.

Gehen Sie geradeaus!!

Anushka Rai
quelle