기다리다 지쳐 Chrome용 프라이버시 중심 JSON 뷰어를 만들었다.
Source: Dev.to
몇 달 전, 많은 개발자들처럼 저도 몇 년 동안 사용해 오던 JSON 뷰어 확장 프로그램에 뭔가 이상함을 느꼈습니다.
조용히 업데이트가 되었고, 코드는 폐쇄형으로 바뀌었습니다. 기부 팝업이 전혀 관련 없는 페이지에까지 나타났으며, 일부 보고서에 따르면 사용자의 결제 페이지에도 나타났다고 합니다. 유지보수자는 떠났고, 새로운 소유자는 “JSON 보기”보다 다른 우선순위를 가지고 있었습니다.
그래서 확장 프로그램을 삭제했습니다. 그리고 대체품을 찾아보았습니다.
찾은 대체 옵션들은 각각 문제가 있었습니다. 어떤 것은 현재 탭에만 접근하면 충분한 작업을 위해 불필요하게 많은 권한을 요구했고, 어떤 것은 3년째 업데이트가 없어서 5 MB가 넘는 JSON 파일을 열면 바로 멈춰 버렸으며, 또 어떤 것은 조용히 “텔레메트리”용으로 데이터를 외부에 전송했습니다.
그래서 직접 만들기로 했습니다. 예상보다 시간이 더 걸렸지만, 배운 점을 정리해 보겠습니다.
“믿어줘, 형제” 같은 프라이버시가 아니라, 매니페스트를 읽어 직접 확인할 수 있는 프라이버시를 원했습니다.
전체 제품은 세 가지 권한만으로 구성됩니다.
activeTab— 사용자가 툴바 아이콘을 명시적으로 클릭했을 때만scripting— 현재 탭에 뷰어를 주입하기 위해storage— 사용자의 라이트/다크 테마 선호도만을 기억하기 위해 (그 외는 전혀 저장하지 않음)
그게 전부입니다. tabs, cookies, webRequest, 백그라운드 페이지 등은 전혀 사용하지 않습니다. Chrome의 권한 모델 때문에 사용자가 동작을 취하지 않은 페이지를 확장 프로그램이 읽을 수 없습니다.
또한 모든 의존성을 직접 vendoring했습니다. 사용된 서드파티 코드는 js-yaml 하나뿐이며(MIT 라이선스, 수정 없이 /vendor에 복사), CDN 로드, eval(), new Function(), 원격 스크립트도 전혀 없습니다. 설치한 그대로가 실행됩니다. grep -r "fetch\|XMLHttpRequest" . 로 확인해도 아무것도 나오지 않습니다.
대부분의 JSON 뷰어 확장 프로그램은 동기식 DOM 조작으로 트리를 렌더링합니다. 10 MB JSON 파일을 열면 탭이 30초 이상 멈추어 버려 사용자는 브라우저가 크래시된 것으로 착각합니다.
저는 17 000개의 레코드가 들어 있는 10 MB 테스트 파일로 실험했는데, 처음 만든 뷰어는 탭을 22초 동안 멈추게 했습니다. 이는 받아들일 수 없었습니다.
해결책은 lazy rendering이었습니다. 최상위 구조는 바로 렌더링하고, 하위 노드는 사용자가 노드를 펼칠 때 비로소 렌더링합니다. 작은 진행 바가 파싱·초기 렌더링 비율을 표시해 사용자가 확장 프로그램이 살아 있음을 알 수 있게 했습니다.
렌더링 코드를 두 번이나 다시 작성해야 제대로 동작했습니다. 핵심은 JSON을 “그릴 트리”가 아니라 “탐색할 트리”로 취급하는 것이었습니다. 17 000개의 레코드를 한 번에 그릴 필요는 없고, 클릭했을 때 하나씩 그릴 준비만 하면 됩니다.
Kubernetes 설정 파일을 디버깅해 본 적이 있다면, 들여쓰기된 YAML 400줄을 스크롤하는 것이 얼마나 고통스러운지 알 겁니다.
그 다음으로 js-yaml을 이용해 YAML 지원을 추가했습니다. 이제 Kubernetes 매니페스트, GitHub Actions 워크플로, Docker Compose 파일 등 text/yaml로 제공되는 모든 파일이 접을 수 있는 트리 형태로 표시됩니다.
그 뒤에는 브라우저 내장 DOMParser를 사용해 XML을 지원했습니다. 로컬 XML 파일도 Chrome 내장 파일 뷰어를 통해 정상적으로 동작합니다—이 과정은 꽤 재미있는 탐험이었습니다.
예전 JSON 뷰어 중 가장 싫었던 점은, 페이지를 파싱하지 못해도 여전히 변환을 시도해 실제 내용이 완전히 파괴된 모습을 보여준다는 것이었습니다.
제 규칙은 유효한 JSON, YAML, XML, JSONP가 아니면 확장 프로그램이 아무 동작도 하지 않는다는 것입니다. 작은 토스트 메시지가 왜 동작하지 않았는지 알려 주고, 원래 Chrome이 렌더링한 페이지를 그대로 유지합니다. 빈 화면도, 파괴된 콘텐츠도 없습니다.
과거의 저에게 해주고 싶은 세 가지 조언
- 권한은 신뢰를 팔기 위한 핵심입니다. 프라이버시를 중시하는 사용자는 매니페스트를 읽어봅니다. 최소한의 권한을 요청하는 것이 어떤 마케팅 카피보다 더 큰 가치를 가집니다.
- 실제 데이터를 사용해 테스트하세요. 50줄짜리 샘플 JSON 파일로는 실제 API 응답을 처리할 수 있는지 알 수 없습니다.
- 전체를 오픈소스로 공개하고 MIT 라이선스로 배포하세요. 빌드 단계 없이 바로 사용할 수 있게 하면 감사 가능성이 기능이 됩니다. 코드를 읽어 검증할 수 있게 하고, 프라이버시 정책을 믿게 만들지 마세요.
이 확장 프로그램의 이름은