크롬 확장 프로그램 콘텐츠 스크립트와 백그라운드 메시지

크롬 확장 프로그램을 개발하면 content script와 background 간에 메시지를 주고 받아야하는 경우가 있다.

 

백그라운드에서 보내고 컨텐츠 스크립트에서 받기

 //Background 메시지 보내기
 chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
 	chrome.tabs.sendMessage(tabs[0].id, {a: 'Hi'}, data =>{    //a에 Hi를 넣어 보내고 콜백
    	console.log(data); // Hello!
    });
});

//content script 메시지 받기

chrome.runtime.onMessage.addListener((message,sender,sendResponse) => {
    if(message.a == 'Hi'){ //메시지의 a가 Hi라면 Hello!라고 반응 보내기.
        sendResponse('Hello!');
    }
});

 chrome.tabs.sendMessage를 쓸려면 Tab id가 필요한데 그러기 위해선 chrome.tabs.query를 써주면 된다.

 

콘텐츠 스크립트에서 보내고 백그라운드에서 받기

//컨텐츠 스크립트에서 메시지 보내기
chrome.runtime.sendMessage(`Hi!`, response => {
    console.log(response); // Yeah
});


//백그라운드에서 메시지 받기 
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
	if (message === `Hi`) {
        sendResponse(`Yeah`);
    }
})