Pembangunan Sambungan Pelayar (Chrome & Edge) · Pelajaran

Berinteraksi dengan Data Halaman Web

Ekstrak data daripada halaman web, beri respons kepada acara pengguna pada halaman dan hantar maklumat kembali kepada skrip latar belakang anda.

Pelajaran 3 daripada 410 langkah

Berinteraksi dengan Data Halaman Web ialah pelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) percuma di CoddyKit. Ini ialah pelajaran 3 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: Berinteraksi dengan Data Web

Sambungan penyemak imbas boleh melakukan lebih daripada sekadar mengubah rupa halaman web. Sambungan juga boleh berinteraksi dengan data yang terdapat pada halaman web!

Pelajaran ini meneroka cara sambungan anda boleh:

Mengekstrak maklumat seperti teks atau nilai daripada halaman.
Memberi respons kepada tindakan pengguna, seperti klik atau penaipan.
Menghantar maklumat yang dikumpulkan kembali kepada skrip latar sambungan anda untuk diproses.

Mari jadikan sambungan anda lebih pintar dalam mengendalikan data halaman web!

Mencari Elemen pada Halaman

Untuk berinteraksi dengan data, anda perlu mencari dahulu bahagian khusus halaman web yang mengandungi data tersebut. Skrip kandungan anda mempunyai akses kepada Document Object Model (DOM) halaman, sama seperti JavaScript biasa.

Anda akan menggunakan kaedah umum untuk memilih elemen:

document.getElementById("myId"): Mencari elemen berdasarkan ID uniknya.
document.querySelector(".myClass"): Mencari elemen pertama yang sepadan dengan pemilih CSS.
document.querySelectorAll("p.info"): Mencari semua elemen yang sepadan dengan pemilih CSS dan mengembalikan NodeList.

Mengekstrak Data: Teks dan Atribut

Selepas memilih elemen, anda boleh mengekstrak kandungan atau atributnya dengan mudah. Berikut ialah sifat dan kaedah utama:

element.innerText: Mendapatkan teks elemen dan anak-anaknya yang kelihatan.
element.value: Untuk medan input (<input>, <textarea>), mendapatkan nilai semasa yang dimasukkan oleh pengguna.
element.getAttribute("attrName"): Mendapatkan nilai atribut HTML tertentu, contohnya href, src dan data-id.

Cuba jalankan skrip ini untuk melihat cara skrip mendapatkan tajuk halaman.

console.log("Content script for data extraction loaded!");

// Get the page title
const pageTitle = document.title;
console.log("Page Title:", pageTitle);

// Try to get value from a hypothetical input field
// (This won't work without an actual input, but demonstrates the concept)
const searchInput = document.querySelector('input[type="search"]');
if (searchInput) {
  console.log("Search Input Value:", searchInput.value);
} else {
  console.log("No search input found to extract value from.");
}

Memberi Respons kepada Peristiwa Pengguna

Sambungan anda juga boleh bertindak balas terhadap tindakan pengguna pada halaman web. Ini penting untuk mencipta pengalaman interaktif.

Anda melampirkan pendengar peristiwa pada elemen menggunakan element.addEventListener(), sama seperti dalam pembangunan web standard. Peristiwa biasa termasuk:

'click': Apabila elemen diklik.
'input': Apabila nilai medan input berubah.
'submit': Apabila borang dihantar.

Skrip ini menambah butang sementara dan merekodkan apabila butang itu diklik.

console.log("Content script for event handling loaded!");

// Create a temporary button for demonstration
const tempButton = document.createElement('button');
tempButton.textContent = 'Click Me!';
tempButton.style.position = 'fixed';
tempButton.style.bottom = '50px';
tempButton.style.left = '10px';
tempButton.style.zIndex = '9999';
document.body.appendChild(tempButton);

// Add a click listener to the button
tempButton.addEventListener('click', () => {
  console.log("Temporary button clicked!");
  alert("You clicked the temporary button!");
});

Pemesejan daripada Kandungan kepada Latar

Selalunya, data yang diekstrak atau peristiwa yang dikesan oleh skrip kandungan perlu dihantar kepada logik utama sambungan anda dalam pekerja perkhidmatan latar untuk pemprosesan atau penyimpanan selanjutnya.

Anda menghantar mesej menggunakan chrome.runtime.sendMessage(). Fungsi ini membolehkan skrip kandungan anda menghantar objek yang boleh disiri sebagai JSON (data anda) kepada skrip latar.

Objek mesej boleh mengandungi apa-apa data yang perlu dipindahkan, seperti teks yang diekstrak atau jenis tindakan pengguna.

Pendengar Mesej Latar

Supaya pekerja perkhidmatan latar dapat menerima mesej, pendengar perlu disediakan. Hal ini dilakukan menggunakan chrome.runtime.onMessage.addListener().

Fungsi pendengar menerima tiga argumen:

message: Objek data yang dihantar daripada skrip kandungan.
sender: Maklumat tentang penghantar, contohnya ID tab.
sendResponse: Fungsi untuk menghantar balasan kembali kepada skrip kandungan.

Ingat untuk mengembalikan true daripada pendengar jika anda merancang untuk menggunakan sendResponse secara tak segerak.

Kod: Berinteraksi dan Menghantar Data

Mari gabungkan semuanya dalam skrip kandungan. Kod ini menambah butang pada halaman. Apabila butang diklik, kod ini mengekstrak tajuk dan URL halaman, kemudian menghantar maklumat tersebut kepada skrip latar.

Jalankan kod ini, kemudian bayangkan skrip latar anda sedang menunggu untuk menerima data ini!

console.log("Content script for interaction and sending loaded!");

// Create a button to trigger data extraction and sending
const sendDataButton = document.createElement('button');
sendDataButton.textContent = 'Send Page Data';
sendDataButton.style.position = 'fixed';
sendDataButton.style.bottom = '10px';
sendDataButton.style.right = '10px';
sendDataButton.style.zIndex = '10000';
sendDataButton.style.padding = '10px';
sendDataButton.style.backgroundColor = '#007bff';
sendDataButton.style.color = 'white';
sendDataButton.style.border = 'none';
sendDataButton.style.borderRadius = '5px';
sendDataButton.style.cursor = 'pointer';
document.body.appendChild(sendDataButton);

// Add event listener to the button
sendDataButton.addEventListener('click', () => {
  const pageTitle = document.title;
  const pageUrl = window.location.href;

  console.log("Button clicked! Preparing to send page data...");

  // Send message to background script
  chrome.runtime.sendMessage({
    action: "extractAndSendPageData",
    payload: {
      title: pageTitle,
      url: pageUrl
    }
  }, (response) => {
    if (response && response.status === "success") {
      console.log("Background confirmed data received.");
      alert("Page data sent to background!");
    } else {
      console.error("Error or no response from background:", response);
      alert("Failed to send data to background or no response.");
    }
  });
});

Kod: Latar Menerima Data

Ini ialah skrip pekerja perkhidmatan latar yang sepadan. Skrip ini menyediakan pendengar untuk mesej yang datang daripada mana-mana skrip kandungan.

Apabila menerima mesej dengan action: "extractAndSendPageData", skrip ini merekodkan tajuk dan URL yang diekstrak ke konsolnya sendiri, yang boleh anda periksa dalam alat pembangun sambungan penyemak imbas.

console.log("Background service worker initialized!");

chrome.runtime.onMessage.addListener(
  function(message, sender, sendResponse) {
    console.log("Received message from content script:", message);
    console.log("From tab:", sender.tab ? sender.tab.url : "unknown");

    if (message.action === "extractAndSendPageData") {
      console.log("Action identified: Page Data Extraction");
      console.log("Extracted Title:", message.payload.title);
      console.log("Extracted URL:", message.payload.url);

      // In a real extension, you might save this data to storage
      // or perform other background operations.

      // Send a success response back to the content script
      sendResponse({ status: "success", message: "Data received by background." });
      return true; // Indicates that sendResponse will be called asynchronously
    } else {
      console.log("Unknown message action:", message.action);
      sendResponse({ status: "error", message: "Unknown action type." });
    }
  }
);

Semakan Ringkas: Aliran Data

Bayangkan sebuah sambungan perlu mengetahui teks elemen <div> tertentu pada halaman apabila pengguna mengklik butang, kemudian menyimpan teks tersebut.

Urutan manakah yang menerangkan aliran maklumat dan tindakan dengan betul?

Jawab dalam pelajaran interaktif

Ulang Kaji: Berinteraksi dengan Data

Tahniah! Anda telah mempelajari cara menjadikan sambungan anda benar-benar interaktif dengan data halaman web:

Mencari Elemen: Menggunakan kaedah DOM seperti getElementById dan querySelector.
Mengekstrak Data: Mendapatkan teks dengan innerText atau nilai dengan value, serta atribut dengan getAttribute.
Mengendalikan Peristiwa: Memberi respons kepada tindakan pengguna seperti klik menggunakan addEventListener.
Pemesejan: Menghantar data yang diekstrak daripada skrip kandungan kepada skrip latar melalui chrome.runtime.sendMessage dan menerimanya dengan chrome.runtime.onMessage.addListener.

Gabungan hebat ini membuka banyak kemungkinan untuk sambungan anda!

Percuma untuk bermula

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

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Berinteraksi dengan Data Halaman Web” percuma?

Ya — teks penuh “Berinteraksi dengan Data Halaman Web” 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 “Berinteraksi dengan Data Halaman Web”?

Ekstrak data daripada halaman web, beri respons kepada acara pengguna pada halaman dan hantar maklumat kembali kepada skrip latar belakang anda. 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 3 daripada 4.

Berapa lamakah pelajaran “Berinteraksi dengan Data Halaman Web” 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

← Kembali ke Pembangunan Sambungan Pelayar (Chrome & Edge)