[크롬 익스텐션] Message Passing 메시지 및 데이터 전달

content script 와 background 간 데이터 전달,

content script 와 popup 간 데이터 전달,

이런식으로 웹페이지의 컨텍스트(content script)에서 다른 확장 컨텍스트로 데이터를 전달하는 방법

양방향으로 발신/수신 가능

 

 

content-script.js 발신부분

chrome.runtime.sendMessage({
    name: 'tom'
},function(response) {
    console.log(response.res);
});

 

background.js 에서 수신하는 부분

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        let resName = request.name; // 발신부에서 name으로 보낸 데이터
		
        // 응답데이터
        sendResponse({name: resName});
        
        });
    });

 

이렇게 content-script 에서 보낸 메시지를 background에서 받고, 응답으로 데이터를 전달하면, 다시 content-script sendMassage 콜백으로 받을 수 있다.

 

양방향 전송이 가능하므로, 반대로 background에서 content-script로도 보낼 수 있다. 

다만 이 때에는 수신 브라우저를 선택해야 하므로 tabId를 지정해줘야 한다. 

 

background.js 발신부

(async () => {
  const [tab] = await chrome.tabs.query({active: true, lastFocusedWindow: true});
  const response = await chrome.tabs.sendMessage(tab.id, {greeting: "hello"});
  // do something with response here, not outside the function
  console.log(response);
})();

 

content-script.js 수신부

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.greeting === "hello")
      sendResponse({farewell: "goodbye"});
  }
);

 

 

https://developer.chrome.com/docs/extensions/mv3/messaging/

Chrome Extensions Message passing - Chrome Developers