Comment puis-je charger des modules ES6 dans le script de contenu de mon extension Chrome ?

Chargement de modules ES6 dans un script de contenu pour l'extension Chrome

Contexte :
Chrome 61 a introduit la prise en charge de Modules JavaScript. Toutefois, le chargement de modules dans un script de contenu pour les extensions Chrome peut s'avérer difficile en raison des limitations de l'environnement du script de contenu.

Problème :
Vous essayez d'utiliser la syntaxe d'importation/exportation. dans un script de contenu, mais rencontrez des erreurs de syntaxe.

Solution :
Il existe deux approches pour charger des modules dans un contenu script :

Fonction d'import dynamique asynchrone () pour les modules ES :

• Déclarez le script à charger dans le manifeste de l'extension en tant que ressource accessible au Web.
• Utilisez la fonction import() dans le script de contenu pour importer dynamiquement le module pendant runtime.

Exemple :

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

Solution de contournement "d'importation" synchrone pour les scripts normaux non-modules :

• Écrire le module comme un script normal non-module.
• Ajoutez son nom au tableau "js" dans la section "content_scripts" du manifeste, avant le script de contenu principal.
• Accédez aux variables et fonctions du module directement dans le script de contenu.

Remarque :
L'approche d'importation dynamique asynchrone est plus sûre et plus flexible, mais peut être bloquée par le service worker du site Web. La solution de contournement « importation » synchrone est moins robuste mais peut être plus fiable.

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!