브라우저 확장으로 웹 UI를 개인화하는 법

Scope

핵심 질문

브라우저 확장으로 특정 사이트의 불필요한 UI를 숨기거나 동작을 바꿀 때 어떤 구조와 안정성 문제를 고려해야 하는가?

Research

핵심 근거

content script는 허용된 페이지 DOM을 읽고 수정할 수 있다.
CSS selector에 지나치게 의존하면 사이트 UI 변경 시 쉽게 깨진다.
설정 동기화에는 browser storage sync API 등을 사용할 수 있다.

Draft

브라우저 확장은 서버를 바꾸지 않고 사용자의 browser에서 페이지 DOM과 CSS를 수정해 UI를 개인화할 수 있다.

가장 단순한 방식

Content script에서 특정 selector를 찾아 display:none 같은 CSS를 적용한다. 한 사이트의 UI만 바꾼다면 전체 사이트 권한 대신 해당 host에 한정된 match pattern이나 사용자가 실행할 때만 허용하는 activeTab을 우선한다. 광고가 아니라 개인적으로 불필요한 sidebar, recommendation panel을 숨기는 데 사용할 수 있다. 페이지 DOM은 신뢰할 수 없는 입력이므로 그 텍스트를 권한 있는 확장 기능의 명령으로 해석하지 않는다.

깨지기 쉬운 이유

웹사이트가 class name이나 DOM 구조를 바꾸면 selector가 더 이상 맞지 않는다. 자동 생성 class보다 의미 있는 attribute나 비교적 안정적인 구조를 우선하는 편이 좋다.

설정

사이트별 rule과 on/off 상태처럼 민감하지 않은 설정만 extension storage에 저장하고 필요한 경우 여러 기기에서 sync할 수 있다. 방문 페이지 원문, 계정 토큰이나 credential은 storage.sync에 보관하지 않으며 content script의 접근 범위도 제한한다.

성능

MutationObserver로 동적 페이지를 감시할 때 전체 DOM을 반복 scan하면 비용이 커질 수 있다. 필요한 subtree만 관찰한다.

핵심

웹 UI 개인화 확장의 품질은 CSS 기술보다 사이트 변화에 얼마나 견고하게 rule을 설계하고 설정을 동기화하는지에 달려 있다.