크롬 익스텐션의 작동 구조와 통신 과정

크롬 익스텐션은 웹 브라우저를 더욱 강력하고 편리하게 만드는 훌륭한 도구입니다. 이번 글에서는 크롬 익스텐션의 핵심 요소들이 어떤 방식으로 서로 작동하고 통신하는지 살펴보겠습니다.

 

1. 크롬 익스텐션의 핵심 요소들

크롬 익스텐션의 주요 요소는 아래와 같습니다:
- 익스텐션 아이콘
- 팝업
- 컨텍스트 메뉴
- 백그라운드 스크립트
- 컨텐트 스크립트

**익스텐션 아이콘과 팝업**
익스텐션 아이콘은 사용자에게 익스텐션의 존재를 알리는 핵심 요소입니다. 아이콘을 클릭하면 나타나는 팝업에서는 익스텐션의 주요 기능을 실행할 수 있습니다. 이러한 인터페이스를 정의하기 위해 manifest.json 파일에서 "browser_action" 필드를 사용합니다. 이 필드에서 익스텐션 아이콘의 이미지 파일 경로와 팝업으로 나타낼 HTML 파일의 경로를 지정합니다.

**컨텍스트 메뉴**
컨텍스트 메뉴는 사용자가 웹 페이지에서 우클릭했을 때 나타나는 메뉴입니다. 이 메뉴를 통해 익스텐션의 기능을 실행할 수 있습니다. 이를 위해 "context_menus" 필드를 사용하며, 이 필드에서는 메뉴 항목의 제목과, 해당 항목을 클릭했을 때 실행될 콘텐츠 스크립트를 지정합니다.

2. 스크립트의 종류와 역할

크롬 익스텐션에는 주로 두 가지 종류의 스크립트가 있습니다: 백그라운드 스크립트와 컨텐트 스크립트입니다.

**백그라운드 스크립트**
백그라운드 스크립트는 익스텐션이 실행되는 동안 항상 백그라운드에서 작동합니다. 주로 익스텐션의 핵심 기능을 구현하며, 익스텐션이 실행되는 동안 발생하는 이벤트를 처리합니다. 백그라운드 스크립트는 사용자가 브

라우저를 실행할 때마다 실행되며, 사용자가 브라우저를 종료할 때까지 유지됩니다. 더욱 효율적인 자원 관리를 위해 이벤트 기반의 백그라운드 스크립트, 즉 "Event Pages"를 사용할 수 있습니다. 이는 익스텐션이 필요한 경우에만 로드되고, 더 이상 필요하지 않으면 언로드 됩니다.

**컨텐트 스크립트**
컨텐트 스크립트는 웹 페이지를 로드할 때마다 실행되며, 웹 페이지의 DOM을 조작하거나, 웹 페이지에서 발생하는 이벤트를 감지하여, 해당 이벤트에 대한 반응을 구현하는 역할을 합니다. 또한, 컨텐트 스크립트는 백그라운드 스크립트와 메시지를 주고받을 수 있습니다.

3. 스크립트 간의 통신

컨텐트 스크립트와 백그라운드 스크립트는 서로 다른 실행 환경에서 동작하지만, 크롬 익스텐션 API를 통해 서로 메시지를 주고받을 수 있습니다. 예를 들어, 웹 페이지에서 일어나는 이벤트를 컨텐트 스크립트가 감지하고, 그 정보를 백그라운드 스크립트에게 보내면 백그라운드 스크립트는 그에 따른 액션을 수행하게 됩니다.

크롬 익스텐션의 각 구성 요소들은 서로 연결되어 복잡한 기능을 수행하게 됩니다. 이들 간의 연결이 잘 이루어져야만 사용자에게 가치 있는 기능을 제공할 수 있습니다. 이처럼 크롬 익스텐션은 서로 다른 요소들이 연결되어 동작하는 복잡한 시스템이지만, 이를 이해하면 더욱 효과적인 익스텐션을 개발할 수 있습니다.

 

4. 스크립트 실행 순서와 호출 방식

크롬 익스텐션은 사용자가 브라우저를 시작할 때 로드되며, 이때 맨 처음 실행되는 것은 백그라운드 스크립트입니다. 백그라운드 스크립트는 익스텐션의 초기화 과정을 담당하며, 이 과정에서 필요한 리소스를 불러오거나, 이벤트 리스너를 등록합니다.

반면, 컨텐트 스크립트는 특정 웹 페이지를 사용자가 방문할 때마다 실행됩니다. 컨텐트 스크립트는 웹 페이지의 DOM을 조작하거나, 웹 페이지에서 발생하는 이벤트를 감지하여 익스텐션의 특정 기능을 실행시킵니다. 컨텐트 스크립트는 페이지 로드가 완료되면 바로 실행되며, 페이지를 벗어나거나 새로고침할 때까지 유지됩니다.

5. 메시지 통신과 호출 과정

메시지 통신은 익스텐션 내에서 서로 다른 스크립트 간에 데이터를 주고받을 수 있게 해주는 중요한 과정입니다. 컨텐트 스크립트가 백그라운드 스크립트에게 데이터를 보내려면 `chrome.runtime.sendMessage` 메서드를 사용하며, 반대로 백그라운드 스크립트가 컨텐트 스크립트에게 데이터를 보내려면 `chrome.tabs.sendMessage` 메서드를 사용합니다.

이러한 메시지 전달 방식은 크게 두 가지로 나뉘어 집니다. 요청-응답 방식과 이벤트 방식입니다. 요청-응답 방식은 한 스크립트가 다른 스크립트에게 메시지를 보내고, 그에 대한 응답을 기다리는 방식입니다. 이 방식은 `sendMessage` 메서드를 사용하여 요청을 보내고, `onMessage` 이벤트를 이용해 응답을 받습니다.

반면, 이벤트 방식은 한 스크립트가 다른 스크립트에게 메시지를 보내고 응답을 기다리지 않는 방식입니다. 이 방식은 `sendMessage` 메서드를 사용하여 메시지를 보내고, `onMessage` 이벤트를 통해 메시지를 받는 스크립트가 이에 대한 액션을 수행합니다.

크롬 익스텐션의 스크립트들이 서로 작동하고 통신하는 방식을 이해하면, 웹

 브라우저의 기능을 확장하거나 사용자 경험을 향상시키는 더 효과적인 익스텐션을 개발하는 데 도움이 됩니다.

 

 

[예제 코드]

아래 예제는 간단한 크롬 익스텐션의 구조를 보여주며, 컨텐트 스크립트에서 백그라운드 스크립트로 메시지를 보내는 방법을 보여줍니다.

manifest.json:

{
  "manifest_version": 3,
  "name": "나의 익스텐션",
  "version": "1.0",
  "permissions": ["activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

manifest_version은 manifest 파일의 버전을 지정합니다. 이 코드에서는 V3를 사용합니다.

백그라운드 스크립트(background.js):

// 컨텐트 스크립트로부터 메시지를 받기 위한 리스너
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  console.log(`컨텐트 스크립트로부터 받은 메시지: ${request.message}`);
  // 컨텐트 스크립트에게 응답을 보냄
  sendResponse({ message: '메시지를 받았습니다' });
});

백그라운드 스크립트는 컨텐트 스크립트로부터 메시지를 받기 위해 chrome.runtime.onMessage API를 사용합니다.

컨텐트 스크립트(content.js):

// 백그라운드 스크립트에게 메시지를 보냄
chrome.runtime.sendMessage({ message: '컨텐트 스크립트에서 보낸 메시지입니다' }, response => {
  console.log(`백그라운드 스크립트로부터 받은 응답: ${response.message}`);
});

 컨텐트 스크립트는 백그라운드 스크립트에게 메시지를 보내기 위해 chrome.runtime.sendMessage API를 사용합니다.