#033 크롬 익스텐션(Chrome Extension)으로 SaaS 기능 확장하기: 브라우저 원클릭 추출과 사이드 패널 개발

웹 대시보드로 접속하게 만드는 방식은 여전히 유저에게 “새 탭 열기 ➡️ URL 복사 ➡️ 붙여넣기”라는 물리적 마찰을 요구한다. 이커머스 셀러가 경쟁사 쇼핑몰 상세페이지를 둘러보다가 그 화면 그대로 우측 사이드 패널을 열어 1초 만에 데이터를 뽑아내는 ‘크롬 익스텐션(확장 프로그램)’을 연동하면 제품 사용 빈도와 락인 강도는 차원이 달라진다.

오늘은 크롬의 최신 표준인 Manifest V3 규격을 기반으로, Next.js 백엔드 API와 Supabase 인증 세션을 그대로 공유하는 고생산성 크롬 익스텐션 제작 프로토콜을 정리했다.

🧩 WXT / Plasmo 프레임워크를 활용한 모던 익스텐션 개발 환경

과거처럼 순수 HTML/JS 파일 여러 개를 수동으로 묶는 방식 대신, React와 TypeScript, Tailwind CSS를 그대로 쓸 수 있는 ‘WXT’ 또는 ‘Plasmo’ 프레임워크를 활용한다.

Plaintext

[크롬 익스텐션 프로젝트 초기 세팅]
npx create-wxt@latest reviewzip-extension --template react

• 사이드 패널(Side Panel API) 기본 지원: 팝업 창이 닫히면 작업이 날아가는 구형 Popup 방식 대신, 브라우저 우측에 고정되는 최신 chrome.sidePanel API를 적용해 쇼핑몰 탐색과 데이터 추출을 동시에 진행할 수 있다.
• HMR(Hot Module Replacement) 지원: 소스코드를 수정하면 브라우저 확장 프로그램이 실시간으로 새로고침되어 웹 개발과 동일한 속도로 UI를 조립할 수 있다.

📄 Manifest V3 핵심 설정 (manifest.json)

크롬 웹스토어 검수를 통과하기 위해 필수 권한(Permissions)을 최소한으로 정의한다.

JSON

{
  "manifest_version": 3,
  "name": "ReviewZip - 1초 리뷰 추출기",
  "version": "1.0.0",
  "description": "쇼핑몰 상세페이지에서 원클릭으로 리뷰 엑셀과 고화질 이미지를 다운로드합니다.",
  "permissions": [
    "sidePanel",
    "activeTab",
    "scripting",
    "storage"
  ],
  "host_permissions": [
    "https://*.mysaas.io/*",
    "https://*.smartstore.naver.com/*",
    "https://*.coupang.com/*"
  ],
  "side_panel": {
    "default_path": "sidepanel.html"
  },
  "action": {
    "default_title": "ReviewZip 사이드 패널 열기"
  }
}

🔄 브라우저 DOM 직접 파싱과 웹 백엔드 API 통신

익스텐션의 가장 큰 장점은 백엔드 크롤러가 쇼핑몰의 봇 차단(403 Forbidden, #021)에 막히더라도, 유저 본인의 브라우저가 이미 렌더링을 완료한 화면의 DOM을 직접 읽어오기 때문에 차단율이 0%라는 점이다.

TypeScript

// content-script.ts (현재 활성화된 쇼핑몰 탭의 DOM에서 리뷰 파싱)
export function extractCurrentPageData() {
  const title = document.querySelector('h3._2e4TuRClEr')?.textContent || document.title;
  const imageElements = document.querySelectorAll('ul.review_image_list img');
  const imageUrls = Array.from(imageElements).map((img) => (img as HTMLImageElement).src);
  return {
    url: window.location.href,
    title,
    imageUrls,
    extractedAt: new Date().toISOString(),
  };
}

• 동작 흐름: 사이드 패널에서 [현재 페이지 1초 추출] 버튼 클릭 ➡️ chrome.tabs.sendMessage로 현재 탭의 스크립트 실행 ➡️ 추출된 데이터를 사이드 패널로 반환 ➡️ 기존 웹 백엔드 API(api.mysaas.io/crawls)로 전송해 엑셀/ZIP 파일로 즉시 변환.

🔑 웹 대시보드 로그인 세션 익스텐션으로 원클릭 동기화

유저가 확장 프로그램에서 아이디/비밀번호를 또 입력하게 만들면 안 된다.

• 쿠키 기반 자동 인증: chrome.cookies.get API를 활용해 웹 대시보드(.mysaas.io)에 저장된 Supabase 세션 토큰(sb-access-token)을 읽어와 헤더에 Authorization: Bearer <token>을 자동으로 실어 보낸다.
• 구독 상태 즉시 반영: 웹에서 결제한 Pro/All-Access 멤버십 상태가 익스텐션 사이드 패널 상단에 실시간으로 표시된다.

💡 크롬 웹스토어 등록 및 검수 팁

1. 단일 목적 원칙(Single Purpose Policy) 준수:
   • 확장 프로그램 설명란에 여러 기능을 장황하게 나열하면 구글 검수팀에서 반려된다. “이커머스 리뷰 데이터 수집 및 엑셀 다운로드”라는 명확한 단일 기능만 강조해야 24~48시간 안에 승인된다.
2. 개발자 등록비 5달러 결제:
   • 구글 크롬 웹스토어 개발자 계정 등록비(평생 5달러)를 1회 결제하면 무제한으로 확장 프로그램을 배포할 수 있으며, 크롬 웹스토어 자체 검색을 통한 추가 오가닉 유입 채널이 확보된다.

• 인사이트 요약: 크롬 익스텐션은 웹 서비스를 유저의 브라우저 툴바 최상단에 상시 박아두는 가장 강력한 락인 장치다. 웹 크롤링 차단 문제를 클라이언트 사이드 DOM 파싱으로 우회하고, 클릭 한 번으로 가치를 제공함으로써 일간 활성 사용자 수(DAU)를 극대화하는 발판이 마련되었다.
• 차기 분석 테스크: 리스트 034번 “고객 맞춤형 온디맨드 데이터 크롤링을 위한 헤드리스 브라우저(Playwright) 분산 서버리스 파이프라인 구축법” 정리.

🚀 지금 바로 1인 AI SaaS 창업을 시작하세요!

이 글에서 다룬 모든 아키텍처와 운영 전략이 담긴 마스터북 + 풀스택 보일러플레이트 코드를 지금 확인해보세요.

$0에서 $10k MRR까지의 완벽한 로드맵. 7일 내 환불 보증.