Sambungan Chrome: Import modul ES6 dalam skrip kandungan

Question

Dalam Chrome 61, sokongan untuk modul JavaScript telah ditambahkan. Sekarang saya menjalankan Chrome63. Saya cuba menggunakan sintaks import/eksport dalam skrip kandungan sambungan Chrome untuk menggunakan modul. Dalam manifest.json: "content_scripts":[{"js":["content.js"],}] Dalam my-script.js (dengan kandungan

P粉739079318 · Answer

Gunakan fungsi dinamik `import()< /code>.`


Tidak seperti penyelesaian yang tidak selamat menggunakan elemen

P粉797004644 · Answer

Penafian

Pertama sekali, adalah penting untuk ambil perhatian bahawa mulai Januari 2018, skrip kandungan tidak menyokong modul. Penyelesaian ini memintas sekatan pada sambungan anda dengan membenamkan teg modul script ke dalam halaman yang dikembalikan.

Ini adalah penyelesaian yang tidak selamat!

Skrip web (atau sambungan lain) boleh mengeksploitasi kod anda dan mengekstrak/menipu data dengan menggunakan setters/getters, proksi pada Object.prototype dan prototaip lain Object.prototype 和其他原型上使用 setter/getter、代理来利用您的代码并提取/欺骗数据函数和/或全局对象，因为 scriptfungsi dan/atau objek global, Kerana kod dalam elemen

berjalan dalam konteks JS halaman, bukan dalam persekitaran JS terpencil selamat yang menjalankan skrip kandungan secara lalai.

Penyelesaian yang selamat ialah dinamik import() ditunjukkan dalam jawapan lain

di sini.

Penyelesaian

Ini milik sayamanifest.json

:

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

web_accessible_resourcesSila ambil perhatian bahawa saya mempunyai dua skrip dalam

.

Ini milik sayacontent.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.jsIni akan memasukkan

ke dalam halaman web sebagai skrip modul.

main.jsSemua logik perniagaan saya kini masuk

.

main.js（以及我将导入的所有脚本）必须位于中清单中的 web_accessible_resourcesUntuk kaedah ini berfungsi,

(dan semua skrip yang saya import)

mesti ada dalam web_accessible_resources dalam manifes dalam `. my-script.js``Contoh penggunaan:`

main.js

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


Dalam 
 ini ialah contoh skrip import: 🎜
    'use strict';
    
    import {injectFunction} from './my-script.js';
    injectFunction();

🎜Ini berkesan! Tiada kesilapan yang dilemparkan dan saya gembira. :)🎜

Sambungan Chrome: Import modul ES6 dalam skrip kandungan

membalas semua(2)saya akan balas

Gunakan fungsi dinamik import()< /code>.

Gunakan fungsi dinamik `import()< /code>.`