피드로 돌아가기
I Built a Privacy-First Chrome Extension That Saves Your Forms Locally — Zero Network Requests
Dev.toDev.to
Frontend

Zero Network Request 기반의 Local-first Form Persistence 설계

I Built a Privacy-First Chrome Extension That Saves Your Forms Locally — Zero Network Requests

Jude Hilgendorf2026년 5월 1일5분intermediate

AI 요약

Context

기존 Form Saver 확장 프로그램들이 Cloud Sync 및 Analytics를 통해 사용자 데이터를 외부 서버로 전송하는 Privacy Leak 문제 발생. 특히 React 등 Modern Framework의 State Management 체계로 인해 단순 DOM 조작만으로는 입력값 복원이 불가능한 기술적 제약 존재.

Technical Solution

  • React의 Synthetic Event 시스템을 우회하기 위해 HTMLInputElement.prototype에서 Native Value Setter를 직접 추출하여 호출하는 구조 설계
  • Native Setter 호출 후 input, change, blur 이벤트를 순차적으로 Dispatch 하여 Framework 내부 State와 DOM 간의 동기화 강제 구현
  • SPA 환경의 동적 렌더링 대응을 위해 ID, Name, XPath 순의 3단계 Fallback 매커니즘을 통한 Field Identification 전략 수립
  • Shadow DOM을 통한 UI Injection으로 Host Page의 CSS Style Collision을 원천 차단한 격리 구조 채택
  • Input Type, Autocomplete 속성, Regex 기반 필드 분석 및 Domain Blocklist를 결합한 다중 신호 기반의 Sensitive Data 필터링 로직 적용
  • Manifest V3 기반의 최소 권한 설계를 통해 외부 Host Permission 요청을 제거한 Zero-Telemetry 아키텍처 구현

실천 포인트

1. Framework-controlled Input 제어 시 Native Prototype Setter 호출과 Event Dispatch 조합 검토

2. 동적 DOM 요소 식별 시 단일 ID 의존도를 낮추고 다중 식별자 Fallback 전략 수립

3. 민감 정보 필터링 설계 시 속성 기반 탐지와 정규식 기반 탐지를 결합한 Multi-signal 검증 체계 도입

태그

#Shadow DOM#Privacy-first#Manifest V3#Local Storage#Synthetic Event
원문 읽기