chrome extension 메시지 통신 방법

chrome extension 개발 시 popup, contentScript, background 간에 메시지를 전송하는 일이 많다. 매번 작업할 때마다 찾아보기 귀찮아서 정리를 하게 되었다.

1. popup --> contentScript 메시지 전송

popup에 버튼을 하나 만들고 클릭 시 contentScript로 메시지를 전송하게 만들자.

보낼때는 현재 탭(tab.id)으로 메시지를 보내야 한다.

[popup.html]

<button id="btnMessage" class="button">popup 메시지</button>

[popup.js]

document.getElementById('btnMessage').addEventListener('click', () => {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
        const tab = tabs[0];
        chrome.tabs.sendMessage(
            tab.id, {
                type: 'greeting',
                payload: {
                    message: '안녕~ 이것은 popup에서 보내는 메시지야~',
                },
            },
            (response) => {
                console.log(response);
            }
        );
    });
});

위와 같이 popup에서 메시지를 전송하면 contentScript는 아래와 같이 chrome.runtime.onMessage.addListener로 메시지를 받을 수 있다.

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.type === 'greeting') {
        console.log('message received from chrome.tabs.sendMessage: ' + request.payload.message);
    } 

    sendResponse({});
    return true;
});

화면

2. contentScript --> background 메시지 전송

contentScript에서 background로 메시지를 전송할 때는 chrome.runtime.sendMessage로 전송한다.

[contentScript.js]

chrome.runtime.sendMessage({
          type: 'greeting',
          payload: {
              message: '안녕~ 나는 ContentScript야. sendResponse로 응답을 줘~',
          },
      },
      (response) => {
          console.log('message received from sendResponse: ' + response.message);
      }
  );

그리고 전송된 메시지를 background에서 받을 때는 chrome.runtime.onMessage.addListener으로 메시지를 받는다.

[contentScript.js 로그]

[background.js]

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.type === 'greeting') {
        console.log('[background] message received: ' + request.payload.message);
        const returnMessage = `방가워~ 이것은 contentScript의 메시지를 background에서 보내는 응답 메시지야~`;
        sendResponse({
            message: returnMessage,
        });
    } 

    return true; // 비동기로 작업 시 필요
});

background에서 메시지 응답을 보낼 때는 sendResponse에 JSON형태로 메시지를 전송하면 contentScript에서 응답을 받을 수 있다.

[background.js 로그]

3. background --> contentScript 메시지 전송

background에서 contentScript로 메시지를 보낼 때는 contentScript에서 사용하는 tab 아이디를 알고 있어야 한다.

[background.js]

const tab = await getCurrentTab();
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
      chrome.tabs.sendMessage(tab.id, {
          type: 'notify',
          payload: {
              message: '안녕, 이것은 Background에서 chrome.tabs.sendMessage으로 보내는 메시지야~',
          },
      }, () => {});
  });

위에서 currentWindow는 현재 윈도우의 탭정보를 가져오는 것이고 lastFocusedWindow는 마지막 포커스된 윈도우의 탭정보를 가져오는 것이다.

아래는 현재 탭정보를 가져오는 함수이다.

async function getCurrentTab() {
    let queryOptions = { active: true, lastFocusedWindow: true };
    let [tab] = await chrome.tabs.query(queryOptions);

    return tab;
}

contentScript에서는 chrome.runtime.onMessage.addListener를 통해 메시지를 받을 수 있다.

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.type === 'notify') {
        console.log('message received from chrome.tabs.sendMessage: ' + request.payload.message);
    }

    sendResponse({});
    return true;
});

[contentScript.js 로그]