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 Chrome63. J'essaie d'utiliser la syntaxe d'importation/exportation dans un script de contenu d'extension Chrome pour utiliser des modules. Dans manifest.json : "content_scripts":[{"js":["content.js"],}] Dans my-script.js (avec contenu

P粉739079318 · Answer

Utilisez la fonction dynamic `import()< /code>.`


Contrairement à la solution de contournement dangereuse utilisant l'élément

P粉797004644 · Answer

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. :)🎜

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

répondre à tous(2)je répondrai

Utilisez la fonction dynamic import()< /code>.

Utilisez la fonction dynamic `import()< /code>.`