Wie kann ich ES6-Module in die Inhaltsskripte meiner Chrome-Erweiterung importieren?

ES6-Module in Inhaltsskripte für Chrome-Erweiterungen importieren

Problem:

Beim Versuch, ES6-Module in Chrome zu importieren Erweiterungsinhaltsskript mit Standard-Import-/Exportsyntax, Fehlermeldungen sind aufgetreten.

Kontext:

Chrome 61 führte Unterstützung für JavaScript-Module ein, aber die Importsyntax wird in Inhaltsskripten von Chrome-Erweiterungen nicht erkannt.

Lösung: Asynchrone dynamische import()-Funktion

Zum Importieren von ES6-Modulen in Chrome-Erweiterungsinhalte Skripts verwenden Sie die asynchrone dynamische import()-Funktion:

(async () => {
  const src = chrome.runtime.getURL("your/content_main.js");
  const contentMain = await import(src);
  contentMain.main();
})();

Zusätzliche Überlegungen:

• Deklarieren Sie importierte Skripte im Manifest der Erweiterung als über das Internet zugängliche Ressourcen.
• Dieser Ansatz basiert auf einer asynchronen Funktion, die möglicherweise vom Dienst einer Website blockiert werden könnte Worker.

Synchroner „Import“-Workaround

Alternativ können Sie ein normales Nicht-Modul-Skript verwenden und seinen Namen zum „js“-Array hinzufügen „content_scripts“ vor dem Hauptinhaltsskript. Auf globale Variablen und Funktionen aus dem Skript kann direkt zugegriffen werden.

Das obige ist der detaillierte Inhalt vonWie kann ich ES6-Module in die Inhaltsskripte meiner Chrome-Erweiterung importieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!