Extension Chrome : importer des modules ES6 dans des scripts de contenu

Question

Dans Chrome 61, la prise en charge des modules JavaScript a été ajoutée. Maintenant, j'utilise Chrome 63.

J'essaie d'utiliser un module dans un script de contenu d'extension Chrome en utilisant la syntaxe import/export

Dansmanifest.json:

"content_scripts": [
    {
        "js": [
            "content.js"
        ],
    }
]≪/pré>
<p>Dans<strong><code>my-script.js</code></strong> (avec <strong><code>content.js</code></strong> même répertoire ):</p>
<pre class="brush:php;toolbar:false;">'use strict';

const injectFunction = () => window.alert('bonjour tout le monde');

exporter la fonction d'injection par défaut ;

Danscontent.js:

'use strict';

importer injectFunction depuis './my-script.js' ;
injectFunction();

J'obtiens cette erreur :Erreur de syntaxe non détectée : Identificateur inattendu

Si je modifie la syntaxe d'importation en import {injectFunction} from './my-script.js'; j'obtiens cette erreur : Uncaught SyntaxError : Jeton inattendu {<

Y a-t-il un problème lors de l'utilisation de cette syntaxe dans content.js dans l'extension Chrome (car en HTML, vous devez utiliser

;code>

Answer 1

Utilisez la fonction dynamic import().

Contrairement à la solution de contournement dangereuse utilisant l'élément 元素的不安全解决方法不同，此解决方法在相同的安全 JS 环境（内容脚本的隔离世界）中运行，您导入的模块仍然可以访问全局变量以及初始内容脚本的函数，包括内置的 chrome API，例如 chrome.runtime.sendMessage

chrome intégrée, telle que

chrome.runtime.sendMessage. content_script.js

Dans

content_script.js, cela ressemble à

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

Vous devez également déclarer le script importé dans les

Ressources accessibles au Web

du manifeste :

// ManifesteV3

  "web_accessible_resources": [{
     "matches": ["<all_urls>"],
     "resources": ["your/content_main.js"]
   }],

// ManifesteV2

  "web_accessible_resources": [
     "your/content_main.js"
  ]

En savoir plus :
Comment utiliser "l'importation" ES6 avec l'extension Chrome
Exemple fonctionnel d'importation ES6 dans l'extension Chrome
• chrome.runtime.getURL李>chrome.runtime.getURL

🎜J'espère que cela vous aidera. 🎜

Answer 2

Avertissement

Tout d’abord, il est important de noter que depuis janvier 2018, les scripts de contenu ne prennent pas en charge les modules. Cette solution de contournement contourne les restrictions de votre extension en intégrant la balise module script dans la page renvoyée.

C'est une solution dangereuse !

Les scripts Web (ou autres extensions) peuvent exploiter votre code et extraire/usurper des données en utilisant des setters/getters, des proxys sur Object.prototype et d'autres prototypes Object.prototype 和其他原型上使用 setter/getter、代理来利用您的代码并提取/欺骗数据函数和/或全局对象，因为 scriptfonctions et/ou objets globaux, car le code à l'intérieur de l'élément

s'exécute dans le contexte JS de la page, et non dans l'environnement JS isolé et sécurisé qui exécute les scripts de contenu par défaut.

Une solution de contournement sûre est la dynamique import() présentée dans une autre réponse

ici.

Solution

C'est à moimanifest.json

 :

    "content_scripts": [ {
       "js": [
         "content.js"
       ]
    }],
    "web_accessible_resources": [
       "main.js",
       "my-script.js"
    ]

web_accessible_resourcesVeuillez noter que j'ai deux scripts en .

C'est à moicontent.js

 :

    'use strict';
    
    const script = document.createElement('script');
    script.setAttribute("type", "module");
    script.setAttribute("src", chrome.extension.getURL('main.js'));
    const head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
    head.insertBefore(script, head.lastChild);

main.jsCela insérera dans la page Web en tant que script de module.

main.jsToute ma logique métier est maintenant dans

.

main.js（以及我将导入的所有脚本）必须位于中清单中的 web_accessible_resourcesPour que cette méthode fonctionne,

(et tous les scripts que j'importe)

doit être dans web_accessible_resources dans le manifeste dans . my-script.js Exemple d'utilisation :

main.js

    'use strict';
    
    const injectFunction = () => window.alert('hello world');
    
    export {injectFunction};

Dans

voici un exemple du script d'importation : 🎜

    'use strict';
    
    import {injectFunction} from './my-script.js';
    injectFunction();

🎜Ça marche ! Aucune erreur n’a été commise et j’étais heureux. :)🎜