Browser Extensions Development (Chrome & Edge) · 강의

웹 페이지 데이터와 상호 작용

웹 페이지에서 데이터를 추출하고 페이지의 사용자 이벤트에 응답하며 백그라운드 스크립트로 정보를 전송합니다.

웹 페이지 데이터와 상호 작용은(는) CoddyKit의 무료 Browser Extensions Development (Chrome & Edge) 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Browser Extensions Development (Chrome & Edge) 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Browser Extensions Development (Chrome & Edge) 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

Intro: Interact with Web Data

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!

Finding Elements on Page

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.

Extracting Data: Text & Attributes

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.

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.");
}

Responding to User Events

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.

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!");
});

Content to Background Messaging

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.

Background Message Listener

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.

Code: Interact & Send Data

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!

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.");
    }
  });
});

Code: Background Receives 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).

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." });
    }
  }
);

Quick Check: Data Flow

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?

Recap: Interacting with Data

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!

자주 묻는 질문

“웹 페이지 데이터와 상호 작용” 강의는 무료인가요?

네 — “웹 페이지 데이터와 상호 작용” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Browser Extensions Development (Chrome & Edge) 강의 전체를 잠금 해제할 수 있습니다. Browser Extensions Development (Chrome & Edge) 강의에는 총 4개의 강의가 포함되어 있습니다.

“웹 페이지 데이터와 상호 작용”에서 뭘 배우나요?

웹 페이지에서 데이터를 추출하고 페이지의 사용자 이벤트에 응답하며 백그라운드 스크립트로 정보를 전송합니다. 브라우저에서 직접 실행하는 실습 코드로 Browser Extensions Development (Chrome & Edge)을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Browser Extensions Development (Chrome & Edge)을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Browser Extensions Development (Chrome & Edge)은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“웹 페이지 데이터와 상호 작용” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Browser Extensions Development (Chrome & Edge) 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Browser Extensions Development (Chrome & Edge) 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Browser Extensions Development (Chrome & Edge)(으)로 돌아가기