피드로 돌아가기
GeekNewsFrontend
원문 읽기
Show GN: X에서 외국어 글, 매번 "번역 보기" 안 눌러도 되게 만든 크롬 확장 (오픈소스)
MutationObserver 기반 X 자체 번역 자동화 및 제로 데이터 전송 설계
AI 요약
Context
사용자가 외국어 포스트 확인 시 매번 '번역 보기' 버튼을 수동 클릭해야 하는 UX 병목 발생. 외부 번역 API 사용 시 데이터 유출 위험 및 X 플랫폼 고유 번역 결과와의 불일치라는 Trade-off 존재.
Technical Solution
- MutationObserver를 통한 DOM 변화 실시간 감지 및 번역 버튼 자동 클릭 로직 구현
- 46개 인터페이스 언어별 버튼 라벨 매핑 데이터를 통한 다국어 UI 대응 구조 설계
- Tweet ID 기반 처리 이력 관리로 중복 클릭 방지 및 불필요한 리소스 낭비 차단
- '원문 보기' 버튼 클릭 제외 로직을 통한 무한 토글 루프 방지 및 상태 안정성 확보
- host_permissions 제거 및 storage 권한 한정 설계를 통한 Zero-network 데이터 보안 아키텍처 달성
- X 자체 번역 엔진(Grok) 호출 방식을 채택하여 외부 서버 전송 없이 프라이버시 강화
실천 포인트
- DOM 기반 자동화 설계 시 상태 저장소(ID 기반)를 활용하여 무한 루프 및 중복 실행 방지책 마련 - 최소 권한 원칙(Principle of Least Privilege)에 따라 host_permissions를 배제한 보안 설계 검토 - 다국어 UI 대응을 위해 하드코딩 대신 인터페이스 언어별 매핑 테이블 구조 활용