[Chrome Extension] 탭 제어 기능 만들기

[ manifest.json ]

사용자의 Tab 정보를 활용하여 화면을 제어하기 때문에, permissions을 추가

/* manifest.json */
	...
  "permissions": [
    "...", "tabs", "scripting"
  ],
	"host_permissions":[ /* 특정 URL에 script 주입을 위한 권한 */
	  "http://*/",
	  "https://*/"
	],
  ...

[ Background JS ]

다양한 브라우저 event들을 monitoring하여 작업을 수행하는 코드를 작성한다

탭 URL 변경 감지

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab)=>{
    if(changeInfo.status === 'complete'){
		    /* 탭 정보 변경 후, 수행할 로직 작성 */
    }
});

• 탭의 상태가 변경될 때 발생
• tabId: 변경된 탭의 ID changeInfo: 변경된 내용 tab: 변경된 탭 Object
• 필요한 changeInfo: status ( unloaded / loading / complete )
• ⇒ status == complete 를 체크해주지 않을 시, 로딩 중 다양한 변화에도 Listner가 작동하여 불필요한 호출이 반복된다.

저장되어 있는 제어 대상 URL과 비교

chrome.storage.sync.get((result) => {
    for(value in result){
        if(tab.url.includes(value)){
            /* 제어 대상 URL일 경우 */
        }
    }
});

• chrome storage에 저장되어 있는 URL 목록을 불러옴
• tab Object의 URL 속성과 Storage value를 비교

제어 탭 차단

차단 방식: 화면 Black 처리

chrome.scripting.executeScript({
    target: {tabId: tabId},
    func: ()=>{document.body.appendChild(warningDiv)}
});

• target에 작성된 script를 주입하여 실행 시킴

[ 결과 ]