chrome extension popup contentscript 통신 방법

popup js to contentscript js 통신

• popup 단과 contentscript 단은 다르다.
• popup은 chrome extension 아이콘 클릭시 나오는 창으로 브라우저에서 동작한다.
• contentscript 는 페이지 로드시 함께 동작되며 page 영역에서 동작한다.
• 이 둘의 통신을 위해서는 chrome extension object를 활용해야한다.

manfiest.json 코드

반드시 manifest.json permission에 activeTab,tab을 활성화 시켜줘야 아래 코드가 실행된다.

"permissions": [
    "activeTab",
    "tabs"
  ]

popup.js 코드

function digitalon_use(){
        chrome.tabs.query({active:true,currentWindow:true},function(tabs){
            chrome.tabs.sendMessage(tabs[0].id,{todo:"digitalon_use", use:is_on})
        })
    }

contentscript js 코드

chrome.runtime.onMessage.addListener(function(request,sender,sendResponse){
        console.log("onMessage 시작 : ", request);
        if(request.todo = "digitalon_use"){
            if(request.use){
                document.getElementById('bar-section').classList.remove("d-none");
            }else{
                document.getElementById('bar-section').classList.add("d-none");
            }
        }
    })