Comment puis-je importer des modules ES6 dans les scripts de contenu de mon extension Chrome ?

Importation de modules ES6 dans des scripts de contenu pour les extensions Chrome

Problème :

Lors de la tentative d'importation de modules ES6 dans un Chrome script de contenu d'extension utilisant la syntaxe d'importation/exportation standard, les messages d'erreur sont rencontrés.

Contexte :

Chrome 61 a introduit la prise en charge des modules JavaScript, mais la syntaxe d'importation n'est pas reconnue dans les scripts de contenu des extensions Chrome.

Solution : fonction Asynchronous Dynamic import()

Pour importer des modules ES6 dans les scripts de contenu de l'extension Chrome, utilisez la fonction asynchrone Dynamic Import() :

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

Considérations supplémentaires :

• Déclarez les scripts importés dans le manifeste de l'extension en tant que ressources accessibles sur le Web.
• Cette approche repose sur une fonction asynchrone, qui pourrait potentiellement être bloquée par le service d'un site Web travailleur.

Solution de contournement "d'importation" synchrone

Comme alternative, utilisez un script normal non-module et ajoutez son nom au tableau "js" dans "content_scripts" avant le script de contenu principal. Les variables globales et les fonctions du script sont accessibles directement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!