팝업창 안 닫히게 페이지 이동하는 법!

크롬 확장프로그램을 개발하다 보면 흔히 겪는 난관이 있습니다. 바로 "버튼을 눌러 사이트를 이동하고 싶은데, 새 탭이 열리면서 팝업창이 꺼져버리는 문제"입니다.

팝업창에서 어떤 작업을 계속 이어나가야 하는데 창이 닫혀버리면 정말 난감하죠? 오늘은 이 문제를 해결하는 핵심 열쇠인 Chrome API의 두 가지 명령어를 완벽하게 파헤쳐 보겠습니다.

이 글을 다 읽으시면 여러분은 더 이상 무분별한 '새 탭' 생성 없이, 세련된 페이지 이동을 구현할 수 있습니다!


타겟 확보: 지금 보고 있는 화면이 뭐지?

👉 chrome.tabs.query({ active: true, currentWindow: true })

우리가 무언가를 바꾸려면, 가장 먼저 "무엇을 바꿀지" 대상을 특정해야 합니다. 브라우저에는 수많은 탭이 열려 있으니까요. 이때 사용하는 명령어가 바로 query입니다.

  • 기능: 현재 열려 있는 모든 탭 중에서 내가 원하는 조건에 딱 맞는 탭을 찾아냅니다.
  • 주요 옵션 설명:
    • active: true: 수많은 탭 중 현재 활성화된(사용자가 보고 있는) 탭만 찾습니다.
    • currentWindow: true: 브라우저 창이 여러 개일 때, 확장프로그램이 실행된 바로 그 창만 대상으로 합니다.

📺 쉬운 비유: TV 리모컨

집에 TV 리모컨이 3개가 굴러다닌다고 상상해 보세요.

"지금 내 손에 들려 있고(currentWindow), 전원이 켜진(active) 리모컨을 가져와!"

이 명령어가 바로 chrome.tabs.query입니다. 우리는 이 명령어를 통해 찾아낸 탭의 고유 번호(ID)를 획득하여 다음 단계로 넘어갑니다.

채널 변경: 탭을 재활용하자!

👉 chrome.tabs.update(currentTab.id, { url: '...' })

타겟 탭의 ID를 알아냈다면, 이제 이동할 차례입니다. 여기서 초보 개발자들이 가장 많이 하는 실수가 무조건 create를 쓰는 것입니다. 하지만 팝업을 유지하거나 매끄러운 화면 전환을 원한다면 update를 써야 합니다.

  • 기능: 특정 탭의 상태(주소, 활성 여부 등)를 수정합니다.
  • 매개변수 설명:
    • currentTab.id: "어떤 탭을?" → 아까 query로 찾아낸 탭의 ID를 넣습니다.
    • { url: '...' }: "어떻게?" → 웹사이트 주소를 변경하라고 지시합니다.

⚔️ 핵심 비교: create vs update

구분 chrome.tabs.create chrome.tabs.update
동작 새 탭을 추가(+)합니다. 기존 탭을 재활용(♻️)합니다.
결과 탭 개수가 늘어납니다. 탭 개수는 그대로입니다.
팝업 상태 포커스가 새 탭으로 가며 팝업이 닫힘 배경 페이지만 바뀌고 팝업 유지
비유 새 TV를 사서 새 채널을 트는 것 보던 TV의 채널만 돌리는 것

실전 코드 예시 (복사해서 쓰세요!)

이제 이론을 알았으니 실제 코드로 구현해 볼까요? "현재 탭에서 구글 홈페이지로 이동하는" 코드입니다.

// 1. 현재 사용자가 보고 있는 탭(Target)을 찾습니다.
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
    
    // tabs는 배열(List) 형태로 오기 때문에 첫 번째([0])를 선택합니다.
    let currentTab = tabs[0];
    
    // 2. 찾은 탭(currentTab.id)의 주소(url)를 변경(update)합니다.
    if (currentTab) {
        chrome.tabs.update(currentTab.id, { 
            url: 'https://www.google.com' 
        });
        console.log("새 탭을 열지 않고 페이지를 이동했습니다!");
    }
});

📝 요약 및 개발 꿀팁

오늘 배운 내용을 한 문장으로 정리하면 이렇습니다.

"팝업창을 끄지 않고 페이지를 이동시키려면, query로 ID를 따고 update로 밀어 넣어라!"

혹시 AI나 다른 개발자에게 코드를 요청할 때, 아래처럼 말하면 더 정확한 코드를 받을 수 있습니다.

🗣️ 프로의 요청 멘트:
"현재 Active 탭을 타겟팅해서 chrome.tabs.update로 페이지 이동을 구현해 주세요. 새 탭을 띄우지 않고 팝업을 유지하는 것이 목적입니다."
"현재 열려 있는 탭의 정보를 query로 가져온 뒤, create로 새 탭을 띄우지 말고 update를 사용해서 현재 탭의 URL만 해당 사이트로 이동시켜 주세요."