Bagaimanakah Saya Boleh Memuatkan Modul ES6 dalam Skrip Kandungan Sambungan Chrome Saya?

Memuatkan Modul ES6 dalam Skrip Kandungan untuk Sambungan Chrome

Latar Belakang:
Chrome 61 memperkenalkan sokongan untuk modul JavaScript. Walau bagaimanapun, memuatkan modul dalam skrip kandungan untuk sambungan Chrome boleh mencabar kerana had persekitaran skrip kandungan.

Isu:
Anda cuba menggunakan sintaks import/eksport dalam skrip kandungan, tetapi menemui sintaks ralat.

Penyelesaian:
Terdapat dua pendekatan untuk memuatkan modul dalam skrip kandungan:

Fungsi import() dinamik tak segerak untuk modul ES:

• Isytiharkan skrip untuk dimuatkan dalam sambungan manifes sebagai Sumber Boleh Akses Web.
• Gunakan fungsi import() dalam skrip kandungan untuk mengimport modul secara dinamik semasa masa jalan.

Contoh:

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

Penyelesaian "import" segerak untuk bukan modul biasa skrip:

• Tulis modul sebagai skrip bukan modul biasa.
• Tambahkan namanya pada tatasusunan "js" dalam bahagian "content_scripts" manifes, sebelum skrip kandungan utama.
• Akses pembolehubah dan fungsi modul secara terus dalam kandungan skrip.

Nota:
Pendekatan import dinamik tak segerak adalah lebih selamat dan lebih fleksibel, tetapi mungkin disekat oleh pekerja perkhidmatan tapak web. Penyelesaian "import" segerak kurang mantap tetapi mungkin lebih dipercayai.

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