Corak Pemesejan Sehala
Laksanakan komunikasi sehala yang mudah daripada skrip kandungan kepada pekerja perkhidmatan latar belakang dan sebaliknya.
Corak Pemesejan Sehala ialah pelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) percuma di CoddyKit. Ini ialah pelajaran 1 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.
Pengenalan Pemesejan Sehala
Selamat datang! Dalam pelajaran ini, kita akan meneroka komunikasi sehala dalam sambungan penyemak imbas. Inilah cara bahagian yang berbeza dalam sambungan anda berkomunikasi antara satu sama lain, seperti skrip kandungan menghantar data kepada pekerja perkhidmatan latar atau sebaliknya.
Bayangkan ia seperti menghantar mesej tanpa mengharapkan balasan serta-merta.
Persekitaran Sambungan Terasing
Sambungan penyemak imbas direka bentuk dengan mengambil kira keselamatan. Ini bermakna komponen yang berbeza dalam sambungan anda, seperti skrip kandungan dan pekerja perkhidmatan latar, berjalan dalam persekitaran JavaScript terasing masing-masing.
- Skrip Kandungan: Berjalan secara langsung pada halaman web.
- Pekerja Perkhidmatan Latar: Berjalan di latar belakang untuk mengendalikan peristiwa dan logik berterusan.
Komponen ini tidak boleh mengakses pemboleh ubah atau fungsi satu sama lain secara langsung. Pemesejan menjadi penghubungnya!
CS kepada BG: Menghantar Mesej
Untuk menghantar mesej sehala daripada skrip kandungan kepada pekerja perkhidmatan latar, anda menggunakan kaedah chrome.runtime.sendMessage().
Anda menghantar objek (mesej anda) sebagai argumen pertama. Objek ini boleh mengandungi apa-apa data yang ingin anda hantar.
Contoh Penghantar Skrip Kandungan
Berikut ialah skrip kandungan ringkas yang menghantar mesej kepada pekerja perkhidmatan latar apabila halaman diklik. Bayangkan anda sedang menjejak interaksi pengguna!
/* content.js */
document.addEventListener('click', () => {
chrome.runtime.sendMessage({
action: "userClicked",
data: "The document was clicked!"
});
console.log("Message sent from content script.");
});BG kepada CS: Menerima Mesej
Dalam pekerja perkhidmatan latar anda, pendengar perlu disediakan untuk menerima mesej daripada skrip kandungan atau bahagian lain dalam sambungan anda. Anda menggunakan chrome.runtime.onMessage.addListener() untuk tujuan ini.
Fungsi pendengar menerima message itu sendiri, maklumat sender dan fungsi sendResponse (yang tidak akan kita gunakan untuk pemesejan sehala).
Contoh Pendengar Latar
Skrip latar ini mendengar mesej. Apabila menerima mesej dengan action: "userClicked", skrip ini merekodkan data tersebut.
/* background.js */
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.action === "userClicked") {
console.log("Received from content script:", message.data);
// No sendResponse() for one-way communication
}
});BG kepada CS: Menghantar Mesej
Sekarang, mari lihat cara menghantar mesej daripada pekerja perkhidmatan latar kepada skrip kandungan. Caranya sedikit berbeza kerana anda perlu menentukan tab yang akan menerima mesej tersebut.
Anda menggunakan chrome.tabs.sendMessage(tabId, message), dengan tabId mengenal pasti tab sasaran.
Contoh Penghantar Latar
Contoh ini menunjukkan skrip latar menghantar mesej kepada skrip kandungan tab aktif apabila ikon sambungan diklik. Mesej tersebut memberitahu skrip kandungan supaya mengubah latar belakang halaman.
/* background.js (continued) */
chrome.action.onClicked.addListener((tab) => {
// Send a message to the content script in the clicked tab
chrome.tabs.sendMessage(tab.id, {
action: "changeBackground",
color: "#E0FFFF" // Light Cyan
});
console.log("Message sent to content script in tab:", tab.id);
});CS kepada BG: Menerima Mesej
Sama seperti skrip latar, skrip kandungan juga menggunakan chrome.runtime.onMessage.addListener() untuk mendengar mesej masuk.
Apabila skrip latar menghantar mesej menggunakan chrome.tabs.sendMessage() kepada tab tertentu, hanya skrip kandungan yang disuntik ke dalam tab tersebut akan menerimanya.
Contoh Penerima Skrip Kandungan
Coretan skrip kandungan ini mendengar tindakan "changeBackground" dan mengemas kini warna latar belakang badan halaman. Hal ini membolehkan skrip latar anda mengawal aspek halaman web.
/* content.js (continued) */
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.action === "changeBackground") {
document.body.style.backgroundColor = message.color;
console.log("Page background changed to:", message.color);
}
});Uji Pemahaman Anda
Antara komponen atau kaedah berikut, yang manakah merupakan komponen atau kaedah utama yang digunakan untuk penghantaran mesej sehala antara skrip kandungan dengan pekerja perkhidmatan latar?
Ulang Kaji: Pemesejan Sehala
Tahniah! Anda telah mempelajari asas pemesejan sehala dalam sambungan penyemak imbas.
- Persekitaran Terasing: Komponen sambungan beroperasi secara berasingan.
chrome.runtime.sendMessage(): Digunakan untuk menghantar mesej daripada skrip kandungan kepada latar atau bahagian lain.chrome.tabs.sendMessage(): Digunakan oleh skrip latar untuk menghantar mesej kepada skrip kandungan tertentu.chrome.runtime.onMessage.addListener(): Digunakan oleh skrip kandungan dan skrip latar untuk mendengar mesej masuk.
Ini ialah kemahiran penting untuk membina sambungan yang interaktif dan kukuh!
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 “Corak Pemesejan Sehala” percuma?
Ya — teks penuh “Corak Pemesejan Sehala” 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 “Corak Pemesejan Sehala”?
Laksanakan komunikasi sehala yang mudah daripada skrip kandungan kepada pekerja perkhidmatan latar belakang dan sebaliknya. 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 1 daripada 4.
Berapa lamakah pelajaran “Corak Pemesejan Sehala” 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
- Corak Pemesejan Sehala
- Pemesejan Dua Hala antara Komponen
- Menggunakan API Storan Chrome
- Storan Segerak berbanding Setempat dan Kuota