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

크롬 확장프로그램은 브라우저의 기능을 확장하고 사용자의 경험을 향상시키는 강력한 도구입니다. 이 글에서는 크롬 확장프로그램에서 background.js 파일을 사용해 현재 열려있는 탭의 페이지 DOM에 접근하고, 특정 값을 popup.html에 있는 div 요소에 추가하여 전달하는 방법을 설명하겠습니다. 이를 통해 크롬 확장프로그램을 보다 유용하게 활용할 수 있게 될 것입니다.

현재 열려있는 탭의 페이지의 DOM에 접근해 특정 값을 popup.html로 전달하기 준비 단계

크롬 확장프로그램을 개발하기 위해 필요한 기본적인 파일들은 다음과 같습니다:

manifest.json
background.js
popup.html
popup.js

이 글에서는 각각의 파일이 어떻게 구성되고, 서로 어떻게 상호작용하는지 자세히 설명하겠습니다.

크롬 확장프로그램 manifest.json 설정

먼저, manifest.json 파일을 설정해야 합니다. 이 파일은 확장프로그램의 메타데이터와 필요한 권한을 정의합니다.

{
  "manifest_version": 3,
  "name": "DOM Access Example",
  "version": "1.0",
  "description": "Access and modify DOM of the current tab and send data to popup.html",
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  }
}

크롬 확장프로그램 background.js 설정

background.js 파일은 백그라운드에서 실행되며, 현재 열려있는 탭의 DOM에 접근하는 역할을 합니다. 여기서는 chrome.scripting.executeScript API를 사용해 스크립트를 주입하여 DOM을 조작합니다.

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: getDomContent
  }, (results) => {
    if (results && results[0] && results[0].result) {
      chrome.storage.local.set({ domContent: results[0].result });
    }
  });
});

function getDomContent() {
  // DOM에서 특정 값을 추출하는 함수 예시
  const specificValue = document.querySelector('h1').innerText;
  return specificValue;
}

크롬 확장프로그램 popup.html 설정

popup.html 파일은 확장프로그램의 팝업 인터페이스를 정의합니다. 여기에서는 단순한 div 요소를 포함하여, 나중에 background.js에서 가져온 값을 이 div에 표시합니다.

<!DOCTYPE html>
<html>
<head>
  <title>Popup</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 10px;
    }
    #content {
      margin-top: 10px;
      padding: 10px;
      border: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <h2>Popup Content</h2>
  <div id="content">Loading...</div>
  <script src="popup.js"></script>
</body>
</html>

크롬 확장프로그램 popup.js 설정

popup.js 파일은 popup.html 파일의 스크립트를 제어합니다. 여기서는 chrome.storage.local을 사용해 background.js에서 저장한 값을 가져와 div 요소에 표시합니다.

document.addEventListener('DOMContentLoaded', () => {
  chrome.storage.local.get('domContent', (data) => {
    if (data.domContent) {
      document.getElementById('content').innerText = data.domContent;
    } else {
      document.getElementById('content').innerText = 'No content found.';
    }
  });
});

작동 원리

사용자가 확장프로그램 아이콘을 클릭하면, background.js에서 chrome.action.onClicked.addListener가 트리거됩니다.
현재 탭의 페이지에 getDomContent 함수가 주입되어, 페이지의 DOM에서 특정 값을 추출합니다.
추출한 값은 chrome.storage.local에 저장됩니다.
popup.html이 로드되면, popup.js가 chrome.storage.local에서 저장된 값을 가져와 div 요소에 표시합니다.

결론

이 글에서는 크롬 확장프로그램에서 background.js를 사용해 현재 열려있는 탭의 페이지 DOM에 접근하고, 특정 값을 popup.html에 전달하는 방법을 설명했습니다. 이를 통해 크롬 확장프로그램 개발에 대한 이해도를 높이고, 실제로 유용한 확장프로그램을 만드는 데 도움이 되기를 바랍니다.

저작자표시 비영리 변경금지

'Dev > script' 카테고리의 다른 글

애드센스 광고 무효클릭 방지 코드 (0)	2024.07.21
자바스크립트 기초대사량 계산기 - 해리스-베네딕트 기초대사량 계산법 (0)	2024.06.03
JAVASCRIPT RGB 색상표 (0)	2024.05.19
1678. Goal Parser Interpretation leetcode javascript 해석 및 풀이 (0)	2024.01.03
(Javascript)개발자 도구 콘솔창 차단 방법 - 사이트 이동 [경고] 개발자 도구가 감지되었습니다. (0)	2023.12.14

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