티스토리 뷰

발생일: 2014.11.30

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

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


해결책:



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

  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`를 사용하는 것이 안전하다.



반응형
댓글
공지사항