프론트엔드/크롬확장 크롬 확장 보안 강화: CSP와 최소 권한 원칙 크롬 확장은 강력한 권한을 가지므로 보안이 중요합니다. CSP로 인라인 스크립트와 동적 코드 실행을 차단하고, 불필요한 권한과 리소스 노출을 제거하여 공격 표면을 최소화했습니다.
프론트엔드/크롬확장 Chrome Alarms API로 자동 잠금 타이머 구현하기 Service Worker가 종료되면 setTimeout도 사라집니다. chrome.alarms API로 Service Worker 수명과 독립적인 자동 잠금 타이머를 구현했습니다.
프론트엔드/크롬확장 크롬 확장 다국어(i18n) 구현하기: 런타임 언어 전환까지 크롬 확장에서 다국어를 지원하려면 Chrome i18n API만으로는 부족합니다. 런타임 언어 전환, 선언적 번역 적용, 여러 페이지 동기화까지 지원하는 커스텀 i18n 모듈을 구현했습니다.
프론트엔드/크롬확장 Chrome Storage로 실시간 상태 동기화 구현하기 popup에서 잠금 해제했는데 options 페이지는 여전히 잠금 화면? chrome.storage.onChanged 이벤트로 여러 페이지 간 상태를 실시간 동기화하는 패턴을 정리했습니다.
프론트엔드/크롬확장 크롬 확장 공유 모듈 설계: 중복 코드 450줄 제거기 popup, options, manager, onboarding 4개 페이지에 복사된 동일한 코드를 발견했습니다. shared/ 폴더에 기능별 모듈로 추출하여 총 215줄을 줄이고, DOM 메서드로 XSS를 방지하는 아이콘 팩토리까지 구현한 과정을 공유합니다.
프론트엔드/크롬확장 크롬 확장 프로젝트 구조 정리하기: popup, options 폴더 분리 크롬 확장 루트 디렉토리에 뒤섞인 파일들을 기능별 폴더로 정리했습니다. manifest.json 경로 업데이트, git mv로 히스토리 보존, 트러블슈팅 팁까지 리팩토링 전 과정을 공유합니다.
프론트엔드/크롬확장 Web Crypto API로 안전한 해싱 구현하기: SHA-256에서 PBKDF2까지 단순 SHA-256 해싱의 보안 한계를 분석하고, Web Crypto API의 PBKDF2로 업그레이드하는 방법을 다룹니다. Timing Attack 방어를 위한 constant-time 비교와 클라이언트 Rate Limiting 패턴까지 실제 코드와 함께 설명합니다.
프론트엔드/크롬확장 JavaScript URL 비교와 정규화: 같은 페이지인데 다른 URL? 같은 페이지인데 URL 비교가 false? Fragment, trailing slash, query parameter 순서 차이로 인한 문제와 URL 정규화 해결책을 코드 예시와 함께 설명합니다.