크롬 확장프로그램 개발 (1)

Main·2024년 12월 2일

Chrome Extension 크롬 확장 프로그램 구조 크롬 확장프로그램

Chrome Extension

목록 보기

1/3

크롬 확장프로그램 개발이 웹 개발에서 사용하는 기술과 다르지않아서 토이 프로젝트로 크롬 확장프로그램을 개발해보려고 합니다. 먼저 크롬 확장 프로그램의 구조가 어떻게 되고 어떻게 동작하는지에 대해 알아보겠습니다.

1. 크롬 확장프로그램의 구조

크롬 확장 프로그램의 구조는 크게 mainfest.json, background.js, popup.js, contentscript.js로 나뉘게됩니다.

1 ) mainfest.json

manifest.json은 확장 프로그램의 메타 데이터를 정의하는 파일입니다. 크롬 확장 프로그램이 정상적으로 작동하기 위해 반드시 포함되어야 합니다. 여기에는 확장 프로그램의 이름, 버전, 권한, 파일 구조 등이 기술됩니다.

{
  "manifest_version": 3, // Chrome 확장 프로그램의 버전. 최신 버전은 3입니다.
  "name": "My Extension", // 확장 프로그램 이름
  "version": "1.0", // 버전 정보
  "description": "An example Chrome extension.", // 설명
  "permissions": ["storage", "activeTab", "scripting"], // 확장 프로그램에 필요한 권한들
  "action": {
    "default_popup": "popup/popup.html", // 팝업 UI 파일 경로
    "default_icon": "icon.png" // 확장 프로그램 아이콘
  },
  "background": {
    "service_worker": "background.js" // 백그라운드 스크립트 경로
  },
  "content_scripts": [
    {
      "matches": ["https://*/*"], // 적용될 웹 페이지의 URL 패턴
      "js": ["content.js"] // 삽입할 스크립트 파일
    }
  ],
  "icons": {
    "16": "icon.png", // 아이콘 크기와 경로
    "48": "icon.png",
    "128": "icon.png"
  }
}

2 ) background.js

브라우저의 전역적인 작업을 처리하며, 브라우저가 열려 있는 동안 실행됩니다.
background.js는 브라우저 이벤트(탭 변경, 알람 등)를 처리하거나 팝업, contentscript.js, 브라우저 간의 데이터 중계 역할을 합니다.

// 확장 프로그램이 설치되었을 때 실행됩니다.
chrome.runtime.onInstalled.addListener(() => {
  console.log("Extension installed."); // 확장 프로그램이 설치될 때 실행
});

// 확장 프로그램 아이콘이 클릭되었을 때 실행됩니다.
chrome.action.onClicked.addListener((tab) => {
  // 스크립트를 특정 탭에 삽입합니다.
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ["content.js"] // 현재 탭에 contentscript.js 삽입
  });
});

💡 chrome 객체 ?
크롬 브라우저의 기능과 API를 제공하는 객체로 탭 관리, 스토리지 사용, 네트워크 요청 조작, 브라우저 이벤트 처리 등의 작업을 수행할 수 있습니다.
chrome 객체 API에 대한 자세한 내용은 Chorme Extension API Docs를 참고해주세요.

3 ) popup.js

확장 프로그램 아이콘을 클릭하면 나타나는 UI를 구성합니다.
팝업은 보통 HTML, CSS, JavaScript 파일로 구성되며, 간단한 설정 메뉴나 데이터를 표시하는 데 사용됩니다.

<!DOCTYPE html>
<html>
<head>
  <title>Popup</title>
</head>
<body>
  <p class="count">0</p>
  <button id="increment-btn">increment</button>
  <script src="popup.js"></script>
</body>
</html>

document.querySelector(".increment-btn").addEventListener("click", async () => {
  const countEl =  document.querySelector(".count");
  const count = countEl.value
  document.querySelector(".count").textContent = (ParseInt(count, 10) + 1).toString();
});

4 ) contentscript.js

웹 페이지와 상호작용하며 DOM을 조작하거나, 데이터를 추출하는 역할을 합니다.
확장 프로그램이 직접 웹 페이지에 접근해야 할 때 사용됩니다.

// 페이지의 모든 링크를 파란색으로 변경
const links = document.querySelectorAll("a");
links.forEach(link => {
  link.style.color = "blue";
});
console.log(`${links.length} links updated to blue.`);

2. 크롬 확장 프로그램의 실행 흐름

1 ) 초기화

크롬 브라우저가 실행되거나 확장 프로그램이 설치될 때, manifest.json을 읽어들입니다.
background.js가 로드되어 초기 이벤트 리스너를 설정합니다.

2 ) 이벤트 기반 동작

크롬 확장 프로그램은 이벤트 기반 아키텍처를 사용하여 특정 작업이 발생했을 때 트리거됩니다.
예를 들어 브라우저 아이콘 클릭, 웹 페이지 로드, 특정 메시지 수신 등이 있습니다.

3 ) 사용자와의 상호작용

사용자가 브라우저 툴바의 확장 프로그램 아이콘을 클릭 시 지정된 popup.html이 렌더링됩니다.
이 팝업 화면은 popup.js와 연계되어 버튼 클릭 등 사용자의 입력을 처리합니다.
사용자의 작업이 트리거되면 팝업에서 background.js로 메시지가 전송됩니다.
background.js는 메시지를 처리하거나 특정 작업을 실행합니다.
필요 시 contentscript.js로 작업 요청을 전달합니다.

4 ) 웹 페이지와의 상호작용

content.js는 지정된 웹 페이지에서 DOM 요소를 수정하거나 데이터를 추출합니다.
예: 사용자가 "현재 페이지의 모든 링크를 파란색으로 바꾸기"를 요청하면, popup.js → background.js → contentscript.js의 순서로 명령이 전달되어 페이지의 스타일이 변경됩니다.

5) 데이터 저장과 동기화

확장 프로그램은 브라우저의 저장소 API(chrome.storage)를 사용해 데이터를 저장하거나 동기화할 수 있습니다. 사용자가 설정값을 변경하면, 이 값이 저장되어 다음 실행 시에도 유지됩니다.

3. 크롬 확장 프로그램 직접 실행 해보기

간단한 예시 코드를 통해 간단한 크롬 확장 프로그램을 직접 개발하고 실행 해보겠습니다.
먼저, mainfest.json 파일을 생성합니다.

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "An example Chrome extension.",
  "permissions": ["activeTab"],
  "action": {
    "default_popup": "popup.html"
  }
}

다음으로 popup에서 실행될 popup.html, popup.js, popup.css를 생성합니다.

<!-- popup.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Popup Count</title>
  <link href="./popup.css"rel="stylesheet" />
</head>
<body>
  <h1 class="title">Popup Count</h1>
  <p class="count">0</p>
  <button class="increment-btn">increment</button>
  <script src="./popup.js"></script>
</body>
</html>

// popup.js
document.querySelector(".increment-btn").addEventListener("click", () => {
  const countEl = document.querySelector(".count");
  const count = countEl.textContent;
  document.querySelector(".count").textContent = (
    parseInt(count, 10) + 1
  ).toString();
});

/* popup.css */
body {
  width: 300px;
  padding: 20px;
}

.title {
  padding: 0;
  margin: 0 0 20px 0;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
}
.count {
  margin: 0 0 10px 0;
  padding: 0;
  font-size: 20px;
}

.increment-btn {
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}