ShopShot

Chrome extension that extracts product images from any shopping site and exports them to Excel.

쇼핑몰 상품 페이지에서 대표 이미지를 자동으로 추출해서 엑셀 파일로 만들어 주는 크롬 확장 프로그램입니다.

---

📦 Installation · 설치 방법

No coding required — just a few clicks in Chrome.

코딩 지식이 없어도 괜찮습니다. 크롬 브라우저에서 클릭 몇 번이면 끝!

Step-by-step · 단계별 안내

① 이 프로젝트를 다운로드합니다

• 이 페이지 상단의 초록색 Code 버튼 → Download ZIP 을 클릭합니다.
• 다운로드된 ZIP 파일의 압축을 풀어 원하는 폴더에 저장합니다.

Download this project. Click the green Code button above, then Download ZIP. Unzip it to any folder.

② 크롬 확장 프로그램 관리 페이지를 엽니다

• 크롬 브라우저 주소창에 아래 주소를 복사·붙여넣기하고 Enter를 누릅니다.

chrome://extensions

Open Chrome and paste chrome://extensions into the address bar.

③ 개발자 모드를 켭니다

• 페이지 오른쪽 위에 있는 개발자 모드(Developer mode) 토글 스위치를 켜짐(파란색)으로 바꿉니다.

Toggle Developer mode ON (top-right of the page).

④ "압축해제된 확장 프로그램을 로드합니다" 버튼을 클릭합니다

• 왼쪽 위에 나타난 압축해제된 확장 프로그램을 로드합니다(Load unpacked) 버튼을 클릭합니다.
• 아까 압축을 풀어 둔 폴더를 선택하면 설치 완료!
• 크롬 툴바(주소창 오른쪽)에 ShopShot 아이콘이 나타납니다. 🎉

Click Load unpacked, then select the unzipped folder. The ShopShot icon will appear in the Chrome toolbar.

---

🚀 Usage · 사용 방법

Just paste URLs and click — images are extracted automatically.

URL을 붙여넣고 버튼만 누르면 이미지가 자동으로 추출됩니다.

Step-by-step · 단계별 안내

① 크롬 툴바에서 ShopShot 아이콘을 클릭합니다

• 주소창 오른쪽 영역에 있는 퍼즐 아이콘(🧩)을 누르면 확장 프로그램 목록이 나옵니다.
• ShopShot 을 찾아 클릭하면 팝업 창이 열립니다.
• (팁) 핀(📌) 아이콘을 누르면 툴바에 항상 표시됩니다.

Click the ShopShot icon in the Chrome toolbar. (Tip: pin it for quick access.)

② 상품 페이지 URL을 입력합니다

• 이미지를 추출하고 싶은 쇼핑몰 상품 페이지의 URL을 복사해서 입력란에 붙여넣기 합니다.
• 여러 개를 한꺼번에 넣을 수 있습니다. 줄바꿈(Enter) 또는 콤마(,)로 구분하면 됩니다.

Paste one or more product page URLs. Separate them with line breaks or commas.

③ 「📸 이미지 추출 시작」 버튼을 클릭합니다

• 버튼을 누르면 각 페이지를 자동으로 방문하면서 상품 이미지를 찾아냅니다.
• 진행 상황이 실시간으로 표시되니 잠시 기다려 주세요.
• 완료되면 각 사이트에서 몇 장의 이미지를 찾았는지 결과가 표시됩니다.

Click 📸 이미지 추출 시작. Progress is shown in real time. Wait for the results.

④ 「📊 엑셀 다운로드」 버튼을 클릭합니다

• 추출된 이미지들이 엑셀(.xlsx) 파일에 그림으로 삽입되어 다운로드됩니다.
• 파일을 열면 각 행에 상품명과 이미지가 정리되어 있습니다.
• 다른 상품을 추출하려면 🔄 새로 캡쳐 버튼을 눌러 처음부터 다시 시작할 수 있습니다.

Click 📊 엑셀 다운로드 to download an Excel file with embedded images. Click 🔄 새로 캡쳐 to start over.

---

🌐 Supported Sites · 지원 사이트

Works on most e-commerce sites. Below are tested examples.

대부분의 쇼핑몰에서 동작합니다. 아래는 테스트 완료된 사이트 예시입니다.

Site · 사이트	Examples · 예시
Amazon	amazon.com, amazon.co.jp, amazon.co.uk
Naver	brand.naver.com, smartstore.naver.com
Shopify stores	us.sulwhasoo.com, kyliecosmetics.com
Sephora	sephora.com
Lazada	lazada.sg, lazada.co.th
Nykaa / Tira	nykaa.com, tirabeauty.com
Others · 기타	Swiper/Carousel 구조를 사용하는 쇼핑몰 전반

---

✨ Features · 주요 기능

What ShopShot can do.

ShopShot이 할 수 있는 것들.

• 🔍 자동 갤러리 감지 · Universal Detection — 아마존, 쇼피파이, 네이버, 세포라 등 다양한 쇼핑몰의 상품 이미지 영역을 자동으로 찾아냅니다.

• 📐 고해상도 변환 · High-res Conversion — 작은 썸네일 URL을 자동으로 원본 고화질 이미지 URL로 변환합니다.

• 🏷️ 브랜드/상품명 추출 · Product Info Extraction — 페이지의 구조화 데이터(JSON-LD, Open Graph)와 HTML에서 브랜드명과 상품명을 자동 추출합니다.

• 📊 엑셀 내보내기 · Excel Export — 이미지가 셀 안에 삽입된 .xlsx 파일을 생성합니다. 별도 프로그램 설치가 필요 없습니다.

• 🧩 모듈식 감지 엔진 · Modular Detection Engine — 전략 패턴(Strategy Pattern) 구조로 새로운 사이트를 쉽게 추가할 수 있습니다.

---

🗂️ Project Structure · 프로젝트 구조

For developers who want to understand or extend the code.

코드를 이해하거나 확장하고 싶은 개발자를 위한 안내입니다.

shopshot/
├── manifest.json                 # 크롬 확장 프로그램 설정
├── background/
│   └── background.js             # 백그라운드 서비스 워커
├── content/
│   └── content.js                # 콘텐츠 스크립트 (메시지 핸들러)
├── popup/
│   ├── index.html                # 팝업 UI
│   └── popup.js                  # 팝업 로직 (캡쳐, 엑셀 생성)
├── lib/
│   ├── exceljs.min.js            # ExcelJS 라이브러리
│   └── detection/                # 이미지 감지 엔진
│       ├── index.js              # 전략 오케스트레이터
│       ├── strategies/
│       │   ├── naver-gallery.js  # 네이버 브랜드스토어 감지
│       │   ├── direct-gallery.js # CSS 패턴 기반 갤러리 감지
│       │   ├── scored-gallery.js # 점수 기반 갤러리 감지
│       │   └── ancestor-traversal.js  # DOM 트리 순회
│       └── utils/
│           ├── image-url.js      # URL 추출 및 검증
│           ├── high-res.js       # 고해상도 URL 변환
│           ├── dom-helpers.js    # 갤러리/제외 영역 분류
│           └── product-info.js   # 브랜드/상품명 추출
├── icons/                        # 확장 프로그램 아이콘
└── docs/                         # 문서용 이미지

---

🔧 For Developers · 개발자 가이드

Adding a New Detection Strategy · 새 감지 전략 추가

Create a strategy file, register it, and add to manifest.

전략 파일을 만들고 등록한 뒤 manifest에 추가하면 됩니다.

1. lib/detection/strategies/ 에 새 파일을 만듭니다.
2. window.ShopShot.strategies 배열에 전략 객체를 추가합니다:

window.ShopShot.strategies.push({
  name: 'my-strategy',
  priority: 80,  // 높을수록 먼저 실행
  detect(allImages) {
    // { images: string[], method: string } 또는 null 반환
    return null;
  }
});

3. manifest.json 의 content_scripts.js 배열에 파일 경로를 추가합니다 (lib/detection/index.js 앞에).

Adding a New High-Res Transform Rule · 새 고해상도 변환 규칙 추가

Edit the SITE_RULES array in high-res.js.

high-res.js 의 SITE_RULES 배열에 새 항목을 추가합니다.

{
  name: 'my-site',
  match: url => url.includes('mysite.com'),
  transform: url => url.replace(/\/small\//, '/large/')
}

---

📄 License · 라이선스

MIT