[Chrome extension] 새 창에 데이터 보내기

알고리즘

새 창에 데이터를 보내는 로직은 아래와 같다 (get 파라미터, chrome storage 사용 X)
1. 새 창을 만든 후, 해당 탭의 id값을 가져온다. (chrome.tabs.create)
2. 1번에서 가져온 탭의 id 값을 통해 웹 페이지가 로드 되었는지 확인한다. (chrome.tabs.onUpdated)
3. 웹 페이지가 로드 되었다면, 해당 탭으로 데이터를 보낸다. (chrome.tabs.sendMessage)
4. onMessage 함수를 통해 데이터를 받아온다. (chrome.runtime.onMessage)

2번은 꼭 필요한 과정은 아니지만, 타이밍 이슈가 있을 수 있기 때문에 해주면 안정성이 좋아진다.

예시 코드

// background.js

// 1. 새창 열기
chrome.tabs.create({ url: "https://www.naver.com/" }, (tab) => {  
    const tabId = tab.id;  

    // 2. 웹 페이지 로드 확인
    chrome.tabs.onUpdated.addListener(function listener(updatedTabId, info) {  
        if (updatedTabId === tabId && info.status === "complete") {  
            // 3. 데이터 전송
            chrome.tabs.sendMessage(tabId, {  
                data: "데이터 전송",
                payload: "payload 전송",  
            });  

			// 업데이트를 계속 감지하지 않도록 방지
            chrome.tabs.onUpdated.removeListener(listener);  
        }  
    });  
});

// content script

// 4. 데이터 받아오기
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {  
	console.log(msg.data)
	console.log(msg.payload)
});