크롬 확장프로그램 background.js에서 현재 열려있는 탭의 페이지의 DOM에 접근해서 특정 값을 popup.html로 전달하기
크롬 확장프로그램 background.js에서 현재 열려있는 탭의 페이지의 DOM에 접근해서 특정 값을 popup.html로 전달하기
크롬 확장 프로그램은 웹 브라우징 경험을 확장하고 향상시키는 데 매우 유용한 도구입니다. 이러한 확장 프로그램은 다양한 기능을 제공하며, 그 중 하나는 현재 열려 있는 탭의 페이지 DOM에 접근하여 데이터를 추출하고, 이를 popup.html로 전달하는 것입니다.
이 글에서는 background.js에서 현재 열려있는 탭의 페이지 DOM에 접근하고 특정 값을 추출하여 popup.html에 div로 추가하는 방법에 대해 알아보겠습니다.
크롬 확장 프로그램의 구조
크롬 확장 프로그램은 주로 다음과 같은 파일들로 구성됩니다:
- manifest.json: 확장 프로그램의 메타데이터와 권한을 정의하는 파일입니다.
- background.js: 백그라운드에서 지속적으로 실행되는 스크립트로, 이벤트를 처리하고 데이터를 관리합니다.
- content_scripts: 웹 페이지에 삽입되어 DOM에 접근하고 조작할 수 있는 스크립트입니다.
- popup.html: 확장 프로그램 아이콘을 클릭했을 때 표시되는 팝업 창입니다.
- 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로 추가하여 표시할 수 있습니다. 이러한 방법을 통해 사용자 경험을 향상시키고, 다양한 기능을 제공하는 확장 프로그램을 개발할 수 있습니다.
```