0. qnn24 진행퍼센트 알려주는 크롬 확장프로그램 만들기 - 준비

 내가 하는 앱테크들 중에서 뉴스를 보면 포인트를 주는 qnn24라는 사이트가 있다. 뉴스기사를 약 7초동안 보고 있으면 진행도 5%가 오르고 100%를 채우면 포인트를 지급받는 방식이다. 기사도 읽으면서 소소하게 포인트도 버니 괜찮은 앱테크라 생각한다. 다만 한가지 신경쓰이는 점이 있다면, 브라우저 창을 좁게 하거나 모바일 환경에서는 실시간으로 진행도가 오르는 것을 볼 수 있는데 평소 내가 자주 사용하는 환경인 pc에서는 그게 보이지 않는다. 이유는 모르겠으나 진행도를 볼 수 없어서 불편했다. 그렇다고 모바일로 보자니 pc버전의 장점인 다른 뉴스기사들을 바로 눌러서 이동할 수 있다는 점을 포기하고 싶지 않았다. 모바일은 위의 주제 탭을 누르고 다시 기사를 선택해야한다. 그러다가 생각한 것이 '확장프로그램으로 실시간 진행도를 알리는 기능을 만들면 어떨까'였다. 단순히 웹페이지에서 보여주는 진행도를 내 눈앞에 띄워주기만 하면 되는거니까 확장프로그램이 적합하고 구현하는게 그렇게 어렵지 않을것이라 생각했다.

 

 

모바일 버전(창모드에서 세로가 더 길때)과 달리 pc버전(창이 가로가 더 길때)에서는 진행상황을 보여주는 UI가 보이지 않는다.

 

 걱정과 달리 웹페이지에서 콘솔 명령어를 이리저리 두드려보니 나의 활동 진행도를 얻을 수 있었다. 아마 확장프로그램을 만들때 자바스크립트를 이용하면 이 정보를 가져올 수 있을 것이다.

PC UI 웹에서도 진행상황을 제공해주고 있다.

Building a really simple Chrome extension (tomforth.co.uk)

Building a really simple Chrome extension

하지만 나는 크롬 확장 프로그램을 만들어 본 적이 없었다. 그래서 구글링을 하다가 발견한 교육용 크롬확장프로그램 example을 받았다.

 

대충 아이콘 만들어주고 원래 있던 Helloworld 아이콘에서 저걸로 바꿔주었다.

 

 

 개발자 모드를 켜고 임의로 설치한 뒤 테스트해본다.

 

 아이콘도 잘 바뀌었고 원본의 기능인 Hello World도 출력되는 모습이다.

물론 이건 껍데기만 씌운거고 이제 확장프로그램 기능과 구조를 익혀서

아래의 기능을 구현하려고 한다.

• 아이콘에서 작은 알림 UI를 띄우는 기능
• 스스로 새로고침을 해서 진행정보를 최신화하는 기능
• 클릭 후 해당 사이트로 바로가기를 제공