크롬 확장프로그램 background.js에서 현재 열려있는 탭의 페이지의 DOM에 접근해서 특정 값을 popup.html로 전달하기

크롬 확장프로그램 background.js에서 현재 열려있는 탭의 페이지의 DOM에 접근해서 특정 값을 popup.html로 전달하기

크롬 확장 프로그램은 웹 브라우징 경험을 확장하고 향상시키는 데 매우 유용한 도구입니다. 이러한 확장 프로그램은 다양한 기능을 제공하며, 그 중 하나는 현재 열려 있는 탭의 페이지 DOM에 접근하여 데이터를 추출하고, 이를 popup.html로 전달하는 것입니다.

이 글에서는 background.js에서 현재 열려있는 탭의 페이지 DOM에 접근하고 특정 값을 추출하여 popup.html에 div로 추가하는 방법에 대해 알아보겠습니다.

크롬 확장 프로그램의 구조

크롬 확장 프로그램은 주로 다음과 같은 파일들로 구성됩니다:

1. manifest.json: 확장 프로그램의 메타데이터와 권한을 정의하는 파일입니다.
2. background.js: 백그라운드에서 지속적으로 실행되는 스크립트로, 이벤트를 처리하고 데이터를 관리합니다.
3. content_scripts: 웹 페이지에 삽입되어 DOM에 접근하고 조작할 수 있는 스크립트입니다.
4. popup.html: 확장 프로그램 아이콘을 클릭했을 때 표시되는 팝업 창입니다.
5. popup.js: popup.html과 상호작용하는 스크립트입니다.

1. manifest.json 설정

먼저, manifest.json 파일을 설정하여 필요한 권한과 파일들을 정의합니다.

{
  "manifest_version": 2,
  "name": "DOM Access Example",
  "version": "1.0",
  "permissions": [
    "activeTab"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

2. background.js에서 현재 탭의 페이지 DOM에 접근하기

background.js는 크롬 API를 사용하여 현재 활성화된 탭의 정보를 얻고 content script를 실행하여 DOM에 접근합니다.

// background.js
chrome.browserAction.onClicked.addListener((tab) => {
  chrome.tabs.executeScript(tab.id, {
    file: 'content.js'
  });
});

3. content.js에서 DOM 데이터 추출하기

content.js는 실제로 웹 페이지에 삽입되어 DOM을 조작하는 스크립트입니다. 이 스크립트에서 특정 데이터를 추출하여 background.js에 전달합니다.

// content.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "getDOM") {
    let data = document.querySelector("body").innerText; // 예시로 body의 텍스트를 가져옴
    sendResponse({data: data});
  }
});

4. background.js에서 데이터를 popup.html로 전달하기

background.js에서 content script로부터 데이터를 받아 popup.html로 전달합니다.

// background.js (추가된 부분)
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "sendDataToPopup") {
    chrome.runtime.sendMessage({action: "updatePopup", data: request.data});
  }
});

5. popup.js에서 데이터 받기 및 div 추가하기

popup.js에서 background.js로부터 데이터를 받아서 div를 추가합니다.

// popup.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "updatePopup") {
    let div = document.createElement("div");
    div.textContent = request.data;
    document.body.appendChild(div);
  }
});

결론

이렇게 해서 크롬 확장 프로그램을 통해 현재 열려있는 탭의 페이지 DOM에 접근하여 특정 값을 추출하고, 이를 popup.html에 div로 추가하여 표시할 수 있습니다. 이러한 방법을 통해 사용자 경험을 향상시키고, 다양한 기능을 제공하는 확장 프로그램을 개발할 수 있습니다.

```