Chrome Extension - background ↔ contentscript 간의 메세징 async await

내용

1. contentScript.js 에서 background.js 로 메세지 전송
2. background.js 에서 특정 함수 처리 대기(await) 후 결과 데이터를 contentScript.js 로 응답
3. contentScript.js 에서 결과 데이터 받은 후 남은 작업 처리

 

background.js에서 A함수 처리를 기다린 후 그 결과값을 sendResponse에 담아서 보내려고 하니,

갖가지 방법으로 (async-await, then, promise 등) 그리고 다양한 형태로 처리를 해보았지만

sendResponse 가 A 결과값을 가져오기 전에 response처리가 되는 것이 문제였다.

 

또한 비동기적으로 처리하니 Unchecked runtime.lastError: The message port closed before a response was received 에러가 발생하는 부분 또한 문제였다.

 

 

기존

contentScript.js

const data = chrome.runtime.sendMessage(
    {
      type: "A",
      payload: { message },
    },
    (response) => {
      return response;
    }
);
console.log(data);

 

background.js

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === "A") {

	// 여기에 들어가야할 코드 👇 -------------------------
      **const result = await A(request.payload.message);
      sendResponse(result);**
	// --------------------------------------------------
  }
});

 

 

결과

contentScript.js

const data = **await new Promise((resolve) => {**
  chrome.runtime.sendMessage(
    {
      type: "A",
      payload: { message },
    },
    (response) => {
      **resolve(response);**
    }
  );
**});**
console.log(data);

• await new Promise() : background.js에서 결과 메세지를 전달받을 때 까지 대기하기 위함.

 

background.js

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === "A") {
		**(async () => {
	      const result = await A(request.payload.message);
	      sendResponse(result);
	    })();
		return true;**
  }
});

• (async () ⇒ {}) () : 중첩된 비동기 IIFE 사용.
• return true : onMessage 의 콜백은 내부 메세징 채널을 열린 상태로 유지하면서 sendResponse가 비동기적으로 수행될 수 있도록 true 값을 반환해야 한다. 👉 참고문서