Chrome Extension js: Freigeben von Funktionen zwischen background.js und popup.js

Question

Angenommen, ich habe eine JavaScript-Funktion foo(), die ich sowohl im Hintergrund als auch in popup.html ausführen möchte.

Zum Beispiel: es wird jede Stunde im Hintergrund meiner Chrome-Erweiterung ausgeführt, kann aber auch vom Benutzer aus dem Popup-Menü (popup.html) auf einen Knopfklick aktiviert werden.

Moment habe ich ein Skript, das global.jsfoo() definiert und wenn ich Anrufe foo() in meinem popup.js Dokument enthalten, führen sie ohne Probleme. (Wenn ich sind beide Skripte in popup.html)

aber wenn ich versuche, foo() innen background.js zugreifen zu können, die Anrufe nicht ausgeführt werden (auch wenn global.js im „Hintergrund“ enthalten „manifest.json“ Erweiterungsdatei:

"background": { 
    "persistent": true, 
    "scripts": ["background.js", "global.js"] 
}, 

gibt es eine bequeme Möglichkeit, Funktionen zwischen background.js und popup.js zu teilen (ohne die gesamte Funktion in jedes zu Kopieren)?

Answer 1

der Hintergrund-Skripte werden in der Reihenfolge, in der Manifest-Datei angegeben geladen. einfach loa d die Datei mit gemeinsamem Code, bevor Ihrem Skript Hintergrund wie folgt:

"background": { 
    "persistent": true, 
    "scripts": ["global.js", "background.js"] 
}, 

Statt den Code in dem Popup zu duplizieren, können Sie auch chrome.extension.getBackgroundPage() aus der Popup-Zugriffsfunktionen/Variablen der background page verwenden, z.B. chrome.extension.getBackgroundPage().myFunction();.

Answer 2

Zusätzlich die Skripte als Teil des background Abschnitt Ihrer manifest.json zum Hinzufügen, müssen Sie den Inhalt in den Skripten über die chrome.runtime.getBackgroundPage(callback) API zugreifen (die derzeit preferred to chrome.extension.getBackgroundPage()).

Zum Beispiel in popup.js oder an anderer Stelle in Ihrer Erweiterung:

chrome.runtime.getBackgroundPage(function(backgroundPageWindow) { 
    // Do stuff here that requires access to the background page. 
    // E.g. to access the function 'myFunction()' 
    console.log("Calling myFunction() " + backgroundPageWindow.myFunction()); 
}); 

Weitere Einzelheiten finden Sie in die getBackgroundPage documentation und die event pages docs (die erklären, dass chrome.extension.getBackgroundPage() veraltet ist).

Answer 3

Sie können auch Funktionen aus anderen Skripten fast so aufrufen, als hätten Sie alle direkt importiert. Sie können dies mithilfe von Konstruktoren und benutzerdefinierten Prototypen tun.

zunächst die Hintergrund-Skripte zum Mainfest, um den Zugang hinzufügen, wie sowie Skripte in unserem popup.html vor dem Body-Tag Schließung verbunden:

manifest.json

... 
"background": { 
"persistent": false, 
"scripts": [ 
    "foo.js", 
    "bg.js" 
]}, 
... 

In der Datei foo.js erstellen wir unseren Objektprototyp. Ich bin ein Modul Muster verwenden, weil wir es wollen sonst privat sein:

foo.js

(() => { 
    console.log('foo loaded');  // check that the script has loaded 
    window.test = window.test || {}; // check for or create the object 

    test.FooFunc = function() {  // setup a constructor to hold defaults 
    this.foo = 'bar', 
    this.time = '15000' 
    } 

    test.FooFunc.prototype = {  // add our prototype with a single method 
    callConsole: (text) => { 
     console.log('FooFunc method loaded from ' + text); 
    } 
    } 
})(); 

Vom bg.js-Datei können wir diese Funktion ständig aufrufen, indem wir einen neuen Test Objekt instanziieren. die Skripte Feuer, einschließlich unserer Funktion

bg.js

(() => { 
    console.log('bg loaded');   // check that the script has loaded 
    var testProto = new test.FooFunc; // instantiate new test object 

    testProto.callConsole('Background!'); 
})(); 

Nach dem Laden der Dateien, und sobald das Symbol der Pop-up öffnet geklickt wird. Sie sollten so etwas wie dies in der Konsole sehen:

foo loaded 
bg loaded 
FooFunc method loaded from Background! 

Verwenden mehrerer Hintergrundskripte

Natürlich können wir weiterhin mehrere Skripte in die Mischung hinzufügen, indem Sie sie einfach auf den Hintergrund Skript-Liste hinzufügen und popup.html vor dem bg.js, * in der Reihenfolge, in der sie aufgerufen werden sollen **. Sobald hinzugefügt, machen Sie neue Prototypen zum Test Objekt aus den neuen Skripten in der gleichen Manor, und dann Methoden zu jedem hinzufügen (test.Prefs ist ein großer zu machen).

* Skripts werden in der Reihenfolge geladen, in der sie aufgerufen werden. Wenn der Prototyp also nicht vor einem Skript erstellt wird, das darauf zugreifen möchte, kann der neue Prototyp nicht gefunden werden. Jedes Skript kann auf die Prototypen zugreifen, solange sie vor dem Aufruf dieser Skripte erstellt werden.

Für ein großartiges Beispiel in einem Anwendungsfall können Sie Chrome's Buildbot Monitor auschecken. Es zeigt nicht nur einen großartigen Prozess des privaten Arbeitens mit mehreren Skripts, sondern auch, wie Sie ein einzelnes Objekt verwenden können, um mehrere Einstellungen, Prototypen und Methoden für den Zugriff auf Ihre Erweiterung zu speichern.