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

Importation de modules ES6 dans les scripts de contenu d'extension Chrome

Problème :

Dans Chrome 63, l'importation de modules ES6 à l'aide de import/ la syntaxe d'exportation dans les scripts de contenu entraîne SyntaxErrors.

Cause :

Contrairement aux scripts HTML, les scripts de contenu ne prennent pas en charge nativement le chargement de modules.

Solution : Importation dynamique asynchrone ( ) fonction

Pour résoudre ce problème, utilisez ce qui suit solution de contournement :

1. Dans manifest.json, déclarez votre script de module comme ressource accessible sur le Web.
2. Dans content_script.js, utilisez la fonction import() pour charger votre module de manière asynchrone.
3. Attendez l'import et exécutez la fonction principale de votre module.

Exemple :

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();
})();

Importation synchrone Solution de contournement

Vous pouvez également utiliser une solution de contournement d'importation synchrone pour les scripts non-modules :

1. Ajoutez le script au tableau "js" dans manifest.json .
2. Référencez les variables globales et les fonctions du script directement dans votre contenu principal scénario.

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!