메시지 전달

콘텐츠 스크립트는 확장 프로그램이 아닌 웹페이지의 컨텍스트에서 실행되므로 확장 프로그램의 나머지 부분과 통신하는 방법이 필요한 경우가 많습니다. 예를 들어 RSS 리더 확장 프로그램은 콘텐츠 스크립트를 사용하여 페이지에 RSS 피드가 있는지 감지한 다음 백그라운드 페이지에 알림을 보내 해당 페이지의 페이지 작업 아이콘을 표시할 수 있습니다.

확장 프로그램과 콘텐츠 스크립트 간의 통신은 메시지 전달을 사용하여 작동합니다. 양쪽 모두 다른 쪽에서 전송된 메시지를 수신 대기하고 동일한 채널에서 응답할 수 있습니다. 메시지에는 유효한 JSON 객체 (null, 불리언, 숫자, 문자열, 배열 또는 객체)가 포함될 수 있습니다. 일회성 요청을 위한 간단한 API와 공유 컨텍스트로 여러 메시지를 교환하기 위한 장기 연결을 허용하는 더 복잡한 API가 있습니다. 확장 프로그램 간 메시지 섹션에서 다루는 ID를 알고 있는 경우 다른 확장 프로그램에 메시지를 보낼 수도 있습니다.

간단한 일회성 요청

확장 프로그램의 다른 부분에 단일 메시지만 보내고 응답을 다시 받으려면 간소화된 runtime.sendMessage 또는 tabs.sendMessage를 사용해야 합니다 . 이를 통해 콘텐츠 스크립트에서 확장 프로그램으로 또는 그 반대로 일회성 JSON 직렬화 가능 메시지를 보낼 수 있습니다. 선택적 콜백 매개변수를 사용하면 다른 쪽의 응답이 있는 경우 이를 처리할 수 있습니다.

콘텐츠 스크립트에서 요청을 보내는 방법은 다음과 같습니다.

chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
  console.log(response.farewell);
});

확장 프로그램에서 콘텐츠 스크립트로 요청을 보내는 방법은 매우 유사하지만 전송할 탭을 지정해야 합니다. 이 예에서는 선택한 탭의 콘텐츠 스크립트로 메시지를 보내는 방법을 보여줍니다.

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
    console.log(response.farewell);
  });
});

수신 측에서는 메시지를 처리하기 위해 runtime.onMessage 이벤트 리스너를 설정해야 합니다. 콘텐츠 스크립트 또는 확장 프로그램 페이지에서 동일하게 표시됩니다.

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"});
  }
);

위의 예에서 sendResponse는 동기적으로 호출되었습니다. sendResponse를 비동기적으로 사용하려면 onMessage 이벤트 핸들러에 return true;를 추가합니다.

참고: 여러 페이지에서 onMessage 이벤트를 수신 대기하는 경우 특정 이벤트에 대해 sendResponse()를 처음 호출하는 페이지에서만 응답을 전송할 수 있습니다. 해당 이벤트에 대한 다른 모든 응답은 무시됩니다.
참고: sendResponse 콜백은 동기적으로 사용되거나 이벤트 핸들러가 비동기적으로 응답할 것임을 나타내기 위해 true를 반환하는 경우에만 유효합니다. 핸들러가 true를 반환하지 않거나 sendResponse 콜백이 가비지 컬렉션되는 경우 sendMessage 함수의 콜백이 자동으로 호출됩니다.

장기 연결

단일 요청 및 응답보다 오래 지속되는 대화가 유용한 경우가 있습니다. runtime.connect 또는 tabs.connect를 사용하여 콘텐츠 스크립트에서 확장 프로그램 페이지로 또는 그 반대로 장기 채널을 열 수 있습니다 . 채널에는 선택적으로 이름이 있을 수 있으므로 다양한 유형의 연결을 구분할 수 있습니다.

한 가지 사용 사례는 자동 양식 작성 확장 프로그램일 수 있습니다. 콘텐츠 스크립트는 특정 로그인에 대한 확장 프로그램 페이지로 채널을 열고 페이지의 각 입력 요소에 대해 확장 프로그램에 메시지를 보내 작성할 양식 데이터를 요청할 수 있습니다. 공유 연결을 사용하면 확장 프로그램이 콘텐츠 스크립트에서 수신되는 여러 메시지를 연결하는 공유 상태를 유지할 수 있습니다.

연결을 설정할 때 각 끝점에 runtime.Port 객체가 제공되며, 이 객체는 해당 연결을 통해 메시지를 보내고 받는 데 사용됩니다.

다음은 콘텐츠 스크립트에서 채널을 열고 메시지를 보내고 수신 대기하는 방법입니다.

var port = chrome.runtime.connect({name: "knockknock"});
port.postMessage({joke: "Knock knock"});
port.onMessage.addListener(function(msg) {
  if (msg.question == "Who's there?")
    port.postMessage({answer: "Madame"});
  else if (msg.question == "Madame who?")
    port.postMessage({answer: "Madame... Bovary"});
});

확장 프로그램에서 콘텐츠 스크립트로 요청을 보내는 방법은 매우 유사하지만 연결할 탭을 지정해야 합니다. 위의 예에서 connect 호출을 tabs.connect로 바꾸기만 하면 됩니다.

수신 연결을 처리하려면 runtime.onConnect 이벤트 리스너를 설정해야 합니다. 콘텐츠 스크립트 또는 확장 프로그램 페이지에서 동일하게 표시됩니다. 확장 프로그램의 다른 부분에서 'connect()'를 호출하면 이 이벤트가 발생하고 연결을 통해 메시지를 보내고 받는 데 사용할 수 있는 runtime.Port 객체가 함께 발생합니다. 수신 연결에 응답하는 방법은 다음과 같습니다.

chrome.runtime.onConnect.addListener(function(port) {
  console.assert(port.name == "knockknock");
  port.onMessage.addListener(function(msg) {
    if (msg.joke == "Knock knock")
      port.postMessage({question: "Who's there?"});
    else if (msg.answer == "Madame")
      port.postMessage({question: "Madame who?"});
    else if (msg.answer == "Madame... Bovary")
      port.postMessage({question: "I don't get it."});
  });
});

포트 수명

포트는 확장 프로그램의 여러 부분 간의 양방향 통신 방법으로 설계되었으며, 여기서 (최상위) 프레임은 가장 작은 부분으로 간주됩니다. tabs.connect, runtime.connect 또는 runtime.connectNative를 호출하면 포트 가 생성됩니다. 이 포트는 postMessage를 통해 다른 끝점으로 메시지를 보내는 데 즉시 사용할 수 있습니다.

탭에 여러 프레임이 있는 경우 tabs.connect를 호출하면 runtime.onConnect 이벤트가 여러 번 호출됩니다 (탭의 각 프레임에 대해 한 번씩). 마찬가지로 runtime.connect가 사용되는 경우 onConnect 이벤트가 여러 번 발생할 수 있습니다 (확장 프로그램 프로세스의 모든 프레임에 대해 한 번씩).

예를 들어 열린 각 포트에 대해 별도의 상태를 유지하는 경우 연결이 닫히는 시점을 확인하는 것이 좋습니다. 이를 위해 runtime.Port.onDisconnect 이벤트를 수신 대기할 수 있습니다. 이 이벤트는 채널의 다른 쪽에 유효한 포트가 없는 경우에 발생합니다. 이는 다음과 같은 상황에서 발생합니다.

  • 다른 끝에 runtime.onConnect 리스너가 없습니다.
  • 포트가 포함된 탭이 언로드됩니다 (예: 탭이 탐색되는 경우).
  • connect가 호출된 프레임이 언로드되었습니다.
  • runtime.onConnect
  • runtime.Port.disconnect다른 끝에서 호출됩니다. `connect` 호출로 인해 수신자 끝에 여러 포트가 생성되고 이러한 포트 중 하나에서 `disconnect()`가 호출되면 `onDisconnect` 이벤트는 다른 포트가 아닌 발신자의 포트에서만 발생합니다.

확장 프로그램 간 메시지

확장 프로그램의 여러 구성요소 간에 메시지를 보내는 것 외에도 메시지 API를 사용하여 다른 확장 프로그램과 통신할 수 있습니다. 이를 통해 다른 확장 프로그램에서 활용할 수 있는 공개 API를 노출할 수 있습니다.

runtime.onConnectExternal 다음은 각 예입니다.

// For simple requests:
chrome.runtime.onMessageExternal.addListener(
  function(request, sender, sendResponse) {
    if (sender.id == blocklistedExtension)
      return;  // don't allow this extension access
    else if (request.getTargetData)
      sendResponse({targetData: targetData});
    else if (request.activateLasers) {
      var success = activateLasers();
      sendResponse({activateLasers: success});
    }
  });

// For long-lived connections:
chrome.runtime.onConnectExternal.addListener(function(port) {
  port.onMessage.addListener(function(msg) {
    // See other examples for sample onMessage handlers.
  });
});

마찬가지로 다른 확장 프로그램에 메시지를 보내는 것은 확장 프로그램 내에서 메시지를 보내는 것과 유사합니다. 유일한 차이점은 통신할 확장 프로그램의 ID를 전달해야 한다는 것입니다. 예를 들면 다음과 같습니다.

// The ID of the extension we want to talk to.
var laserExtensionId = "abcdefghijklmnoabcdefhijklmnoabc";

// Make a simple request:
chrome.runtime.sendMessage(laserExtensionId, {getTargetData: true},
  function(response) {
    if (targetInRange(response.targetData))
      chrome.runtime.sendMessage(laserExtensionId, {activateLasers: true});
  }
);

// Start a long-running conversation:
var port = chrome.runtime.connect(laserExtensionId);
port.postMessage(...);

웹페이지에서 메시지 보내기

확장 프로그램 간 메시지와 마찬가지로 앱 또는 확장 프로그램은 일반 웹페이지의 메시지를 수신하고 응답할 수 있습니다. 이 기능을 사용하려면 먼저 manifest.json에서 통신할 웹사이트를 지정해야 합니다. 예를 들면 다음과 같습니다.

"externally_connectable": {
  "matches": ["*://*.example.com/*"]
}

이렇게 하면 지정한 URL 패턴과 일치하는 모든 페이지에 메시지 API가 노출됩니다. URL 패턴에는 2차 도메인이 하나 이상 포함되어야 합니다. 즉, "*", "*.com", "*.co.uk", "*.appspot.com"과 같은 호스트 이름 패턴은 금지됩니다. 웹페이지에서 runtime.sendMessage 또는 runtime.connect API를 사용하여 특정 앱 또는 확장 프로그램에 메시지를 보냅니다. 예를 들면 다음과 같습니다.

// The ID of the extension we want to talk to.
var editorExtensionId = "abcdefghijklmnoabcdefhijklmnoabc";

// Make a simple request:
chrome.runtime.sendMessage(editorExtensionId, {openUrlInEditor: url},
  function(response) {
    if (!response.success)
      handleError(url);
  });

앱 또는 확장 프로그램에서 확장 프로그램 간 메시지와 마찬가지로 runtime.onMessageExternal 또는 runtime.onConnectExternal API를 통해 웹페이지의 메시지를 수신 대기할 수 있습니다. 웹페이지만 연결을 시작할 수 있습니다. 예를 들면 다음과 같습니다.

chrome.runtime.onMessageExternal.addListener(
  function(request, sender, sendResponse) {
    if (sender.url == blocklistedWebsite)
      return;  // don't allow this web page access
    if (request.openUrlInEditor)
      openUrl(request.openUrlInEditor);
  });

기본 메시지

확장 프로그램 및 앱은 기본 메시지 호스트로 등록된 기본 애플리케이션과 메시지를 교환할 수 있습니다. 이 기능에 대한 자세한 내용은 기본 메시지를 참고하세요.

보안 고려사항

콘텐츠 스크립트는 신뢰도가 낮습니다.

콘텐츠 스크립트는 확장 프로그램 백그라운드 페이지보다 신뢰도가 낮습니다 (예: 악성 웹 페이지가 콘텐츠 스크립트가 실행되는 렌더러 프로세스를 손상시킬 수 있음). 콘텐츠 스크립트의 메시지는 공격자가 작성했을 수 있다고 가정하고 모든 입력을 검증하고 삭제해야 합니다. 콘텐츠 스크립트로 전송된 데이터가 웹페이지로 유출될 수 있다고 가정합니다. 콘텐츠 스크립트에서 수신한 메시지로 트리거할 수 있는 권한 있는 작업의 범위를 제한합니다.

교차 사이트 스크립팅

콘텐츠 스크립트 또는 다른 확장 프로그램에서 메시지를 수신할 때 스크립트가 교차 사이트 스크립팅의 피해자가 되지 않도록 주의해야 합니다. 이 권장사항은 확장 프로그램 백그라운드 페이지 내에서 실행되는 스크립트와 다른 웹 출처 내에서 실행되는 콘텐츠 스크립트에 모두 적용됩니다. 특히 아래와 같은 위험한 API는 사용하지 마세요.

chrome.tabs.sendMessage(tab.id, {greeting: "hello"}, function(response) {
  // WARNING! Might be evaluating an evil script!
  var resp = eval("(" + response.farewell + ")");
});
chrome.tabs.sendMessage(tab.id, {greeting: "hello"}, function(response) {
  // WARNING! Might be injecting a malicious script!
  document.getElementById("resp").innerHTML = response.farewell;
});

대신 스크립트를 실행하지 않는 더 안전한 API를 사용하는 것이 좋습니다.

chrome.tabs.sendMessage(tab.id, {greeting: "hello"}, function(response) {
  // JSON.parse does not evaluate the attacker's scripts.
  var resp = JSON.parse(response.farewell);
});
chrome.tabs.sendMessage(tab.id, {greeting: "hello"}, function(response) {
  // innerText does not let the attacker inject HTML elements.
  document.getElementById("resp").innerText = response.farewell;
});

examples/api/messaging 디렉터리에서 메시지를 통한 통신의 간단한 예를 확인할 수 있습니다. 기본 메시지 샘플은 Chrome 앱이 네이티브 앱과 통신하는 방법을 보여줍니다. 더 많은 예와 소스 코드를 보는 데 도움이 필요하면 샘플을 참고하세요.