트위터 "새 트윗 보기" 메시지를 흐릿하게 해서 가독성을 개선하는 애드온 개발

작업 동기

트위터를 즐겨 쓴다. 나름 헤비 유저다.

트위터는 옛날부터 키보드 사용자를 배려해왔다. 트위터 화면에서 J,K 키를 입력하면 화면을 아래,위로 스크롤할 수 있다.

VIM 사용자 입장에서 아주 자연스럽고 쾌적하다.

그런데 가끔 딱 시야를 방해하는 그 자리에 "새 트윗 보기" 팝업이 뜬다.

일단 팝업이 뜨면 가독성이 현격히 떨어진다. 쾌적하지 못하다.

그림 : 문제 현상

해결책을 찾기 위해 노력했다. 브라우저 개발자 도구를 열고 범인을 찾았다.

그리고 해당 html 요소를 투명하게 만들면 해결 가능함을 확인했다.

하지만 트위터를 켤 때마다 개발자 도구를 열고 콘솔창에서 "화면 청소 코드"를 실행시키는 것은 사람이 할 짓이 아니었다.

이런 건 분명 기계에게 시켜야 옳은 일이다. 그리고 나만 불편할까?

이 기능을 브라우저 애드온으로 만들어 공개한다면 널리 세상을 이롭게 하는, 단군 할아버지께서 기뻐하실 만한 일이 되지 않을까?

그림 : 범인

해결책 : 트위터 화면 청소 코드

obj = document.getElementsByClassName('r-dkhcqf'); for (o of obj) { o.style.opacity = 0.1 }

참조 코드를 찾자

모방은 창조의 어머니.

가장 먼저 할 일은 참조 코드를 찾는 일이다. 파이어폭스를 주력 브라우저로 쓰는 입장에서 아주 그럴듯한 참조 코드를 찾았다.

webextensions-examples. 이름처럼 다양한 애드온 샘플로 구성된 프로젝트다. 제시된 애드온 샘플 중에서 borderify 샘플이 내게 잘 맞는다고 생각했다.

borderify 애드온은 *.mozilla.org 페이지를 표시할 때마다 붉은색 테두리를 덧붙여 표시하는 애드온이다.

특정 url에 반응한다는 점(즉 트위터 url에 반응하는 애드온을 만들 수 있다는 점)과 브라우저 컨텐트를 대상으로 스크립트를 실행한다는 점(즉 트위터 화면 청소 코드를 실행시키는 애드온을 만들 수 있다는 점)이 내가 원하던 바였다.

몇 차례 시행착오 끝에 애드온 소스 코드를 완성했다.

애드온 GitHub 소스 레포

파이어폭스 주소창에서 about:debugging을 입력하고, "임시 부가 기능 로드..." 버튼을 선택해서 manifest.json 파일을 선택하면, 브라우저에서 애드온을 실행시켜 볼 수 있다. 그렇게 애드온이 정상 동작함을 확인했다.

그림 : 애드온 개발 설정

이제 개발한 애드온을 정식 등록할 차례다. 그러면 브라우저를 실행시킬 때마다 "임시 부가 기능 로드..." 버튼을 클릭하지 않아도 된다.

그리고 집에 있는 컴퓨터 뿐 아니라 회사에 있는 컴퓨터에서도 이 애드온을 사용할 수 있게 된다. 절차는 간단했다. AMO 개발자 허브에 등록하면 된다.

소스 코드를 zip 파일로 압축해서 클릭 몇 번만 하면 등록이 완료된다.

그러면 24 시간 이내에 처리 결과를 알려주겠다는 친절한 메일이 온다. 그리고 정말 그 다음날 애드온이 등록됐다.

그림 : AMO에 정식 등록된 애드온

그림 : 파이어폭스에 정식 설치된 애드온

브라우저 애드온은 나름 표준 웹기술이어서 파이어폭스 애드온을 조금만 다듬으면 크롬 브라우저에서도 사용 가능하다.

크롬 브라우저를 위한 나머지 일은 다른 훌륭한 사람에게 미룬다.

브라우저로 할 수 있는 재미난 일이 더욱 많아지기를 희망한다.

웹3 세상의 주력 플랫폼은 브라우저일 것이다.