I Built a Reader Mode Extension for Chrome Because It Still Doesn't Have One

Context

Chrome은 Safari, Firefox와 달리 안정적인 내장 리더 모드가 없으며, chrome://flags의 실험 기능만 존재해 신뢰할 수 없는 상태였다. 사용자들은 긴 아티클을 읽을 때 사이드바 광고, 네비게이션 메뉴, 뉴스레터 팝업, 추천 콘텐츠 위젯에 묻혀 본문만 추출하기 어려웠다.

Technical Solution

• Readability.js를 선택: Mozilla의 @mozilla/readability 라이브러리를 도입해 DOM 구조 분석으로 본문 콘텐츠 자동 추출
• 문서 클론 처리: doc.cloneNode(true)로 원본 문서 보호하고 추출 중 DOM 변경 격리
• DOMPurify 샌드박싱: 추출된 HTML에서 script, style, iframe, 이벤트 핸들러 제거해 XSS 방지
• 사이트별 규칙 시스템: Medium, Wikipedia, NYTimes, ArsTechnica 등 주요 사이트에 contentSelector, titleSelector, authorSelector, preRemove 정의로 추출 정확도 향상
• 읽기 시간 계산: 영문 성인 평균 독서 속도 265단어/분을 기준으로 예상 읽기 시간 산출
• 바이오닉 리딩(Focus Bold): 각 단어의 초반부를 굵게 표시해 시각적 고정점 생성
• Web Speech API 활용: 텍스트 음성 변환 기능 구현 및 URL, 코드, 특수문자 사전 처리
• 접근성 기능: 난독증 폰트, 색상 오버레이 제공
• z-index 최대값 활용: 웹사이트 팝업을 덮기 위해 z-index 최댓값 사용

Key Takeaway

사이트별 DOM 구조가 다양할 때 제네릭 휴리스틱만으로는 90% 추출만 가능하므로, 주요 사이트에 대한 선택자 기반 규칙 시스템이 필수다. Web Speech API 같은 표준 기능도 14초 상한선 버그 같은 구현 결함이 있으므로 텍스트 전처리 같은 우회책이 필요하고, 초기에 부수 기능으로 취급한 접근성 요소(난독증 폰트, 색상 오버레이)가 사용자 경험에 실질적 영향을 미친다.