Boleh ditulis semula sebagai: Adakah mungkin untuk menggunakan modul npm dalam sambungan Chrome?

Question

Saya mencubanya, tetapi mendapat ralat "requireisnotdefined". Saya tidak dapat mencari maklumat tentang ralat ini, bolehkah seseorang menerangkannya kepada saya?

P粉006977956 · Answer

Jawapan dikemas kini untuk 2022

Jawapan ringkas: Ya, anda boleh memerlukan/mengimport pakej. Daripada bersusah payah menyediakan dan mengkonfigurasi alat pembungkusan seperti Webpack sendiri (terutamanya jika anda belum menggunakannya), kini terdapat alat binaan yang boleh anda gunakan untuk membuat kod boilerplate untuk sambungan Chrome:

Sambungan CLI - Alat ini didokumenkan dengan baik dan anda juga boleh merujuk kepada kod sumber beberapa sambungan Chrome yang menggunakan alat ini (baca: ketahui cara orang lain menyediakannya).
CLI Sambungan Chrome

Kebaikan menggunakannya:

Projek baharu akan memulakan struktur fail projek lalai, yang sangat membantu.
Mereka menyokong JavaScript moden (ES6, ES2021) jadi modul akan berfungsi dengan betul.
Mereka mempunyai alat pembungkusan yang disepadukan dan diprakonfigurasikan (saya rasa ia adalah Webpack dalam kedua-dua kes di atas). Oleh itu, anda tidak perlu memasang dan mengkonfigurasi sebarang alatan sendiri.
Anda boleh menggunakan npm seperti biasa untuk memasang sebarang pakej/pergantungan yang anda perlukan.

Kemudian, sudah tentu, biarkan Dokumentasi rasmi untuk sambungan Chrome membimbing anda melalui yang lain.

P粉803444331 · Answer

Boleh, tapi kena berhati-hati. Percubaan untuk menggunakan require() untuk memuatkan pakej bermakna Node akan cuba mencari failnya dalam sistem fail anda. Sambungan Chrome hanya boleh mengakses fail yang anda isytiharkan dalam manifes anda, bukan sistem fail anda.

Untuk menyelesaikan masalah ini, gunakan alat penggabungan modul seperti Webpack, yang akan menjana satu fail JavaScript yang mengandungi kod untuk semua pakej yang diperkenalkan melalui require(). Anda perlu menjana modul berasingan untuk setiap sambungan Chrome anda (cth. halaman latar belakang, skrip kandungan, pop timbul) dan mengisytiharkan setiap modul yang dijana dalam manifes.

Untuk mengelak daripada cuba menyediakan sistem binaan agar require() tersedia, saya syorkan bermula dengan projek boilerplate. Anda boleh menyemak sambungan saya untuk melihat cara saya melakukannya.