Wie kann ich ES6-Module in das Inhaltsskript meiner Chrome-Erweiterung laden?

ES6-Module in ein Inhaltsskript für Chrome-Erweiterung laden

Hintergrund:
Chrome 61 führte Unterstützung für ein JavaScript-Module. Allerdings kann das Laden von Modulen in einem Inhaltsskript für Chrome-Erweiterungen aufgrund der Einschränkungen der Inhaltsskriptumgebung eine Herausforderung darstellen.

Problem:
Sie versuchen, die Import-/Exportsyntax zu verwenden in einem Inhaltsskript, es treten jedoch Syntaxfehler auf.

Lösung:
Es gibt zwei Ansätze zum Laden Module in einem Inhaltsskript:

Asynchrone dynamische import()-Funktion für ES-Module:

• Deklarieren Sie das Skript, das im Manifest der Erweiterung geladen werden soll, als Web Zugängliche Ressource.
• Verwenden Sie die Funktion import() im Inhaltsskript, um das Modul währenddessen dynamisch zu importieren Laufzeit.

Beispiel:

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

Synchroner „Import“-Workaround für normale Nicht-Modul-Skripte:

• Schreiben das Modul als normales Nicht-Modul-Skript.
• Fügen Sie seinen Namen zum „js“-Array im hinzu Abschnitt „content_scripts“ des Manifests vor dem Hauptinhaltsskript.
• Greifen Sie direkt im Inhaltsskript auf die Variablen und Funktionen des Moduls zu.

Hinweis:
Der asynchrone dynamische Importansatz ist sicherer und flexibler, kann jedoch vom Servicemitarbeiter der Website blockiert werden. Die synchrone „Import“-Problemumgehung ist weniger robust, aber möglicherweise zuverlässiger.

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