Anatomi Projek Sambungan
Kenali fail dan folder standard yang membentuk sambungan pelayar Manifest V3 serta fungsi setiap satunya.
Anatomi Projek Sambungan ialah pelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pembangunan Sambungan Pelayar (Chrome & Edge), dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pembangunan Sambungan Pelayar (Chrome & Edge) merangkumi sejumlah 4 pelajaran.
Sambungan Hanyalah Fail Web
Sambungan hanyalah himpunan HTML, CSS, JavaScript dan fail konfigurasi yang dimuatkan oleh pelayar dalam konteks khas dengan keupayaan tambahan.
Nadi manifest.json
Setiap sambungan memerlukan manifest.json pada akar projeknya — fail ini mengisytiharkan nama, versi, keizinan dan skrip. Tanpanya, pelayar akan mengabaikan folder tersebut.
{
"manifest_version": 3,
"name": "My Extension",
"version": "1.0.0"
}Struktur Folder Biasa
Susun atur adalah fleksibel, tetapi struktur folder yang kemas kekal mudah diselenggara: manifes pada akar projek, serta folder timbul, latar belakang, kandungan dan ikon.
Pekerja Perkhidmatan Latar Belakang
Dalam Manifest V3, logik latar belakang berjalan sebagai pekerja perkhidmatan. Ia mengendalikan peristiwa walaupun tiada UI dibuka, tetapi dinyahmuat apabila tidak aktif untuk menjimatkan memori.
{
"background": {
"service_worker": "background.js"
}
}Tindakan Tetingkap Timbul
action mentakrifkan butang bar alat dan tetingkap timbul yang dibukanya — yang sebenarnya hanyalah halaman HTML kecil. Konfigurasi di bawah menunjukkan kedua-dua medan tersebut.
{
"action": {
"default_popup": "popup/popup.html",
"default_title": "Open My Extension"
}
}Skrip Kandungan
Skrip kandungan berjalan di dalam halaman web supaya sambungan Anda boleh membaca dan mengubah DOM. Anda mengehadkan skopnya dengan corak padanan URL.
{
"content_scripts": [{
"matches": ["https://*.example.com/*"],
"js": ["content/main.js"]
}]
}Ikon dalam Pelbagai Saiz
Sediakan ikon Anda dalam beberapa saiz — pelayar memaparkannya di tempat yang berbeza pada resolusi yang berbeza, supaya ikon kekal tajam di mana-mana.
{
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
}Mengisytiharkan Keizinan
Susunan keizinan menyenaraikan API pelayar yang Anda perlukan, seperti storan atau tab. Minta hanya perkara yang benar-benar Anda gunakan.
{
"permissions": ["storage", "activeTab"]
}Sumber yang Boleh Diakses Web
Jika halaman web perlu memuatkan fail yang dibungkus dalam sambungan Anda, senaraikannya di bawah web_accessible_resources — jika tidak, pelayar akan menyekat akses tersebut.
{
"web_accessible_resources": [{
"resources": ["images/logo.png"],
"matches": ["https://*.example.com/*"]
}]
}Cara Komponen Berkomunikasi
Tetingkap timbul, skrip kandungan dan pekerja perkhidmatan hidup dalam konteks yang berasingan, jadi kesemuanya berkomunikasi melalui API pemesejan, bukannya pemboleh ubah yang dikongsi.
chrome.runtime.sendMessage({ type: 'PING' })Memastikan Susunan Teratur
Apabila projek berkembang, kumpulkan fail berkaitan ke dalam folder dan pastikan manifest.json ringkas. Susun atur yang mudah dijangka memudahkan penyahpepijatan dan semakan gedung.
Semakan Pantas
Semak perkara yang Anda ingat tentang struktur sambungan.
Imbas Kembali
Anda telah meninjau blok binaan: manifest.json mengisytiharkan semuanya, pekerja perkhidmatan menjalankan tugas latar belakang, tindakan mengawal tetingkap timbul dan skrip kandungan berinteraksi dengan halaman.
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 12
- Pelajaran
- 48
Soalan Lazim
Adakah pelajaran “Anatomi Projek Sambungan” percuma?
Ya — teks penuh “Anatomi Projek Sambungan” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Pembangunan Sambungan Pelayar (Chrome & Edge), tingkat taraf kepada CoddyKit PRO. Kursus Pembangunan Sambungan Pelayar (Chrome & Edge) merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Anatomi Projek Sambungan”?
Kenali fail dan folder standard yang membentuk sambungan pelayar Manifest V3 serta fungsi setiap satunya. Anda berlatih Pembangunan Sambungan Pelayar (Chrome & Edge) menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Pembangunan Sambungan Pelayar (Chrome & Edge)?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “Anatomi Projek Sambungan” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) ini?
Ya. Setiap pelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Apakah Sambungan Pelayar?
- Menyediakan Persekitaran Pembangunan
- Sambungan 'Hello World' Pertama Anda
- Anatomi Projek Sambungan