Selector Forge: 탄력적인 CSS 및 XPath 선택자를 위한 AI 기반 브라우저 확장 프로그램

Selector Forge: 탄력적인 CSS 및 XPath 선택자를 위한 AI 기반 브라우저 확장 프로그램

Selector Forge는 AI를 사용해 후보를 제안하고 실시간 브라우저 DOM를 통해 검증함으로써 웹 선택자의 취약성을 없애기 위해 설계된 브라우저 확장 프로그램입니다. 엔드‑투‑엔드 테스트, 웹 스크래퍼, 페이지 자동화를 위한 강력한 CSS 및 XPath 선택자를 개발자에게 제공하며, 생성된 선택자가 사용자에게 전달되기 전에 올바르게 해결되는지 확인합니다.

검증된 AI‑구동 선택자 생성

Selector Forge는 브라우저를 절대적인 진실의 원천으로 취급하여 선택자의 신뢰성을 보장합니다. AI가 잠재적인 선택자를 제안하고 순위를 매기지만, 최종 정확성에 대한 최종 판단은 하지 않으며 모든 후보는 실시간 DOM에 대해 다시 검증됩니다.

검증 루프

  1. 요소 선택: 사용자가 실시간 페이지에서 하나 이상의 요소를 선택합니다.
  2. 컨텍스트 캡처: 확장 프로그램이 선택된 대상, DOM 컨텍스트 및 시드 후보를 포함한 스냅샷을 캡처합니다.
  3. AI 제안: Intuned 백엔드가 후보 선택자를 제안하고 순위를 매깁니다.
  4. 실시간 테스트: 확장 프로그램이 모든 후보를 실시간 DOM에 대해 테스트하고 결과를 백엔드에 다시 전달합니다.
  5. 반복: 검증된 승자가 식별될 때까지 이 루프가 반복됩니다.
  6. 전달: 재검증된 선택자만 사용자가 복사할 수 있도록 제공됩니다.

신뢰 경계

높은 신뢰성을 유지하기 위해 도구는 엄격한 신뢰 경계를 구현합니다:

  • 세션 상태: 확장 프로그램이 선택자 생성 세션 상태를 관리합니다.
  • 필수 검증: 모든 결과에 대해 브라우저 DOM에 대한 재검증이 필요합니다.
  • 목록 검증: 목록 기반 선택의 경우, 시스템이 전체 의도된 집합을 확인하여 과다 매치 또는 부족 매치되는 선택자를 거부합니다.

선택 모드

Selector Forge는 다양한 웹 요소를 처리하기 위해 두 가지 주요 모드를 제공합니다:

모드 사용자 동작 결과
Single 하나의 요소 선택 버튼, 입력, 링크 또는 레이블과 같은 특정 대상에 대한 검증된 선택자.
List 반복 집합에서 두 개의 예시 선택 전체 집합에 대한 검증된 컨테이너 선택자, 저장 전 미리보기가 제공됩니다.

기술 아키텍처 및 개발

WXT와 React를 사용해 구축된 Selector Forge는 Chrome 및 Firefox와 호환되는 Manifest V3 (MV3) 확장 프로그램입니다.

프로젝트 구조

  • entrypoints/: 백그라운드 서비스 워커(세션 상태 및 네트워크 I/O), 콘텐츠 스크립트(픽커 오버레이 및 DOM 접근), React 기반 팝업을 포함합니다.
  • lib/: 에이전트 루프 컨트롤러, 메시징 프로토콜, 세션 상태 관리 및 GraphQL 쿼리를 보관합니다.
  • tests/: 단위 테스트(Vitest), DOM 정확성을 위한 브라우저 모드 테스트, E2E 테스트(Playwright)를 포함한 다계층 테스트 전략을 구현합니다.

개발자 도구

개발자는 yarn dev를 사용해 감시 모드 빌드를 실행하고, yarn ladle을 통해 Ladle로 팝업 컴포넌트를 격리된 상태에서 미리볼 수 있습니다. Ladle은 WXT browser 전역에 대한 무동작(stub) 구현을 사용합니다.

향후 로드맵

프로젝트는 독립형 확장 프로그램에서 보다 통합된 자동화 도구로 확장하는 것을 목표로 합니다:

  • CLI 및 IDE 통합: Intuned CLI를 통해 확장 프로그램을 구동하여 로컬 에이전트와 MCP(Model Context Protocol) 노출을 지원합니다.
  • 스마트 픽커: 요소를 그룹화하는 multiple 모드와 AI 기반 필드 감지를 통해 페이지 이름 및 선택자를 자동으로 제안합니다.
  • 정밀도 개선: XPath/DOM 트리를 탐색해 보다 정밀한 타깃팅을 가능하게 하는 드릴‑다운 모드(예: 자식 span에서 부모 컨테이너로 이동).
  • 셀프‑호스팅 백엔드: 전체 선택자 생성 루프를 사용자의 인프라에서 실행할 수 있도록 하는 참고 백엔드 및 오픈소스 에이전트를 계획 중입니다.
  • 확장 지원: 향후 업데이트에서는 Playwright/JavaScript 내보내기 옵션, 자동 페이지네이션 감지, shadow‑DOM 및 교차 iframe 요소 지원을 포함할 예정입니다.

SUMMARY: Selector Forge는 Chrome 및 Firefox용 브라우저 확장 프로그램으로, AI를 활용해 웹 스크래핑 및 엔드‑투‑엔드 테스트에 적합한 탄력적인 CSS 및 XPath 선택자를 생성하고 검증합니다.

TITLE: Selector Forge: 탄력적인 CSS 및 XPath 선택자를 위한 AI 기반 브라우저 확장 프로그램

Sources