Bagaimanakah Saya Boleh Mengimport Modul ES6 ke dalam Skrip Kandungan Sambungan Chrome?

Mengimport Modul ES6 dalam Skrip Kandungan Sambungan Chrome

Masalah:

Dalam Chrome 63, mengimport modul ES6 menggunakan import/ sintaks eksport dalam skrip kandungan menghasilkan SyntaxErrors.

Punca:

Tidak seperti skrip HTML, skrip kandungan tidak menyokong pemuatan modul secara asli.

Penyelesaian: Import dinamik tak segerak( ) fungsi

Untuk menyelesaikan isu ini, gunakan perkara berikut penyelesaian:

1. Dalam manifest.json, isytiharkan skrip modul anda sebagai sumber boleh diakses web.
2. Dalam content_script.js, gunakan fungsi import() untuk memuatkan modul anda secara tidak segerak.
3. Tunggu import dan jalankan fungsi utama anda modul.

Contoh:

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

Segerak Penyelesaian Import

Sebagai alternatif, anda boleh menggunakan penyelesaian import segerak untuk skrip bukan modul:

1. Tambahkan skrip pada tatasusunan "js" dalam manifes. json.
2. Rujuk pembolehubah dan fungsi global skrip secara terus dalam anda skrip kandungan utama.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengimport Modul ES6 ke dalam Skrip Kandungan Sambungan Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!