[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를 주입하여 실행 시킴
[ 결과 ]
사용자의 Tab 정보를 활용하여 화면을 제어하기 때문에, permissions을 추가
/* manifest.json */
...
"permissions": [
"...", "tabs", "scripting"
],
"host_permissions":[ /* 특정 URL에 script 주입을 위한 권한 */
"http://*/",
"https://*/"
],
...
다양한 브라우저 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를 주입하여 실행 시킴
[ 결과 ]
Author And Source
이 문제에 관하여([Chrome Extension] 탭 제어 기능 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dot2__/Chrome-Extension-탭-제어-기능-만들기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)