크롬 확장프로그램 background.js에서 현재 열려있는 탭의 페이지의 DOM에 접근해서 특정 값 popup.html로 전달하는 자바스크립트
크롬 확장프로그램 background.js에서 현재 열려있는 탭의 페이지의 DOM에 접근해서 특정 값 popup.html로 전달하는 자바스크립트
크롬 확장프로그램을 개발하다 보면 background.js와 popup.html 간의 데이터 통신이 필요할 때가 많습니다. 이 글에서는 background.js에서 현재 열려있는 탭의 페이지의 DOM에 접근하여 특정 값을 가져온 뒤, popup.html에 div를 추가하여 전달하는 방법에 대해 설명하겠습니다. 이 과정은 크롬 확장프로그램의 기본 구조와 각 구성 요소 간의 상호작용을 이해하는 데 도움이 될 것입니다.
크롬 확장프로그램의 구조
크롬 확장프로그램은 크게 세 가지 주요 구성 요소로 나뉩니다:
- manifest.json: 확장프로그램의 메타 데이터를 정의합니다.
- background script (background.js): 백그라운드에서 실행되며, 브라우저의 이벤트를 처리합니다.
- popup script (popup.html 및 popup.js): 확장프로그램의 팝업 인터페이스를 구성합니다.
이 글에서는 위 세 가지 구성 요소를 활용하여 원하는 기능을 구현해 보겠습니다.
manifest.json 설정
먼저, manifest.json 파일을 설정하여 필요한 권한을 부여하고 스크립트를 정의해야 합니다.
{
"manifest_version": 3,
"name": "DOM Access Extension",
"version": "1.0",
"permissions": [
"activeTab",
"scripting"
],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
}이 설정 파일은 확장프로그램이 활성 탭에 접근할 수 있는 권한과 스크립트를 실행할 수 있는 권한을 부여합니다. 또한 background.js 파일을 서비스 워커로 정의하고, 기본 팝업을 popup.html로 설정합니다.
background.js 작성
background.js 파일에서는 현재 열려있는 탭의 DOM에 접근하여 특정 값을 가져오는 로직을 작성해야 합니다. 이 작업을 위해 크롬의 scripting API를 사용합니다.
chrome.action.onClicked.addListener((tab) => {
chrome.scripting.executeScript(
{
target: { tabId: tab.id },
function: getDOMInfo
},
(results) => {
if (results && results[0] && results[0].result) {
chrome.storage.local.set({ domInfo: results[0].result });
}
}
);
});
function getDOMInfo() {
// 예시: 페이지의 첫 번째 <h1> 태그의 텍스트 내용을 가져옵니다.
let info = document.querySelector('h1') ? document.querySelector('h1').innerText : 'No H1 Tag Found';
return info;
}이 코드에서는 사용자가 확장프로그램 아이콘을 클릭할 때 현재 활성화된 탭의 첫 번째 <h1> 태그의 텍스트 내용을 가져와 chrome.storage.local에 저장합니다.
popup.html과 popup.js 작성
popup.html 파일에서는 popup.js를 로드하고, 데이터를 표시할 div 요소를 추가합니다.
<!DOCTYPE html>
<html>
<head>
<title>Popup</title>
<script src="popup.js"></script>
</head>
<body>
<div id="content"></div>
</body>
</html>popup.js 파일에서는 chrome.storage.local에 저장된 데이터를 가져와 <div id="content"> 요소에 추가합니다.
document.addEventListener('DOMContentLoaded', () => {
chrome.storage.local.get(['domInfo'], (result) => {
if (result.domInfo) {
let contentDiv = document.getElementById('content');
let newDiv = document.createElement('div');
newDiv.textContent = result.domInfo;
contentDiv.appendChild(newDiv);
}
});
});이 코드에서는 DOMContentLoaded 이벤트가 발생하면 chrome.storage.local에서 저장된 domInfo 값을 가져와 새로운 div 요소를 생성하고, 해당 div 요소를 contentDiv에 추가합니다.
결론
이 글에서는 크롬 확장프로그램에서 background.js를 통해 현재 열려있는 탭의 DOM에 접근하여 특정 값을 가져온 뒤, popup.html에 div를 추가하여 전달하는 방법을 설명했습니다. 이를 통해 크롬 확장프로그램의 기본적인 구조와 구성 요소 간의 상호작용을 이해할 수 있었을 것입니다. 이제 이 방법을 바탕으로 다양한 확장프로그램 기능을 구현해 보세요.