← 전체 글
제품 업데이트 5분 읽기

Chrome 확장 프로그램 (Beta): 모든 페이지의 request를 API 호출로 변환

Beta 버전으로 출시된 FourA Chrome 확장 프로그램은 페이지 데이터를 담고 있는 request를 찾아 header와 cookie를 포함한 FourA 호출 코드(curl, Python, Node, MCP)로 복사합니다.

chrome-extensiondevtoolsapiproxy-portplayground

새로운 기능

익숙한 작업 흐름이 있습니다. DevTools를 열고, 새로고침한 뒤, 원하는 가격 데이터가 포함된 request를 찾을 때까지 수십 개를 스크롤하고, 우클릭 후 Copy as cURL을 선택합니다. 그 후 진짜 작업이 시작됩니다. Chrome 내부에서만 의미 있는 header를 제거하고, 자체 클라이언트에 맞게 다시 작성한 다음, 브라우저 외부에서 보냈을 때도 여전히 응답하는지 확인해야 합니다.

현재 베타 버전인 FourA Chrome 확장 프로그램은 이 과정을 단 몇 번의 클릭으로 줄여줍니다. Network 탭 옆에 FourA 탭을 추가하여 페이지의 request를 나열하고, 화면에 보이는 텍스트가 포함된 request를 찾아내며, 이를 Single, Proxy Finder 또는 Browser를 호출하는 완성된 curl, Python, Node, MCP 코드로 복사해 줍니다. 동일한 확장 프로그램의 팝업을 통해 Chrome 트래픽 자체를 proxy port 사용자 중 하나로 라우팅할 수도 있습니다.

아직 Chrome Web Store에는 등록되지 않았습니다. Dashboard의 Tools 메뉴에서 다운로드한 후 개발자 모드(Chrome 116 이상 버전)로 로드하면 됩니다. 확장 프로그램은 무료입니다. 터널을 통과하는 트래픽은 플랜의 proxy 할당량에서 차감되며, DevTools에서 실행하는 호출에는 API 표준 요금이 적용됩니다.

작동 방식

데이터를 수집하려는 페이지에서 DevTools를 열고 FourA 탭을 선택합니다. 새로고침하면 Network 탭처럼 request가 나열됩니다. 광고와 애널리틱스는 기본적으로 숨겨지며, This site only 스위치로 해당 페이지 자체의 request만 필터링할 수 있습니다. Find in responses에 가격, 상품명 또는 눈에 보이는 텍스트를 입력하면 해당 내용이 response에 포함된 request를 찾아줍니다. 이를 통해 페이지가 직접 호출 가능한 JSON endpoint를 기반으로 렌더링되고 있음을 바로 확인하는 경우가 많습니다.

request를 선택하고, FourA call 아래에서 엔진을 선택한 뒤 복사하십시오. 다음은 쇼핑몰 페이지의 JSON request에 대한 curl 예시입니다(축약된 형태이며, 실제 복사 시에는 페이지가 전송한 모든 header가 포함됩니다).

curl https://api.foura.ai/api/single \
  -H 'X-API-Key: YOUR_API_KEY' \
  -H 'Content-Type: application/json' \
  -d '{
  "method": "GET",
  "url": "https://shop.example.com/api/products?category=coffee&page=2",
  "headers": [
    ["accept", "application/json"],
    ["referer", "https://shop.example.com/coffee"],
    ["accept-language", "en-GB,en;q=0.9"]
  ],
  "browser": "Chrome",
  "os": "macOS",
  "unblocker": true
}'

해당 호출에는 세 가지 의도된 설정이 포함되어 있습니다. 헤더는 페이지가 전송한 순서 그대로 쌍(pair) 목록 형태로 전달되며, 이는 Single이 요구하는 형식입니다. Chrome 자체 연결을 위해 작성하는 헤더(host, content-length, accept-encoding, connection 등)는 제외됩니다. 이를 그대로 복사하면 다음에 호출을 보내는 클라이언트가 동작하지 않기 때문입니다. 그리고 browser 및 os는 현재 사용 중인 Chrome과 일치하는 browser profile을 요청합니다. 버전은 의도적으로 생략되었습니다. 지원하지 않는 버전으로 인해 거부되는 대신, 당사가 제공하는 최신 버전을 적용하기 위함입니다.

MCP 형식은 툴 이름(foura_single) 뒤에 동일한 JSON이 이어지는 구조로, 당사의 MCP server와 통신하는 에이전트에 바로 전달할 수 있습니다.

그 아래에는 두 개의 버튼이 있습니다. Open in the playground는 사용자의 키가 확인되면 해당 키를 선택한 상태로 Dashboard Playground에 호출을 로드합니다. Run through FourA는 호출을 전송한 뒤 "The browser got"과 "FourA got"을 나란히 표시하여, 코드를 작성하기 전에 당사의 응답이 페이지의 응답과 일치하는지 확인할 수 있도록 합니다.

영향

수동 방식은 이미 잘 알려져 있습니다. ScrapingBee의 튜토리얼만 보더라도 Chrome에서 cURL을 추출하는 데만 5단계가 필요하며, 복사본에는 브라우저가 보낸 모든 헤더와 쿠키가 포함된다고 명시되어 있습니다. 대부분의 스크래퍼가 여기서 시작합니다. 하지만 이는 작업의 절반에 불과합니다. 해당 복사본은 요청이 다른 곳이 아닌 오직 사용자의 브라우저에서만 작동함을 증명할 뿐입니다.

FourA 탭은 이 두 과정을 한곳에서 처리합니다. URL을 추측하는 대신 반환된 데이터를 기준으로 요청을 찾을 수 있고, API가 요구하는 형식의 호출을 얻을 수 있으며, 클릭 한 번으로 당사 환경에서도 작동하는지 확인할 수 있습니다. 이는 URL만으로는 내용을 알 수 없는 요청을 통해 데이터가 전송되는 페이지에서 가장 큰 효과를 발휘합니다.

절약된 시간에 대한 구체적인 수치는 아직 없습니다. 베타 단계이므로, 실제 가치는 다음 작업에서 직접 확인하실 수 있습니다.

고급 사용자를 위한 기능

엔진을 Proxy Finder로 전환하면 패널이 동일한 요청을 래핑하고 Exit country를 선택할 수 있는 옵션을 제공합니다.

{
  "request": {
    "method": "GET",
    "url": "https://shop.example.com/api/products?category=coffee&page=2",
    "headers": [["accept", "application/json"]],
    "unblocker": true
  },
  "exitCountries": ["DE"]
}

exitCountries는 엄격한 허용 목록입니다. request는 다른 국가로 폴백되지 않으며, 응답을 처리한 국가는 exitCountry로 반환됩니다. 플랜 기능이므로 국가 타겟팅이 없는 플랜은 해당 내용이 명시된 거부 응답을 반환합니다.

Browser는 request를 보내는 대신 페이지를 열기 때문에 형태가 다릅니다. header를 객체로 받고, 페이지의 Cookie header를 호스트 범위의 cookie 목록으로 변환하며, 엔진 자체 헤더를 전송하므로 user-agent 및 client-hint header는 제외합니다(프로필 옵션을 켜면 이 창의 User-Agent를 대신 전송). 본문이 없는 GET 요청만 재생합니다. 검색 폼의 POST는 Single에서 처리해야 하며, 여기서 JSON 본문은 객체로 전달되고 그 외의 모든 것은 페이지가 보낸 원본 문자열 그대로 전달됩니다.

request를 우클릭하면 동일한 복사 옵션 외에 Copy URL 및 Copy response를 사용할 수 있습니다. 실행에 필요한 API key는 탭의 Settings에 저장되며 Keep the key on this computer를 선택하지 않는 한 Chrome이 닫힐 때까지 유지됩니다.

한 가지 주의 사항이 있습니다. cookie와 함께 복사된 호출은 로그인된 세션을 그대로 재생합니다. 비밀번호처럼 취급하고 티켓, 채팅, 공개 저장소에 노출되지 않도록 하십시오.

팝업 부분도 짚고 넘어갈 필요가 있습니다. 설정에서 주소를 읽는 대신 터널을 통해 사이트에 표시되는 주소를 직접 측정하며, 해당 주소가 사용자의 주소와 같으면 Not routed로 표시됩니다. 아이콘이 숫자와 함께 빨간색으로 바뀌면 proxy가 지난 1분 동안 해당 횟수만큼 연결을 거부했음을 의미하며, 팝업에서 그 이유를 알려줍니다. Location 페이지 뒤의 username options는 proxy 포트 문서에 나온 것과 동일합니다.

What's Next

이 확장 프로그램은 완성형으로 판단될 때까지 Dashboard에서 설치하는 베타 상태로 유지되며, Chrome Web Store 등록 일정은 정해두지 않았습니다. Chrome은 빌드 및 테스트를 지원하는 유일한 브라우저입니다. setup guide는 현재 제공되는 기능을 설명하며, 향후 변경 사항은 FourA 탭을 실제 작업에 적용할 때 어떤 문제를 마주하는지에 따라 결정됩니다.

그러니 다음번에 페이지 파싱이 까다롭다면 HTML을 열기 전에 DevTools를 먼저 여십시오. 가장 비용 효율적인 스크래퍼는 페이지가 이미 보낸 request를 그대로 호출하는 스크래퍼인 경우가 많습니다.