[크롬 익스텐션]쿠팡에서 상품 정보 긁어오기

크롬 익스텐션을 만들면서 가장 머리가 아픈 부분은 다른 사람이 이미 만들어놓은 (정보가 부족한) 웹사이트를 뜯어보며 침투해야하는 점이다. 예전에 selenium으로 크롤링했던 능력을 살려서 🤔 웹 구조 본격 분석.. (눈이 침침해지는 기분이었다.)
식품 카테고리에 포함되어있으면 이 식품에 대한 정보를 이용해야하는 구조라서 꼭 필요한 로직이었다. 

👀 식품 카테고리 찾기 

일단 카테고리를 먼저 찾아야 하니 하나하나 뜯어보다 breadcrumb ul요소 안에 li 안에 a에 class breadcrumb-link라는 클래스를 가진 형태로 있는 것 같았다.

            const breadcrumbLinks = document.querySelectorAll(
                "#breadcrumb a.breadcrumb-link",
            );

            const matchedCategories = Array.from(breadcrumbLinks)
                .map((a) => a.textContent.trim())
                .filter((text) => text.includes("식품"));

            const hasFoodCategory = matchedCategories.length > 0;

1. #breadcrumb a.breadcrumb-link를 모두 가져옴 = 카테고리 전부 가져옴.
2. 각 카테고리 텍스트를 추출해서 trim() 처리 → 홈, 식품과 같은 글자들만 추려냄.
3. includes("식품")으로 필터링함. 식품이 포함되어있으면 식품 관련 제품으로 인식함. 
 

🔍 식품 이름 , ID 찾기 

식품 이름(Product name)은 메인 콘텐츠 안에 H1 prod-buy-header_title클래스에 있다.

 const titleEl = document.querySelector("h1.prod-buy-header__title");
 const productTitle = titleEl ? titleEl.textContent.trim() : null;

그래서 식품 이름을 카테고리 찾아내는 것처럼 document.querySelector을 이용해서 찾아낸 다음 trim()을 해 상품 이름을 추출한다. 

식품 ID(Product ID)는 url에 포함되어있다. 

 const url = window.location.href;
 const productIdMatch = url.match(/products\/(\d+)/);
 const productId = productIdMatch ? productIdMatch[1] : null;

그래서 현재의 url을 파악하고 products/숫자 부분을 찾아서 상품 ID를 추출한다. 

🔮 쿠팡 정보 가져올 때 고려할 점

이렇게 보면 상품 정보를 뽑아내는 건 간단해 보이는데, 쿠팡 페이지는 SPA 형식으로 구성되어 있어 DOM이 바로 갱신되지 않는다는 점을 유의하며 개발해야한다. 그래서 setTimeout()을 세팅해두고 500ms 정도 기다리면 쿠팡의 JS가 DOM을 갱신할 시간을 주는 것이다. 
또한 manifest.json에 cotent_scripts를 추가해줘야한다. 

"content_scripts": [
        {
            "matches": ["https://*.coupang.com/*"],
            "js": ["js/contentScript.js"],
            "run_at": "document_idle"
        }
    ],

1. matches
 : 이 확장 프로그램을 주입할 웹사이트 URL 패턴을 지정
2. js
 : 주입할 JavaScript 파일의 경로
3. run_at ⭐️
 : 스크립트를 언제 실행할지를 결정하는 옵션
- document_start : HTML이 로드되기 전(ex.쿠팡 사이트가 렌더링 되기 전)
- document_end : DOMContentLoaded 직후 (DOM은 완성, 리소스는 아직) -> 쿠팡은 이때 모든 정보 로드 ❌
-✅ document_idle : 브라우저가 페이지를 거의 다 로드 했을 때 -> 그래서 이때 정보를 가져와야 함 👍
 
따라서 , 동적으로 정보를 로드하는 쿠팡 사이트의 정보를 가져오기 위해 다양한 경우를 고려해야 했다. 

지금은 상품명과 ID 매우 잘나오는 상태 🥇