[크롬 익스텐션] url 로 특정 탭 목록 가져와서 url 변경하기

1. 현재 떠 있는 탭 중에, 특정 url이 포함된 탭들을 가져온다.

2. 가져온 탭들을 새로운 url로 리로드 시킨다. (여기에 파라미터 전송 등 응용해서 사용 가능)

 

 

manifest.json

"permissions": [
    "tabs",
    "scripting",
    "activeTab"
  ],
  
  "host_permissions": [
    "https://*.google.com/*",
    "https://*.tistory.com/*"
  ]

 

 

background.js

let url = 'www.tistory.com'
var count = 0;

chrome.tabs.query({url: "https://www.google.com/*"}).then(function(res){
	if(res.length > 0) {
    	for(let i=0; i<res.length; i++) {
        	count=1;
            // 해당하는 탭의 url 변경 및 리로드. tabId 는 res[i].id 
            chrome.tabs.update(res[i].id, {'url' : url}, function(tab){
            	// 탭의 url 업데이트 후 실행은 안되기 때문에 리로드로 실행해줌.
            	chrome.tabs.reload(tab.id);
            }
            
        }
    }
    
    // 찾는 탭이 없을 때는 브라우저 탭을 새로 생성함
    if(count === 0) {
    	chrome.tabs.create({'url' : url});
    }
}

 

위 코드에서 정상적으로 돌아가야 하지만, update 후 reload가 잘 되지 않는 문제가 발생하는 경우

좋은 방법은 아니지만 update callback을 두번 감싸서, 시간차에 의한 오류를 최소화 하는 방법으로 문제 해결.

 

chrome.tabs.update(res[i].id, {'url' : url}, function(tab){
	chrome.tabs.update(tab.id, {'url' : url}, function(tab2){
    	// 탭의 url 업데이트 후 실행은 안되기 때문에 리로드로 실행해줌.
    	chrome.tabs.reload(tab2.id);
    }
}