Wie kann ich ES6-Module in Inhaltsskripts für Chrome-Erweiterungen importieren?

ES6-Module in Inhaltsskripts der Chrome-Erweiterung importieren

Problem:

In Chrome 63 werden ES6-Module mit import/ importiert. Exportsyntax in Inhaltsskripten führt zu Syntaxfehler.

Ursache:

Im Gegensatz zu HTML-Skripten unterstützen Inhaltsskripte das Laden von Modulen nicht nativ.

Lösung: Asynchroner dynamischer Import( )-Funktion

Um dieses Problem zu beheben, verwenden Sie Folgendes Problemumgehung:

1. Deklarieren Sie in manifest.json Ihr Modulskript als über das Internet zugängliche Ressource.
2. In content_script.js verwenden Sie die Funktion import(), um Ihr Modul asynchron zu laden.
3. Warten Sie auf den Import und führen Sie die Hauptfunktion Ihres Moduls aus Modul.

Beispiel:

manifest.json:

{
  "web_accessible_resources": [
    {
      "matches": ["<all_urls>"],
      "resources": ["my-module.js"]
    }
  ],
  ...
}

content_script.js :

(async () => {
  const src = chrome.runtime.getURL("my-module.js");
  const module = await import(src);
  module.main();
})();

Synchron Problemumgehung für den Import

Alternativ können Sie eine Problemumgehung für den synchronen Import für Nicht-Modul-Skripte verwenden:

1. Fügen Sie das Skript zum „js“-Array im Manifest hinzu. json.
2. Referenzieren Sie direkt in Ihrem Hauptinhalt auf die globalen Variablen und Funktionen des Skripts Skript.

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