การโต้ตอบกับข้อมูลหน้าเว็บ

Browser extensions can do more than just change how a web page looks. They can also interact with the data found on a web page!

This lesson explores how your extension can:

• Extract information like text or values from a page.
• Respond to user actions, such as clicks or typing.
• Send this collected information back to your extension's background script for processing.

Let's make your extension smart about web page data!

To interact with data, you first need to locate the specific parts of the web page where that data resides. Your content scripts have access to the page's Document Object Model (DOM), just like regular JavaScript.

You'll use common methods to select elements:

• document.getElementById("myId"): Finds an element by its unique ID.
• document.querySelector(".myClass"): Finds the first element matching a CSS selector.
• document.querySelectorAll("p.info"): Finds all elements matching a CSS selector, returning a NodeList.

Once you've selected an element, you can easily extract its content or attributes. Here are key properties and methods:

• element.innerText: Gets the visible text of an element and its children.
• element.value: For input fields (<input>, <textarea>), gets the current user-entered value.
• element.getAttribute("attrName"): Retrieves the value of a specific HTML attribute (e.g., href, src, data-id).

Try running this script to see how it grabs the page title.

Your extension can also react to user actions on the web page. This is crucial for creating interactive experiences.

You attach event listeners to elements using element.addEventListener(), just like in standard web development. Common events include:

• 'click': When an element is clicked.
• 'input': When the value of an input field changes.
• 'submit': When a form is submitted.

This script adds a temporary button and logs when it's clicked.

Often, data extracted or events detected by a content script need to be sent to your extension's main logic in the background service worker for further processing or storage.

You send messages using chrome.runtime.sendMessage(). This function allows your content script to pass a JSON-serializable object (your data) to the background script.

The message object can contain any data you need to transfer, like extracted text or the type of user action.

For the background service worker to receive messages, it must set up a listener. This is done using chrome.runtime.onMessage.addListener().

The listener function receives three arguments:

• message: The data object sent from the content script.
• sender: Information about the sender (e.g., the tab ID).
• sendResponse: A function to send a reply back to the content script.

Remember to return true from your listener if you plan to use sendResponse asynchronously.

Let's put it all together in a content script. This code adds a button to the page. When clicked, it extracts the page title and URL, then sends this information to the background script.

Run this code, then imagine your background script is waiting to receive this data!

This is the corresponding background service worker script. It sets up a listener for messages coming from any content script.

When it receives a message with the action: "extractAndSendPageData", it logs the extracted title and URL to its own console (which you can inspect in the browser's extension developer tools).

Consider an extension that needs to know the text of a specific <div> element on a page when a user clicks a button, and then store that text.

Which sequence correctly describes the flow of information and actions?

Great job! You've learned how to make your extension truly interactive with web page data:

• Finding Elements: Using DOM methods like getElementById and querySelector.
• Extracting Data: Getting text with innerText or values with value, and attributes with getAttribute.
• Handling Events: Responding to user actions like clicks using addEventListener.
• Messaging: Sending extracted data from content scripts to background scripts via chrome.runtime.sendMessage and receiving it with chrome.runtime.onMessage.addListener.

This powerful combination opens up many possibilities for your extensions!