매뉴얼: 브라우저 확장 프로그램 만들기

Priya — 지난주에 만들고 있는 가격 하락 감시 도구가 "안전하게" 상품 페이지를 1분마다 폴링해야 하는지 물어보셨죠. 그걸 그대로 반영하기 전에 전체 과정을 함께 짚어보겠습니다. 사실 폴링 간격은 여기서 가장 사소한 결정이고, 처음부터 구조를 제대로 잡아두면 출시 전 리뷰 사이클을 한두 번은 줄일 수 있으니까요.

프롬프트 자체부터 시작하죠. "이 페이지를 감시하다가 가격이 내려가면 알려주는 확장 프로그램"이라고 말씀하셨는데, 좋은 아이디어이긴 하지만 아직 사양이라고 보기는 어렵습니다 — 빌더는 무엇을 하는지뿐 아니라 언제 동작하는지도 알아야 합니다. 여러분의 감시 도구는 세 가지 트리거 형태 중 세 번째에 해당하며, 나머지 두 개가 필요 없더라도 알아둘 가치가 있습니다. 형태에 따라 권한이 결정되고, 권한에 따라 리뷰 기간이 결정되기 때문입니다.

• 클릭 실행형이 가장 가볍습니다: 툴바 아이콘을 누르면 현재 페이지에 대해 한 번 실행되는 팝업으로, "이 페이지의 모든 가격을 목록으로 가져오기" 같은 용도에 적합합니다.
• 상시 실행 콘텐츠 스크립트는 지정한 URL 패턴에서 자동으로 실행됩니다 — 특정 도메인 아래 모든 페이지에서 경쟁사 이름을 강조 표시하는 것 같은 용도에 좋지만, 패턴은 명시적으로 지정해야 합니다. "우리 내부 사이트"라고만 하면 의도보다 좁게 추측될 수 있습니다.
• 여러분의 경우는 세 번째입니다: 백그라운드 감시 도구로, 탭이 열려 있든 아니든 상태가 유지되며, MV3의 서비스 워커에서 실행되고, 무언가 변하면 아이콘에 배지를 표시합니다.

이것이 빌더가 형식적인 절차가 아니라 후속 질문으로 되물어야 하는 유일한 형태입니다. 실제로 그렇게 할 것입니다 — 폴링 주기는 형식적인 문제가 아니라 실질적인 트레이드오프이기 때문입니다.

이는 다시 "1분마다"라는 여러분의 직감으로 돌아옵니다. 예전에 거의 똑같은 요청을 받은 적이 있습니다 — 페이지를 감시하다가 가격이 바뀌면 아이콘에 배지를 표시하는 것 — 첫 시도는 60초마다 폴링했습니다. 로컬에서 혼자 테스트할 때는 잘 작동했죠. 하지만 실제로 이 확장 프로그램을 설치하는 사람 수만큼 곱하면, 아무 이유 없이 누군가의 상품 페이지를 두들기게 됩니다. 일반적인 소매 상품 목록의 가격은 하루에 몇 번 이상 바뀌지 않으니까요. 프롬프트에 "30분마다 확인"이라고 지시하세요. 이는 타협이 아니라 더 정직한 요청입니다 — 브라우저 확장 프로그램에서 1분 미만 단위의 알림이 필요한 사람은 없으며, 나중에 확장 프로그램이 하루에 1,440번씩 서버에 접속하는 이유를 리뷰어에게 설명할 필요가 없어질 것입니다.

여러분이 신경 쓰지 않아도 되는 부분

매니페스트가 걱정된다고 하셨는데 — 걱정하지 않으셔도 됩니다. 그건 정말로 손댈 필요가 없는 유일한 부분이니까요. 두 스토어 모두 이제 매니페스트 V3를 요구합니다 — MV2는 신규 등록에 더 이상 허용되지 않고, Chrome은 여전히 남아 있는 MV2 확장 프로그램들을 적극적으로 정리하고 있습니다. MV3에서 가장 핵심적인 변화는 백그라운드 로직이 지속적으로 실행되는 백그라운드 페이지 대신 서비스 워커로 실행된다는 점입니다 — 이벤트가 발생할 때 시작되고, 이벤트 사이에는 브라우저가 종료할 수 있으며, 상태는 chrome.storage 를 거쳐야지, 단순히 변수에 저장해두면 안 됩니다. 이건 정확히 빌더가 기본적으로 올바르게 처리하는 종류의 라이프사이클 세부사항입니다. 일부러 찾아보지 않는 한 매니페스트 파일을 볼 일은 전혀 없을 것입니다.

실제로 신경 써야 할 부분은 권한입니다. 심사 속도를 결정하는 건 코드가 아니라 바로 이 부분이니까요. 당신의 워처에는 alarms 폴링을 위한 권한과 storage 마지막 가격을 기억하기 위한 권한이 필요하지만, tabs 또는 <all_urls>은 필요하지 않습니다. 그리고 나중에 확장할 수도 있다는 이유로 "언젠가 모든 사이트에서 동작할 수 있는 능력"을 요청하면, 빌더는 그에 맞춰 만들 것이고 아직 존재하지도 않는 기능을 위해 광범위한 호스트 접근 권한을 요청하게 됩니다. 그게 설치 대화상자에서 가장 무서워 보이는 항목입니다 — "방문하는 모든 사이트의 데이터 읽기 및 변경" — 그리고 자동 심사가 수동 심사로 넘어가게 만드는 원인이기도 합니다. 지금 하는 일을 그대로 설명하세요. 실제로 필요해지면 그때 범위를 넓히면 됩니다.

완료라고 말하기 전에 30초 정도 더 신경 쓸 만한 두 가지가 있습니다: 팝업 UI와 아이콘입니다.

• 팝업 UI — 위계 없이 체크박스만 나열된 기본 옵션 페이지는 확장 프로그램이 제대로 작동하는지와 전혀 무관하게 별점 1점 리뷰의 실제 원인이 됩니다. 여러분의 경우 설정이 몇 개(URL, 어쩌면 주기 정도) 안 되지만, 그래도 단순한 폼 나열이 아니라 제품다운 모습이어야 합니다.
• 아이콘 — Chrome의 네 가지 크기(16, 32, 48, 128px, Firefox는 조금 다른 규격) 모두에서 아이콘을 확인하세요. 128px에서 선명한 로고도 16px에서는 뭉개진 얼룩이 될 수 있는데, 하필 하루의 대부분 동안 아이콘이 놓이는 곳이 바로 복잡한 툴바 안 그 작은 크기입니다.

두 스토어를 건드리기 전에

실제로 테스트해보세요. 채팅 미리보기만으로는 안 됩니다. 빌드 결과로 실제 로드 가능한 확장 프로그램을 얻게 되니, chrome://extensions로 이동해서 개발자 모드를 켜고 "압축 해제된 확장 프로그램 로드"를 선택한 다음, 시뮬레이션된 버전이 아니라 실제로 신경 쓰는 실제 제품 페이지에서 실행해보세요. 특히 두 가지를 직접 확인해보시길 권합니다. 요청한 권한에 맞게 설치 권한 안내 문구가 예상대로 표시되는지, 그리고 콘텐츠 스크립트가 대상으로 만들어지지 않은 페이지에 접근했을 때 어떤 일이 벌어지는지 — 조용히 실패하는지, 눈에 보이는 오류를 발생시키는지. 둘 다 확인하는 데 1분도 채 걸리지 않지만, 직접 확인하면 명백하고 확인하지 않으면 눈에 띄지 않는 종류의 버그입니다.

실제로 출시할 준비가 되면, 두 스토어 모두 여러분 자신의 개발자 계정을 통해 진행하게 됩니다 — 리스팅 소유권은 여러분에게 있으며, 이 플랫폼이 대신 관리해주지 않습니다. 그리고 두 스토어가 결코 대칭적이지 않다는 점을 미리 알려드리고 싶습니다. 동일하다고 가정하고 출시일을 계획하지 않으셨으면 하기 때문입니다.

빌드가 끝난 후 생성되는 리스팅 키트는 실제로 실행 중인 확장 프로그램에서 촬영한 스크린샷(모형이 아닌), 리스팅 문구, 그리고 기억에 의존해 채운 것이 아니라 실제 코드와 대조하여 확인된 개인정보 처리 방식 답변까지 함께 생성합니다. 마지막 부분은 외부 페이지와 통신하는 확장 프로그램에게는 보기보다 훨씬 중요합니다. Chrome의 개인정보 설문은 데이터 처리에 관해 명확한 예/아니오 질문을 하는데, 여러분의 감시 도구가 가격을 폴링하고 저장하고 있는데도 "데이터를 수집합니까"라는 질문에 "아니오"라고 답하는 것은 출시 전에 단순히 거부되는 정도가 아니라 출시 후 삭제 조치를 당할 수 있는 종류의 작은 거짓말입니다. 답변을 실제 코드와 대조하여 확인하는 과정이 그 격차를 자동으로 메워줍니다.

마지막으로 한 가지 더 — 저는 이미 당신이 이 기능이 출시되면 "기기 간 관심 목록 동기화"와 "시간별 가격 이력 추적"을 추가할 생각을 하고 있다는 걸 압니다. 그래도 괜찮지만, 알아두셔야 할 게 있습니다. 그 각각은 새로운 권한이고, 새로운 권한은 방금 통과한 것보다 더 느린 심사를 의미할 수 있습니다. 더 큰 버전을 원한다는 확신이 있다면, 권한을 하나씩 늘려가는 것보다 지금 한 번에 요청하고 한 번의 느린 심사를 감수하는 편이 진짜로 더 낫습니다. 아직 확신이 없다면, 지금 가진 것을 출시하세요 — 범위가 좁게 잡힌 워처는 심사가 빠르게 통과되고, 실제 사용자를 확보할 수 있으며, 지금은 긴 기능 목록이 Chrome 심사 대기열에 묶여 있는 것보다 실제 사용이 훨씬 더 가치 있습니다. 나중에 언제든 더 요청할 수 있지만, 아직 필요하지도 않은 것 때문에 수동 심사에 발이 묶여버리면 이번 출시는 되돌릴 수 없습니다.