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

ES6-Module in Inhaltsskripts der Chrome-Erweiterung importieren

Problem: In Chrome 63 werden ES6-Module mithilfe der Import-/Exportsyntax in einen Inhalt importiert Das Skript ergibt eine Syntax Fehler.

Lösung:

Chrome-Erweiterungen unterstützen ES6-Module durch eine asynchrone dynamische import()-Funktion:

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

Diese Methode hat jedoch Einschränkungen:

• Es kann durch den Dienst der Website blockiert werden Worker.
• Die Deklaration der importierten Skripte in den über das Internet zugänglichen Ressourcen des Manifests ist erforderlich.

Für Nicht-Modul-Skripte sollten Sie Folgendes in Betracht ziehen:

• Verwendung eines normalen Nicht-Moduls -Modulskript.
• Fügen Sie seinen Namen zu „js“ in „content_scripts“ vor Ihrem Hauptinhalt hinzu Skript.
• Direkte Verwendung der globalen Variablen/Funktionen.

Zusätzliche Informationen:

• [So verwenden Sie ES6 „import ” mit Chrome Erweiterung](https://stackoverflow.com/a/50132415)
• [Arbeitsbeispiel für den ES6-Import in Chrome Erweiterung](https://github.com/browsers-toolbox/es-import-in-extension)
• [chrome.runtime.getURL](https://developer.chrome.com/extensions/runtime #method-getURL)

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