크롬 익스텐션에서 메시지 주고 받기

발생일: 2014.11.30

키워드: 크롬 익스텐션, chrome extension, 크롬 확장, 메시지, message, onMessage, chrome.runtime, chrome.tabs

문제:

크롬 익스텐션과 컨텐트 스크립트 간 1회성으로 메시지를 주고 받는 법에 대한 메모이다.

해결책:

https://developer.chrome.com/extensions/messaging#simple

컨텐트 스크립트에서 익스텐션으로 보내기

  chrome.runtime.sendMessage({greeting: "hello"}, function(response) {

    console.log(response.farewell);

  });

  `chrome.runtime.sendMessage()`로 전달한다.

  익스텐션의 메시지 핸들러(`chrome.runtime.onMessage`)에서 응답을 바로 주는 경우,

  메시지를 보낸 후 바로 응답을 처리할 수 있다.

익스텐션에서 컨텐트 스크립트로 보내기

  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {

    chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {

      console.log(response.farewell);

    });

  });

  메시지를 보낼 탭을 선택한 후에, `chrome.tabs.sendMessage()`로 보낸다.

메시지 핸들러 (컨텐트 스크립트와 익스텐션 동일)

  chrome.runtime.onMessage.addListener(

    function(request, sender, sendResponse) {

      console.log(sender.tab ?

                  "from a content script:" + sender.tab.url :

                  "from the extension");

      if (request.greeting == "hello")

        sendResponse({farewell: "goodbye"});

    });

  `chrome.runtime.onMessage.addListener()`로 핸들러를 등록한다.

  파라미터로 정의된 `sendResponse()`을 호출하는 방법으로 메시지에 대한 응답을 바로 줄 수 있다.

주의

  컨텐트 스크립트다 다른 익스텐션으로부터 메시지를 받을 때, 그 메시지에 악성 코드가 포함되어 있을 수 있으므로 신뢰하면 안된다.

  전달된 값에 스크립트가 포함되어 있을 수 있으므로, 바로 `eval()`로 실행하거나 `innerHTML`로 할당하는 대신,

  `JSON.parse()`나 `innerText`를 사용하는 것이 안전하다.